MaterialComponents主题下自定义AppBar和Toolbar样式不生效问题

我在使用Material Components的Android应用中，尝试给AppBar和Toolbar设置全局自定义样式，希望在所有Activity中生效，但自定义的背景色和标题文字颜色都没显示出来。通过TalkBack确认标题存在但不可见，推测是白背景配白文字导致。

现有配置 #

1. styles.xml #

<resources>
    <style name="GlobalButtonStyle" parent="Widget.AppCompat.Button">
        <item name="textAllCaps">false</item>
        <item name="android:backgroundTint">@color/dark_green</item>
        <item name="android:textColor">@color/white</item>
    </style>

    <style name="CustomTextViewStyle" parent="TextAppearance.AppCompat">
        <item name="android:textColor">@color/white</item>
    </style>

    <style name="CustomAppBarStyle" parent="Widget.MaterialComponents.AppBarLayout.Primary">
        <item name="backgroundTint">#000080</item>
    </style>

    <style name="CustomTooolbarStyle" parent="Widget.MaterialComponents.Toolbar">
        <item name="backgroundTint">#000080</item>
        <item name="titleTextColor">@color/white</item>
    </style>
</resources>

2. themes.xml #

<resources>
    <style name="Theme.EchoPoint" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="buttonStyle">@style/GlobalButtonStyle</item>
        <item name="android:windowBackground">@color/black</item>
        <item name="android:textViewStyle">@style/CustomTextViewStyle</item>
        <item name="appBarLayoutStyle">@style/CustomAppBarStyle</item>
        <item name="toolbarStyle">@style/CustomTooolbarStyle</item>
    </style>
</resources>

3. activity_main.xml布局 #

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/MainAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</com.google.android.material.appbar.AppBarLayout>

已尝试操作 #

• 确认样式已在主题中应用
• 确保父样式继承自MaterialComponents
• 使用backgroundTint设置背景色

期望结果 #

• AppBar背景色为#000080，标题文字为白色

解决方案 #

核心问题分析 #

1. 主题继承错误：当前主题继承自Theme.AppCompat.Light.NoActionBar，但使用Material Components组件时，必须继承Material专属主题，否则组件的全局样式属性无法被正确识别。
2. Toolbar样式名称拼写错误：样式名CustomTooolbarStyle多了一个字母o，虽当前引用一致，但易引发后续维护问题。
3. 层级背景冲突：同时给AppBarLayout和Toolbar设置背景色，可能导致样式覆盖。

修正步骤 #

1. 修改主题继承（themes.xml）

将主题父类替换为Material Components主题：

<resources>
    <style name="Theme.EchoPoint" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="buttonStyle">@style/GlobalButtonStyle</item>
        <item name="android:windowBackground">@color/black</item>
        <item name="android:textViewStyle">@style/CustomTextViewStyle</item>
        <item name="appBarLayoutStyle">@style/CustomAppBarStyle</item>
        <!-- 修正样式名拼写，匹配正确的Toolbar样式 -->
        <item name="toolbarStyle">@style/CustomToolbarStyle</item>
    </style>
</resources>

2. 修正Toolbar样式名称（styles.xml）

去掉样式名中多余的字母o：

<style name="CustomToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
    <item name="backgroundTint">#000080</item>
    <item name="titleTextColor">@color/white</item>
    <!-- 可选：添加副标题颜色配置（如果需要） -->
    <item name="subtitleTextColor">@color/white</item>
</style>

3. 优化AppBarLayout样式（可选）

若不需要给AppBarLayout单独设置背景，可移除其backgroundTint属性，避免层级冲突：

<style name="CustomAppBarStyle" parent="Widget.MaterialComponents.AppBarLayout.Primary">
    <!-- 仅保留需要的属性，删除backgroundTint -->
</style>

4. 确认Material库依赖

确保build.gradle中引入了最新版Material Components库：

implementation 'com.google.android.material:material:1.11.0' // 替换为当前最新版本

全局生效验证 #

只要所有Activity都应用Theme.EchoPoint主题，AppBar和Toolbar的自定义样式就会自动在所有页面生效，无需在每个布局中单独指定样式属性。

内容的提问来源于stack exchange，提问作者Roman.G