Android 主题：在 Material3 中将状态栏颜色设置为操作栏颜色
Posted
技术标签:
【中文标题】Android 主题：在 Material3 中将状态栏颜色设置为操作栏颜色【英文标题】：Android theming: Set Status Bar color to Action Bar color in Material3 【发布时间】：2021-12-31 18:28:14 【问题描述】：我正在将我应用的 Material Design 主题从 V2 (1.4.0) 迁移到 V3 (1.5.0)。
与Theme.MaterialComponents.DayNight 的DarkActionBar 子样式不同，Theme.Material3.DayNight 没有DarkActionBar 子样式。
我无法弄清楚默认设置中操作栏使用什么颜色。
这是我当前应用主题的显示方式：
可以看出，我的原色是蓝色，但操作栏已使用原色的阴影/alpha 自动着色。操作栏的十六进制颜色符号不是我定义的。我尝试将状态栏设置为我在 colors.xml 文件中定义的所有各种蓝色阴影，但它们都不是完美匹配。
谁能解释一下操作栏颜色是如何确定的，或者我如何能够将状态栏设置为与操作栏相同的颜色？
colors.xml：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#000000</color>
<color name="white">#ffffff</color>
<color name="black_alpha_020">#33000000</color>
<color name="white_alpha_060">#99ffffff</color>
<color name="blue_50">#e3f2fd</color>
<color name="blue_50_bit_black">#E4F0F5</color>
<color name="blue_100">#bbdefb</color>
<color name="blue_300">#64b5f6</color>
<color name="blue_500">#2196f3</color>
<color name="blue_700">#1976d2</color>
<color name="blue_a100">#82b1ff</color>
<color name="blue_black_3_3">#072451</color>
<color name="blue_black_3_3_bit_black">#031228</color>
<color name="blue_white_5_6">#fafdff</color>
<color name="blue_black_5_6">#061929</color>
<color name="blue_black_10_2">#CEDCE6</color>
<color name="blue500_black_5_6">#26282A</color>
<color name="blue_50_alpha_060">#99e3f2fd</color>
<color name="blue_grey_700">#455a64</color>
<color name="blue_grey_800">#37474f</color>
<color name="amber_100">#ffecb3</color>
<color name="amber_700">#ffa000</color>
<color name="amber_black_3_4">#401C00</color>
<color name="red_50">#ffebee</color>
<color name="red_black_2_3">#3D0909</color>
<color name="red_900">#b71c1c</color>
<color name="grey_600">#757575</color>
</resources>
themes.xml：
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="Theme.SimpleTheme" parent="Theme.Material3.DayNight">
<!--Color-->
<item name="colorPrimary">@color/blue_500</item>
<item name="colorOnPrimary">@color/white</item>
<item name="colorPrimaryContainer">@color/blue_50</item>
<item name="colorOnPrimaryContainer">@color/blue_black_3_3</item>
<item name="colorSecondary">@color/blue_grey_800</item>
<item name="colorOnSecondary">@color/white</item>
<item name="colorSecondaryContainer">@color/blue_50_bit_black</item>
<item name="colorOnSecondaryContainer">@color/blue_black_3_3_bit_black</item>
<item name="colorTertiary">@color/amber_700</item>
<item name="colorOnTertiary">@color/white</item>
<item name="colorTertiaryContainer">@color/amber_100</item>
<item name="colorOnTertiaryContainer">@color/amber_black_3_4</item>
<item name="colorError">@color/red_900</item>
<item name="colorOnError">@color/white</item>
<item name="colorErrorContainer">@color/red_50</item>
<item name="colorOnErrorContainer">@color/red_black_2_3</item>
<item name="android:colorBackground">@color/blue_white_5_6</item>
<item name="colorOnBackground">@color/blue_black_5_6</item>
<item name="colorSurface">@color/blue_white_5_6</item>
<item name="colorOnSurface">@color/blue_black_5_6</item>
<item name="colorSurfaceVariant">@color/blue_black_10_2</item>
<item name="colorOnSurfaceVariant">@color/blue500_black_5_6</item>
<item name="colorOutline">@color/grey_600</item>
<item name="colorSurfaceInverse">@color/blue_black_5_6</item>
<item name="colorOnSurfaceInverse">@color/blue_white_5_6</item>
<item name="colorPrimaryInverse">@color/blue_a100</item>
<item name="android:navigationBarColor" tools:targetApi="o_mr1">?attr/colorSurface</item>
<item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
</style>
<style name="Theme.SimpleTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
【问题讨论】：
【参考方案1】：让你的状态栏透明：
主题.xml
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar">true</item>
themes.xml（夜晚）
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar">false</item>
编辑您的 activity_main.xml 文件，如下示例代码：
<androidx.coordinatorlayout.widget.CoordinatorLayout
...
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
...
android:layout_
android:layout_
android:fitsSystemWindows="true"
...>
<com.google.android.material.MaterialToolbar
...
/>
</com.google.android.material.appbar.AppBarLayout>
...
</androidx.coordinatorlayout.widget.CoordinatorLayout>
欲了解更多信息，请查看此文档：https://m3.material.io/components/top-app-bar/implementation/android#collapsing-top-app-bars
【讨论】：
【参考方案2】：theme.xml（无夜）：
<style name="Theme.AllCodeApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
<item name="actionBarStyle">
@style/MyActionBarDarkStyle
</item>
</style>
<style name="MyActionBarDarkStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
<item name="backgroundColor">@color/white</item>
</style>
theme.xml（夜晚）：
<style name="Theme.AllCodeApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:statusBarColor" tools:targetApi="l">@color/teal_200</item>
<item name="actionBarStyle">
@style/MyActionBarDarkStyle
</item>
</style>
<style name="MyActionBarDarkStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
<item name="backgroundColor">@color/teal_200</item>
</style>
【讨论】：
我知道如何设置颜色。我需要弄清楚为操作栏自动设置什么颜色，最好使用属性设置状态栏颜色 好的，我的代码是更新检查它 我实际上使用的是 Material V3 (Theme.Material3) 而不是 V2 (Theme.MaterialComponents)。您在代码中拥有的父主题不再存在。我尝试了类似于您在代码中的内容，但没有成功。设置 textColor 和 titleTextColor 也不会改变操作栏样式。不知道这是否是一个错误。 把你的主题明暗文件发给我 我编辑了我的问题。【参考方案3】：使用 SurfaceColors 类
Action Bar 的颜色是 colorSurface 和高程。
如果你想改变状态栏的颜色。使用SurfaceColors 类。此功能也适用于 Material 3 中的动态着色和日/夜模式。
Kotlin 中的代码
val color = SurfaceColors.SURFACE_2.getColor(this)
window.statusBarColor = color // Set color of system statusBar same as ActionBar
window.navigationBarColor = color // Set color of system navigationBar same as BottomNavigationView
结果 谢谢
【讨论】：
以上是关于Android 主题：在 Material3 中将状态栏颜色设置为操作栏颜色的主要内容，如果未能解决你的问题，请参考以下文章
在 Xamarin.Forms 中将默认的深色 Android 主题更改为白色？