Search code examples
androidkotlin

How can I make status bar color match collapsing toolbar color when scrolling?

I'm making an android app where I have a Material 3 collapsing toolbar that changes color when scrolling down.

I want the status bar color to match the scrim color of the collapsing toolbar. I have tried setting app:statusBarScrim but it does not do anything, the status bar stays the same color.

I can't find any solution to this online, but this is an axample of the affect I'm going for:

Normal Normal

Scrolled Scrolled

Solution

  • After a while of testing, I solved my issue.

    This is a general XML template that should be followed to achieve the Material 3 collapsing toolbar color change effect. When the layout is scrolled, the toolbar changes to the desired color, and the status bar color changes with it.

    <androidx.coordinatorlayout.widget.CoordinatorLayout
    ...
    android:fitsSystemWindows="true">

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

        <com.google.android.material.appbar.CollapsingToolbarLayout
            style="?attr/collapsingToolbarLayoutMediumStyle"
            android:layout_width="match_parent"
            android:layout_height="?attr/collapsingToolbarLayoutMediumSize"
            app:contentScrim="@color/the_color_you_want"
            app:statusBarScrim="@color/the_color_you_want">

            <com.google.android.material.appbar.MaterialToolbar
                ...
                android:elevation="0dp" />

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

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

    ...

</androidx.coordinatorlayout.widget.CoordinatorLayout>