Material-components-android: [CollapsingToolbarLayout] DarkTheme wrong toolbar background color

[kolbasan]

Description:
I have CollapsingToolbarLayout with a toolbar that is always pinned to top and a collapsible view.
The toolbar's background color based on the toolbar elevation in dark mode is not applied, before collapsing and after collapsing.

Before collapsing:

After collapsing:

Expected behavior:
Toolbar's background to be lighter than the background based on it's elevation

Source code:

<com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:titleEnabled="false"
            app:contentScrim="?attr/colorSurface"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <View
                android:layout_width="match_parent"
                android:layout_marginTop="?attr/actionBarSize"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/holo_orange_dark" />

            <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>

Android API version:
28

Material Library version:
1.1.0-alpha010

Device:
Android Emulator

[rlatapy-luna]

@kolbasan May you have a workaround for this? (except set contentScrim to the "elevated" color).

[kolbasan]

@rlatapy-luna I ended up using ElevationOverlayProvider to get the surface color based on the elevation, and setting it to the collapsing toolbar content scrim and background

[wcshi]

Could you try using MaterialToolbar instead of a widget.Toolbar?

[rlatapy-luna]

Could you try using MaterialToolbar instead of a widget.Toolbar?

Same behavior (1.2.0-alpha04)

[ikim24]

@rlatapy-luna I think you don't want to apply a scrim color at all. As per the MaterialToolbar javadocs:

Regarding the Dark Theme elevation overlays, it's important to note that the Material AppBarLayout component also provides elevation overlay support, and operates under the assumption that the child Toolbar does not have a background. While a MaterialToolbar with a transparent background can be used within an AppBarLayout, in terms of elevation overlays its main value comes into play with the standalone Toolbar case, when using the Widget.MaterialComponents.Toolbar.Surface style with elevation.

The scrim color is going to be applied over the AppBarLayout background, so I believe that's why you're not seeing the elevation overlay that would get applied to the AppBarLayout.

[ViHtarb]

@ikim24 i have the same issue but in my case i need to have ImageView inside collapsing toolbar layout like on screenshot.

Collapsed toolbar without contentScrim

Collapsed toolbar with contentScrim

But in normal result i want to have colored toolbar with elevation overlay

[cketcham]

@ViHtarb The issue is that with the content scrim the elevation overlay is not drawn?

[ViHtarb]

@cketcham yes

[cketcham]

It looks like we should check to see if we can apply the elevation overlay color to the content scrim.

[burhankhanzada]

Maybe it's late but I solve my problem with first check is dark mode active by using this method

fun isDarkTheme(context: Context): Boolean { return context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES }

then setting the collapsingToolbarLayout.setContentScrimColor to elevation overlayed color like this

val collapsingToolbarLayout = findViewById<CollapsingToolbarLayout(R.id.collapsingToolbarLayout)

if (ThemeUtil.isDarkTheme(this@DetailActivity)) {
                        collapsingToolbarLayout!!.setContentScrimColor(
                            ElevationOverlayProvider(this@DetailActivity)
                                .compositeOverlayWithThemeSurfaceColorIfNeeded(4f)
                        )
                    }

[ViHtarb]

@cketcham hi what with this bug?

[ViHtarb]

I can provide more info

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

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
                app:statusBarScrim="@android:color/transparent"
                app:titleEnabled="false"
                app:toolbarId="@id/toolbar">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:contentDescription="@null"
                    android:fitsSystemWindows="true"
                    android:scaleType="matrix"
                    app:imageUrl="@{member.photo.url}"
                    app:layout_collapseMode="parallax"/>

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_collapseMode="pin"/>
            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>

its part of my layout from screenshots above. ElevationOverlay works fine for appBarLayout but as u can see in my code, i have ImageView inside AppBarLayout(AppBarLayout -> CollapsingToolbarLayout -> ImageView) ImageView overlaps appbarlayout background(my second screenshot above).