CollapsingToolbarLayout transition issue

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

[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