Mastering Android CollapsingToolbarLayout: An Example Project

Explore the fascinating world of Android CollapsingToolbarLayout in our latest blog post! Learn how to integrate this elegant layout feature into your app and enhance the user experience. Dive into practical examples, code snippets, and a step-by-step guide for smooth implementation.

Android CollapsingToolbarLayout

Android CollapsingToolbarLayout is a wrapper for the Toolbar that implements a collapsible app bar. It is designed to be used as a direct child of an AppBarLayout. This layout type is commonly seen in the profile screen of the WhatsApp application. This layout consists of:

• Collapsible Title: The title is larger when the layout is expanded. The text size decreases when the layout is collapsed and scrolled off the screen.
• app:layout_scrollFlags: The scrolling attributes of this layout are typically set to “scroll|exitUntilCollapsed.”
• app:collapsedTitleGravity: Specifies the alignment of the title within the container when it is collapsed.
• app:contentScrim: This requires specifying a string or color value of the content of the CollapsingToolbarLayout when it has been scrolled sufficiently away from the screen, e.g., ?attr/colorPrimary.
• app:scrimAnimationDuration: Specifies the duration used for the visibility animations of the overlays. This requires an integer value like “100.”

If you have recently updated to the latest SDK, select the “Scrolling Activity” type (it contains a pre-built implementation of CollapsingToolbarLayout) when creating a new project.

Run the default new project to get output like this: In this tutorial, we will make modifications to the default project, such as displaying an ImageView, showing the toolbar-equivalent icon from the FAB button when collapsed.

Android CollapsingToolbarLayout Example Project Structure

Android CollapsingToolbarLayout Code

The activity_scrolling.xml looks like this:

 (activity_scrolling.xml)
// The XML code can be found here

The menu_scrolling.xml looks like this:

 (menu_scrolling.xml)
// The XML code can be found here

The code for ScrollingActivity.java is defined as follows:

 (ScrollingActivity.java)
// The Java code can be found here

In the above code, to determine whether the CollapsingToolbarLayout is collapsed or expanded, we add an addOnOffsetChangedListener listener to the AppBarLayout instance. Depending on the if-else conditions, we show or hide the toolbar info option. The application output in action is depicted below.

Conclusion

That concludes this tutorial. You can download the Android CollapsingToolbarLayout project via the link provided below.

Integrating the CollapsingToolbarLayout into your Android application and creating an elegant, collapsible app bar layout is as simple as that. Experiment with it and observe how it enhances the user experience!

We hope this tutorial has been helpful to you. If you have any questions or need assistance, feel free to leave a comment. Thank you for reading!