Skip to content

Latest commit

 

History

History
132 lines (110 loc) · 6.01 KB

CollapsingToolbarLayout.md

File metadata and controls

132 lines (110 loc) · 6.01 KB
Raw

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:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Scrollable view here -->

  <com.google.android.material.appbar.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="@dimen/tall_toolbar_height">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleGravity="top"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

      <androidx.appcompat.widget.Toolbar
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          app:layout_collapseMode="pin"/>
    </com.google.android.material.appbar.CollapsingToolbarLayout>
  </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.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:

<com.google.android.material.appbar.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"/>

  <androidx.appcompat.widget.Toolbar
      android:id="@+id/AppBar"
      android:layout_width="match_parent"
      android:layout_height="@dimen/shrine_toolbar_collapsed_height"
      app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.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.

  • Make sure to call setTitle() on the CollapsingToolbarLayout instead of the Toolbar. This allows CollapsingToolbarLayout the ability to resize the title based on the toolbar's current size.
  • You can add as many views as you like to the CollapsingToolbarLayout, but make sure that the Toolbar is the last child of the CollapsingToolbarLayout. This ensures that the views are drawn in the correct order.
  • The scrolling content should be placed in a RecyclerView, NestedScrollView, or another view that supports nested scrolling.

Related Concepts