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.

Answer 1

Introduce

This is implemented by View: Toolbar and CollapsingToolbarLayout inside AppBarLayout.

Solution

New project -> Choose Scrolling Activity -> Next -> Finish

You will see similar 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>