CollapsingToolbarLayout is a component of Material Design.

CollapsingToolbarLayout is mainly used to implement a collapsible title bar and is generally 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 the expanded title
app:expandedTitleGravity="left|bottom"
// Position of the collapsed title
app:collapsedTitleGravity="left"
// Background color of the Toolbar after CollapsingToolbarLayout is collapsed
app:contentScrim ="@color/colorPrimary"
// Duration of color change when CollapsingToolbarLayout is collapsed
app:scrimAnimationDuration="1200"
// At what position the color starts to change from the visible height
app:scrimVisibleHeightTrigger="150dp"
// Color change of status bar (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. The color of the Title can be set 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, and other attributes 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, it can be combined with another attribute layout_collapseParallaxMultiplier to form a parallax scrolling effect.

This is the end of the introduction to CollapsingToolbarLayout. Of course, examples are necessary. 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, as follows:

This concludes the introduction to CollapsingToolbarLayout.