滚动时如何让Android状态栏颜色匹配Material 3折叠工具栏颜色？

我开发Android应用时使用了Material 3折叠工具栏，该工具栏向下滚动时会改变颜色，希望状态栏颜色能匹配折叠工具栏的遮罩色，但设置app:statusBarScrim后无效果，状态栏颜色保持不变。想要实现的效果如下：

• 正常状态：
• 滚动后状态：

解决方案 #

1. 修正主题配置 #

在res/values/themes.xml的Material 3主题中，确保状态栏支持动态颜色修改：

<style name="Theme.YourApp" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="toolbarStyle">@style/Widget.Material3.Toolbar.Primary</item>
</style>

2. 正确配置CollapsingToolbarLayout #

在布局文件中，给CollapsingToolbarLayout添加关键属性，确保状态栏联动生效：

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:statusBarScrim="@color/your_scrolled_status_color"
    app:contentScrim="@color/your_collapsed_toolbar_color"
    app:fitsSystemWindows="true">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        app:fitsSystemWindows="true"/>

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

3. 代码监听滚动动态适配（配置无效时备用） #

在Activity或Fragment中，通过AppBarLayout的滚动监听，根据折叠比例动态混合状态栏颜色：

val appBarLayout = findViewById<AppBarLayout>(R.id.app_bar_layout)
val statusColorNormal = ContextCompat.getColor(this, R.color.your_normal_status_color)
val statusColorScrolled = ContextCompat.getColor(this, R.color.your_scrolled_status_color)

appBarLayout.addOnOffsetChangedListener { _, verticalOffset ->
    val scrollRange = appBarLayout.totalScrollRange
    val collapseRatio = Math.abs(verticalOffset).toFloat() / scrollRange.toFloat()
    window.statusBarColor = blendColors(statusColorNormal, statusColorScrolled, collapseRatio)
}

private fun blendColors(color1: Int, color2: Int, ratio: Float): Int {
    val inverseRatio = 1f - ratio
    val r = (Color.red(color1) * inverseRatio + Color.red(color2) * ratio).toInt()
    val g = (Color.green(color1) * inverseRatio + Color.green(color2) * ratio).toInt()
    val b = (Color.blue(color1) * inverseRatio + Color.blue(color2) * ratio).toInt()
    return Color.rgb(r, g, b)
}

注意事项 #

• 确保Material 3库版本在1.9.0及以上，旧版本存在statusBarScrim兼容性问题；
• 检查fitsSystemWindows属性是否在CollapsingToolbarLayout、MaterialToolbar及根布局中正确设置，这是状态栏联动的核心前提。

内容的提问来源于stack exchange，提问作者AverageMoss