Material Components for Android

Android

Collapsing Toolbars

Collapsing Toolbars

CollapsingToolbarLayout is a ViewGroup that provides many of the visual characteristics and interactions for collapsing toolbars specified in the material guidelines. To create the collapsing toolbar, CollapsingToolbarLayout integrates with AppBarLayout, CoordinatorLayout, Toolbar, and a scrollable content view, such as RecyclerView.

Design & API Documentation

Usage

To add a collapsing toolbar to your layout, place the CollapsingToolbarLayout inside an AppBarLayout. Then, add a Toolbar and any other views as a child to the CollapsingToolbarLayout. Make sure that the entire view structure is inside a CoordinatorLayout to take advantage of CollapsingToolbarLayout’s scrolling and features.

A layout with a collapsing toolbar might look something like this:

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Scrollable view here -->

  <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="@dimen/tall_toolbar_height">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleGravity="top"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

      <android.support.v7.widget.Toolbar
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          app:layout_collapseMode="pin"/>
    </android.support.design.widget.CollapsingToolbarLayout>
  </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

A common collapsing toolbar pattern is the parallax image scroll, in which images or other children of the CollapsingToolbarLayout scroll at different rates than their siblings. To achieve this effect, add an ImageView and any other views as children of the CollapsingToolbarLayout. Specify parallax multipliers in the XML for as many of the siblings as you like.

A toolbar with a collapsing image might look something like this:

<android.support.design.widget.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleGravity="top"
    app:expandedTitleMarginStart="@dimen/shrine_toolbar_offset_start"
    app:expandedTitleMarginTop="@dimen/shrine_toolbar_offset_top"
    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="@dimen/shrine_toolbar_image_offset_top"
      app:layout_collapseMode="parallax"
      app:layout_collapseParallaxMultiplier="0.5"/>

  <android.support.v7.widget.Toolbar
      android:id="@+id/AppBar"
      android:layout_width="match_parent"
      android:layout_height="@dimen/shrine_toolbar_collapsed_height"
      app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>

You can combine the basic collapsing toolbar with scroll flags, CollapsingToolbarLayout’s attributes, TabViewLayout, or any other view you would like to achieve your desired toolbar.