Android Material3自定义颜色不生效及Toolbar图标颜色修改求助

问题说明 #

在Android开发中使用Material3框架，已在colors.xml中定义各类主题颜色，但AppBar、Toolbar、FAB均未应用这些自定义颜色。当前使用Theme.Material3.Light.NoActionBar主题，Toolbar图标显示为黑色，需改为白色。相关代码如下：

colors.xml #

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Primary Colors -->
    <color name="colorPrimary">#2BAD7D</color>
    <color name="colorPrimaryVariant">#239366</color>
    <color name="colorOnPrimary">#FFFFFF</color>

    <!-- Secondary Colors -->
    <color name="colorSecondary">#FFFFFF</color>
    <color name="colorSecondaryVariant">#F2F2F2</color>
    <color name="colorOnSecondary">#2BAD7D</color>

    <!-- Background Colors -->
    <color name="colorBackground">#FFFFFF</color>
    <color name="colorOnBackground">#737373</color>

    <!-- Surface Colors -->
    <color name="colorSurface">#F2F2F2</color>
    <color name="colorOnSurface">#737373</color>

    <!-- Error Colors -->
    <color name="colorError">#B00020</color>
    <color name="colorOnError">#FFFFFF</color>

    <!-- On-Surface Colors -->
    <color name="colorHighEmphasis">#1B1B1B</color>
    <color name="colorMediumEmphasis">#737373</color>
    <color name="colorDisabled">#C5C5C5</color>
</resources>

activity_main.xml #

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/AppBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true">
    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/ToolBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        android:titleTextAppearance="@style/ToolbarTitleAppearance"/>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/TabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/tabIndicator"
        app:tabTextAppearance="@style/TabLayoutStyle"
        app:tabTextColor="@color/tabTextColor"
        app:tabSelectedTextColor="@color/tabSelectedTextColor"
        app:tabGravity="fill"
        app:tabInlineLabel="true"
        app:tabIconTint="@drawable/x_tab_icon_opacity"
        android:contentDescription="@string/homeTabLayout"/>
</com.google.android.material.appbar.AppBarLayout>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:contentDescription="@string/homeFAB"
    android:src="@drawable/x_icon_message"
    tools:ignore="ImageContrastCheck"/>

解决步骤 #

1. 绑定自定义颜色到Material3主题属性 #

Material3不会自动关联旧版命名的颜色资源，需在主题文件（themes.xml或themes.xml (night)）中把自定义颜色映射到Material3标准属性：

<style name="Theme.YourAppName" parent="Theme.Material3.Light.NoActionBar">
    <!-- 主色调映射 -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorOnPrimary">@color/colorOnPrimary</item>
    <item name="colorPrimaryContainer">@color/colorPrimaryVariant</item>

    <!-- 背景与表面色映射 -->
    <item name="colorBackground">@color/colorBackground</item>
    <item name="colorOnBackground">@color/colorOnBackground</item>
    <item name="colorSurface">@color/colorSurface</item>
    <item name="colorOnSurface">@color/colorOnSurface</item>

    <!-- 指定Toolbar样式继承主题色调 -->
    <item name="toolbarStyle">@style/Widget.Material3.Toolbar.Primary</item>
</style>

2. 强制设置Toolbar背景与图标颜色 #

若主题映射未生效，可直接给MaterialToolbar指定背景和图标 tint：

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/ToolBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:title="@string/app_name"
    android:titleTextAppearance="@style/ToolbarTitleAppearance"
    android:background="@color/colorPrimary"
    app:navigationIconTint="@color/colorOnPrimary"
    app:menuItemIconTint="@color/colorOnPrimary"/>

同时确保标题文字颜色为白色，修改ToolbarTitleAppearance：

<style name="ToolbarTitleAppearance" parent="TextAppearance.Material3.HeadlineSmall">
    <item name="android:textColor">@color/colorOnPrimary</item>
</style>

3. 配置FAB应用自定义主色 #

默认FAB会使用主题的colorPrimary，若未生效则直接指定：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:contentDescription="@string/homeFAB"
    android:src="@drawable/x_icon_message"
    app:backgroundTint="@color/colorPrimary"
    app:tint="@color/colorOnPrimary"
    tools:ignore="ImageContrastCheck"/>

4. 统一AppBarLayout背景 #

若需要AppBarLayout与Toolbar背景一致，添加背景属性：

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/AppBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="@color/colorPrimary">

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