Android CollapsingToolbarLayout

Android CollapsingToolbarLayout is one of the most common features on android material design. By using collapsing toolbar we can now collapse our android app toolbar and use image or others things on the toolbar and that visibility is gone with collapse.

In this post, We will learn how to use Collapsing Tollbar layout.

Let's check documentation

Now start- First, add design dependence on your build.graddle file. (But it automatically added by the android studio. But lets a check)

dependencies {
    //some code
    compile 'com.android.support:design:23.0.1'
}

Now go to your XML file. In my case activity_main.xml it looks like-

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

Now we add collapsing toolbar layout in AppBarLayout. Let's add-

<android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/main_collapsing_tb"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

here we use scroll flag for how our layout should be scrolled. we want to scroll and exit until collapsed. now modify Toolbar. just adding a line.

app:layout_collapseMode="pin"

Now our collapsing toolbar is working. We here use only a toolbar in collapsing toolbar layout. But you can add picture and others things. If you are adding picture the modify code

app:layout_collapseMode="parallax"

Ok. That's it. If you miss some code or don't understand code where to use then see below full code.

<android.support.design.widget.AppBarLayout
        android:layout_height="@dimen/main_app_bar"
        android:layout_width="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/main_collapsing_tb"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:layout_gravity="top"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

Thanks for reading this post.
Hope you are able to use this feature.



 Happy coding