mirror of
https://github.com/material-components/material-components-android.git
synced 2026-01-20 20:12:52 +08:00
ab2fec6da4
Bazel is happier if Java/Java test roots are named 'java' and 'javatests', and
this will mean that once we create a BUILD file for
android/support/design/{widget,internal}/ we'll no longer need a custom package
specified in our build (which tends to cause build problems that manifest quite
weirdly). This commit doesn't attempt to refactor the build at all yet, and is
just a pure move.
PiperOrigin-RevId: 178060739
133 lines
6.0 KiB
Markdown
133 lines
6.0 KiB
Markdown
<!--docs:
|
|
title: "Collapsing Toolbars"
|
|
layout: detail
|
|
section: components
|
|
excerpt: "Collapsing toolbars change height and other visual aspects in response to scrolling."
|
|
iconId: toolbar
|
|
path: /catalog/collapsing-toolbar-layout/
|
|
-->
|
|
|
|
# Collapsing Toolbars
|
|
|
|
|
|
<!--{: .article__asset.article__asset--screenshot }-->
|
|
|
|
`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`](https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html),
|
|
[`CoordinatorLayout`](https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html),
|
|
[`Toolbar`](https://developer.android.com/reference/android/support/v7/widget/Toolbar.html),
|
|
and a scrollable content view, such as
|
|
[`RecyclerView`](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html).
|
|
|
|
## Design & API Documentation
|
|
|
|
* [Material Design guidelines: UI
|
|
regions](https://material.io/guidelines/layout/structure.html#structure-ui-regions)
|
|
<!--{: .icon-list-item.icon-list-item--spec }-->
|
|
* [Material Design guidelines: Scrolling app bar
|
|
behavior](https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior)
|
|
<!--{: .icon-list-item.icon-list-item--spec }-->
|
|
* [Class
|
|
definition](https://github.com/material-components/material-components-android/tree/master/lib/java/android/support/design/widget/CollapsingToolbarLayout.java)
|
|
<!--{: .icon-list-item.icon-list-item--link }-->
|
|
* [Class
|
|
overview](https://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html)
|
|
<!--{: .icon-list-item.icon-list-item--link }--> <!--{: .icon-list }-->
|
|
|
|
## 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:
|
|
|
|
```xml
|
|
<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`](https://developer.android.com/reference/android/widget/ImageView.html)
|
|
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:
|
|
|
|
```xml
|
|
<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.
|
|
|
|
* Make sure to call
|
|
[`setTitle()`](https://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html#setTitle\(java.lang.CharSequence\))
|
|
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`](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html),
|
|
[`NestedScrollView`](https://developer.android.com/reference/android/support/v4/widget/NestedScrollView.html),
|
|
or another view that supports nested scrolling.
|
|
|
|
## Related Concepts
|
|
|
|
* [AppBarLayout](https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html)
|
|
* [TabLayout](https://developer.android.com/reference/android/support/design/widget/TabLayout.html)
|