Android Material3 TopAppBar自定义颜色主题及滚动效果保留问题

目标 #

创建一个与全局主题颜色不同的自定义主题ActionBar，同时保留内容滚动时的elevation着色效果。

最小可复现示例 #

（颜色与主题提取自Material Theme Builder）

• 在Android Studio Electric Eel 2022.1.1 Patch 2中创建Basic Activity (Material3)项目，命名为App
• 在values -> colors.xml中添加完整的Material3颜色集
• 在values -> themes -> themes.xml中应用对应主题
• 在API33级别的Pixel 4a模拟器运行，观察到TopAppBar默认白色，滚动时变为淡蓝色

当前问题 #

希望将TopAppBar（滚动时变蓝的完整区域）颜色改为colorPrimary，同时保留滚动时的深色效果。根据Material文档，TopAppBar使用onSurface颜色，滚动时提升至3dp elevation。尝试在values -> themes-v29 -> themes.xml中通过自定义toolbarStyle修改colorSurface为?attr/colorPrimary，但无任何变化。

针对Material3的TopAppBar，可通过以下几种方式实现需求：

方法1：直接在布局中设置背景色 #

找到布局文件（通常是activity_main.xml）里的MaterialToolbar，直接指定backgroundColor为?attr/colorPrimary：

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/topAppBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:title="@string/app_name"
    app:menu="@menu/top_app_bar" />

这种方式简单直接，滚动时的elevation阴影效果会自动保留——Material3的TopAppBar会根据滚动状态自动处理elevation对应的着色逻辑。

方法2：通过自定义样式全局复用 #

如果需要多个页面复用该样式，可先定义自定义TopAppBar样式，再应用到组件或全局主题：

1. 在values/styles.xml（或直接在themes.xml）中添加样式：

<style name="CustomTopAppBar" parent="Widget.Material3.TopAppBar.Small">
    <item name="backgroundColor">?attr/colorPrimary</item>
</style>

2. 单组件应用：

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/topAppBar"
    style="@style/CustomTopAppBar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:title="@string/app_name"
    app:menu="@menu/top_app_bar" />

3. 全局主题替换（所有TopAppBar生效）：

<style name="Theme.App" parent="Theme.Material3.DayNight.NoActionBar">
    <!-- 其他主题属性 -->
    <item name="topAppBarStyle">@style/CustomTopAppBar</item>
</style>

方法3：优化滚动时的elevation着色（可选） #

如果滚动时的阴影效果不符合预期，可手动开启elevation叠加并指定颜色，确保阴影基于primary色生成：

<style name="CustomTopAppBar" parent="Widget.Material3.TopAppBar.Small">
    <item name="backgroundColor">?attr/colorPrimary</item>
    <item name="elevationOverlayEnabled">true</item>
    <item name="elevationOverlayColor">?attr/colorPrimary</item>
</style>

注：Material3默认已根据背景色处理elevation着色，一般无需额外设置。

为什么之前的方法无效？ #

你之前修改toolbarStyle的colorSurface没用，原因有两点：

1. Material3的MaterialToolbar用backgroundColor控制背景，而非colorSurface；
2. toolbarStyle是AppCompat旧版属性，Material3中对应的全局属性是topAppBarStyle。

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