Lift On Scroll を使ってみる

Material Design 大好き NUmero です。

Material Design がガラッと変わってからというもの、なんだかんだで毎日見ていますw

Lift On Scroll とは

で、タイトルにある Lift On Scroll てなんぞやと。
説明の前に、これは正式名ではありません。
大事なことなので 2 回言いますが、これは正式名ではありません。

App bars: top

ここにさらっと記載されているだけで、名前がないんです。
じゃあ Lift On Scroll はどこから出てきたのかというと、コードで記述する際の Attribute、属性の名前なんです。 コードについては後ほど記載します。

Lift On Scroll とは Toolbar とコンテンツを同じ elevation で配置しておき、コンテンツをスクロールすることで Toolbar の elevation を上げるというものです。Android の Google が出してるポッドキャストのアプリで使われていましたね。

Google Podcasts - Apps on Google Play

実装について 

前提条件として、Material Components 1.0.0-beta01 もしくは Support Library 28.0.0-alpha3 を使用してください。

実装自体は簡単で、AppBarLayout に app:liftOnScroll="true" を追加するだけです。

<com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:liftOnScroll="true">
        
</com.google.android.material.appbar.AppBarLayout>

注意して欲しいのは、
・コンテンツが NestedScrollView もしくは RecyclerView であること
・上記の View に対し app:layout_behavior="@string/appbar_scrolling_view_behavior" を記載していること(親 View が CoordinatorLayout である必要がある )
という少し使いにくいかもしれない条件があります。

実装すると、こんな感じになります。

実際に使ったサンプルコードのリンクも記載しておきます。

NUmeroAndDev/LiftOnScrollExample-android

補足

自分が試してて Material Components 1.0.0-beta01 と Support Library  28.0.0-alpha3 では RecyclerView に対しては LiftOnScroll が適用されませんでした。バグかなとか思いつつ、ライブラリの更新で何かあれば更新します。