CollapsingToolbarLayout transition issue

[ArcherEmiya05]

Description: CollapsingToolbarLayout collapse transition is not working properly in Material 3, tested on multiple device. Notice how the Toolbar color went solid immediately instead of having some fade effect like the first example.

Expected behavior:

Expected

Actual

https://user-images.githubusercontent.com/38008900/168493911-f4a1f8fa-b851-4eaf-8757-0bbfd5b64d07.mp4

Source code:

Activity

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

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/collapsingToolbarLayoutLargeSize"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:maxLines="3">

            <androidx.appcompat.widget.AppCompatImageView
                android:id="@+id/featuredImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                android:paddingStart="0dp"
                android:paddingEnd="10dp"
                app:contentInsetEnd="0dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                app:title="@string/vwap" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

Theme

<style name="Theme.Cryptonian" parent="Theme.Material3.DayNight">
      <item name="collapsingToolbarLayoutStyle">@style/AppCollapsingToolbar</item>
</style>

Style

<!-- CollapsingToolbar style on both light and night mode -->
    <style name="AppCollapsingToolbar" parent="Widget.Material3.CollapsingToolbar" tools:keep="@style/AppCollapsingToolbar">
        <item name="expandedTitleTextColor">@android:color/white</item>
        <item name="statusBarScrim">@color/colorGray_PrimaryDark</item>
        <item name="collapsedTitleTextAppearance">@style/TextAppearance.App.CollapsingToolbar.Collapsed</item>
        <item name="expandedTitleTextAppearance">@style/TextAppearance.App.CollapsingToolbar.Expanded</item>>
    </style>

    <style name="TextAppearance.App.CollapsingToolbar.Expanded" parent="TextAppearance.MaterialComponents.Headline5" tools:keep="@style/TextAppearance_App_CollapsingToolbar_Expanded">
        <item name="android:textSize">18sp</item>
        <item name="android:shadowRadius">4</item>
        <item name="android:shadowDy">1</item>
        <item name="android:shadowColor">@android:color/black</item>
    </style>

    <style name="TextAppearance.App.CollapsingToolbar.Collapsed" parent="TextAppearance.MaterialComponents.Headline6" tools:keep="@style/TextAppearance_App_CollapsingToolbar_Collapsed">
        <item name="android:textSize">16sp</item> <!-- Reset -->
        <item name="android:textColor">@color/colorPrimaryDark_White</item>
    </style>

Android API version: SDK 21 and above

Material Library version: 1.7.0-alpha01

[ArcherEmiya05]

Maybe the functionality was stripped by ProGuard which usually happens when using third library UI?

[drchen]

Will it work if you remove app:contentScrim="?attr/colorPrimary" from your view attributes?

[ArcherEmiya05]

Will it work if you remove app:contentScrim="?attr/colorPrimary" from your view attributes?

I checked it now but nothing change except that the Toolbar background color when collapsed became plain dark in night mode and didn't follow the set color.

[dsn5ft]

@ArcherEmiya05 the behavior you're seeing is actually consistent with the new M3 spec, which involves collapsing to show a toolbar color fill at the top.

This new effect is achieved in the M3 Top App Bar styles mainly via AppBarLayout app:liftOnScroll="true" and CollapsingToolbarLayout app:titleCollapseMode="fade".

So to get more of an M2 collapsing toolbar I would probably try setting app:liftOnScroll="false" on your AppBarLayout and titleCollapseMode="scale" on your CollapsingToolbarLayout.

Here is the full list of M3 AppBarLayout/CollapsingToolbarLayout default attributes. Feel free to reopen if this doesn't help.

[ArcherEmiya05]

@ArcherEmiya05 the behavior you're seeing is actually consistent with the new M3 spec, which involves collapsing to show a toolbar color fill at the top.

This new effect is achieved in the M3 Top App Bar styles mainly via AppBarLayout app:liftOnScroll="true" and CollapsingToolbarLayout app:titleCollapseMode="fade".

So to get more of an M2 collapsing toolbar I would probably try setting app:liftOnScroll="false" on your AppBarLayout and titleCollapseMode="scale" on your CollapsingToolbarLayout.

Here is the full list of M3 AppBarLayout/CollapsingToolbarLayout default attributes. Feel free to reopen if this doesn't help.

Thanks a lot, modifying scrimAnimationDuration also helps