android - How to do a custom app bar from large title to small with animation?

Question

I means this:

The transition occurs as the content on the layer begin to scroll.

It's similarly to prominent from material.io. But I don't know how to do it. I could not find an example.

标签： androidanimationandroid-actionbarmaterial-designandroid-appbarlayout

Answer 1

介绍

这是由View:Toolbar和CollapsingToolbarLayoutinside实现的AppBarLayout。

解决方案

新建项目 -> 选择Scrolling Activity-> 下一步 -> 完成

你会看到类似的activity_main.xml

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        style="@style/ToolbarTextAppearanceStyle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:toolbarId="@+id/toolbar">

        <androidx.appcompat.widget.Toolbar

            android:id="@+id/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>