Collapsing Toolbar Layout – Android Design Support Library #1

Vamsi Tallapudi Android 1 Comment

In this article, we are about to discuss how to add a Collapsing toolbar layout to our Android Project. Collapsing Toolbar Layout provides a nice appealing interface with an imageview in toolbar which fades and collapses from toolbar when the content is scrolled towards bottom. Collapsing Toolbar Layout is directly available from Design Support Library released by Google in Mid 2015 which introduced many default layout features such as NavigationView, TextInputLayouts, Snackbar, Tabs, etc.

The following image demonstrates what we would like to achieve in this article.collapsing toolbar layout - demo

So let us see how we can add the exciting Collapsing Toolbar Layout to our Android Project. The source code for this tutorial can be cloned/downloaded from the github repo below:


Related Links:

Android Layouts and Type of Android Layouts

Android RecyclerView Tutorial

Collapsing Toolbar Layout Integration using Android Studio:

  1. Before doing anything, let us add the design support library in our App Module’s build.gradle file’s dependencies.
    To get the latest version of support library, head-on to this website.
  2. Next we are going to add the following styles to our res>values>styles.xml file:
    Next we will also add the following styles to our res>values-v21>styles.xml file so that we can achieve transparent status bar for devices above API V21:
    If the above folder doesnot exist in your project, create it manually. This will make the status bar transparent with the image from the collapsing toolbar layout. These are the styles we are going to use in our project.
  3. Now open manifest file to use the newly created style for our Activity. We add the following attribute to our activity to ensure that we use the toolbar we declared in our xml and not the actionbar provided by the android:
  4. Next we are going to add a Coordinator Layout from the Design Support Library to our Layout as RootView.

    We need to add the attribute android:fitsSystemWindows=“true” so that we need to make sure interactive elements (like buttons) aren’t hidden underneath them. For more details, refer this article.

  5. Now we will be adding AppBarLayout inside our CoordinatorLayout.
  6. Now we will be adding our CollapsingToolbarLayout to our AppBarLayout which we’ve included just now.
    Here contentScrim is used to set the color of toolbar when Collapsible toolbar is collapsed.
  7. Next we need to add a NestedScrollView to our Coordinator Layout to support scrollview inside scrollview.
    The content which we need to display below the CollapsibleToolbarLayout can be included as separate layout which i’ve named as content_collapsible_toolbar.xml. 
  8. If you want you might just include a Floating Action Bar (FAB) along with our Collapsing Toolbar Layout, you can do with just a small addition of code:

    The app:layout_anchor attribute helps the FAB to anchor to whichever layout we specify. The app:layout_anchorGravity tag here is helping the FAB to stick to bottom right to appbar layout as shown in the demo.

    The completed xml for our Collapsing Toolbar Layout is as follows:

    In the upcoming tutorials, we will be discussing more on what’s more from Android Design Support Library.