CollapsingToolbarLayout of Material Design Components

CollapsingToolbarLayout is mainly used to implement a collapsible title bar, usually used as a child view of AppBarLayout. The following summarizes the usage of CollapsingToolbarLayout, as follows:

Common attributes
Two flags
Display effect

Common attributes#

//Whether to display the title
app:titleEnabled="true"
//Title content
app:title="CollapsingToolbarLayout"
//Position of expanded title
app:expandedTitleGravity="left|bottom"
//Position of collapsed title
app:collapsedTitleGravity="left"
//Background color of Toolbar after CollapsingToolbarLayout is collapsed
app:contentScrim ="@color/colorPrimary"
//Duration of color change when CollapsingToolbarLayout is collapsed
app:scrimAnimationDuration="1200"
//At what position does the color start to change from the visible height
app:scrimVisibleHeightTrigger="150dp"
//Status color change (Android 5.0)
app:statusBarScrim="@color/colorAccent"
//Set the relationship between the scrolling component and the gesture
app:layout_scrollFlags="scroll|exitUntilCollapsed"

For the Title, when the collapsed layout is completely visible, the Title becomes larger. As the collapsible layout is scrolled upwards, the visible range becomes smaller and the Title becomes smaller. You can set the color of the Title as follows:

//Set the title
ctlCollapsingLayout.setTitle("CollapsingToolbarLayout");
//Set the color when CollapsingToolbarLayout is expanded
ctlCollapsingLayout.setExpandedTitleColor(Color.parseColor("#ffffff"));
//Set the color when CollapsingToolbarLayout is collapsed
ctlCollapsingLayout.setCollapsedTitleTextColor(Color.parseColor("#46eada"));

The color gradient process of this Title is completed by CollapsingToolbarLayout. Of course, other properties can also be set in the code.

Two flags#

Let's talk about two important attributes separately, which can be used as flags:

layout_scrollFlags
layout_collapseMode

layout_scrollFlags: Generally, when using components such as CoordinatorLayout and AppBarLayout to construct an interface, there is usually a scrolling view, such as NestedScrollView. The scrolling view generally sets the system default Behavior, as follows:

//Set the layout_behavior attribute
<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    ...
</android.support.v4.widget.NestedScrollView>

Components that need to move with the scrolling view, such as ToolBar and CollapsingToolbarLayout, need to set the layout_scrollFlags attribute to specify different actions. For the specific meanings of layout_scrollFlags values, please refer to a previous article: AppBarLayout of Material Design Components.

layout_collapseMode: layout_collapseMode has two values to choose from. If pin is set, the View will be fixed to the top as the page scrolls upwards. If parallax is set, the View will scroll with the page. At this time, the layout_collapseParallaxMultiplier attribute can be combined to create a parallax scrolling effect.

This is the end of the introduction to CollapsingToolbarLayout. Of course, it is not complete without an example. Here is a simple usage example. The layout is as follows:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.manu.materialdesignsamples.samples.SampleCollapsingToolbarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctlCollapsingLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:titleEnabled="true"
            app:title="CollapsingToolbarLayout"
            app:expandedTitleGravity="left|bottom"
            app:collapsedTitleGravity="left"
            app:contentScrim ="@color/colorPrimary"
            app:scrimAnimationDuration="1200"
            app:scrimVisibleHeightTrigger="150dp"
            app:statusBarScrim="@color/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6"
                android:background="@drawable/ic_collapsing_title"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin">
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rvCollapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Display effect#

The following is the display effect:

This concludes the introduction to CollapsingToolbarLayout.