Android主题化：在Material3中将状态栏颜色设置为操作栏颜色

epggiuax 于 2023-03-16 发布在 Android

关注(0)|答案(5)|浏览(648)

我正在将应用的Material Design主题从V2（1.4.0）迁移到V3（1.5.0）。
与Theme.MaterialComponents.DayNight不同，Theme.Material3.DayNight有一个DarkActionBar子样式，它使用动作栏的主颜色，Theme.Material3.DayNight没有DarkActionBar子样式。
我不知道默认设置中操作栏使用的是什么颜色。
这是我当前应用主题的显示方式：

如图所示，我的主颜色是蓝色，但操作栏已自动使用主颜色的阴影/alpha着色。操作栏的十六进制颜色符号不是我定义的。我尝试将状态栏设置为我在colors.xml文件中定义的所有蓝色阴影，但没有一个是完美匹配的。
有人能解释一下操作栏的颜色是如何确定的，或者我如何能够将状态栏设置为与操作栏相同的颜色？

颜色.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>

主题文件：

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

android

来源：https://stackoverflow.com/questions/70060958/android-theming-set-status-bar-color-to-action-bar-color-in-material3

5条答案

按热度按时间

eoigrqb61#

使用表面颜色类

操作栏的颜色为带高程的colorSurface。
如果你想改变状态栏的颜色。使用SurfaceColors类。这个函数也适用于材质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

结果x1c 0d1x谢谢

赞(0）回复(0）举报 2023-03-16

nhaq1z212#

使状态栏透明：
themes.xml

<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar">true</item>

主题. 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_width="match_parent"
        android:layout_height="wrap_content"
        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

赞(0）回复(0）举报 2023-03-16

cunj1qz13#

主题.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>

主题.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>

赞(0）回复(0）举报 2023-03-16

btxsgosb4#

你使用的父主题有一个属性colorSurface，这个属性负责操作栏的背景色。但是在material 3中，原色立面被应用到表面颜色来创建一个混合颜色。参考下面的链接，仔细阅读使用表面颜色一节，你会得到你的答案。Here is the link。
由于该颜色是动态生成的，因此您可以使用SurfaceColors API动态设置应用的状态栏颜色。
在java getWindow().setStatusBarColor(SurfaceColors.SURFACE_5.getColor(this));中
我已经使用枚举SURFACE_5上面的例子的目的，你可以使用不同的枚举从SURFACE_0到SURFACE-5，以获得所需的颜色。

赞(0）回复(0）举报 2023-03-16

fkvaft9z5#

对我起作用的是在themes.xml中执行以下操作。
这对光明和黑暗的主题都有效：

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowLightStatusBar">true</item>

赞(0）回复(0）举报 2023-03-16

我来回答

Android主题化：在Material3中将状态栏颜色设置为操作栏颜色

5条答案

相关问题

热门标签

最新问答