如何更改 Material3 中的 TabLayout 文本颜色答案

【问题标题】：How can I change the TabLyout Text Color in Material3如何更改 Material3 中的 TabLayout 文本颜色
【发布时间】：2022-10-15 21:38:44
【问题描述】：

在 Material3 TabLayout 文本颜色没有改变。 TabLayout 背景颜色通过使用表面颜色而改变，但文本颜色不会随着 ColorOnSurface 改变！自定义 TabStyle 在 Material3 中也不起作用。这是我的自定义 TabStyle。

<style name="customTabLayout" parent="Widget.Material3.TabLayout">
    <item name="tabIndicatorColor">@color/white</item>
    <item name="tabIndicatorHeight">2.5dp</item>
    <item name="tabPaddingStart">6dp</item>
    <item name="tabPaddingEnd">6dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabSelectedTextColor">#ffffff</item>
    <item name="colorPrimary">@color/white</item>
    <item name="colorSurface">@color/colorPrimary</item>
    <item name="colorOnSurface">@color/white</item>
</style>

【问题讨论】：

你试过“tabTextColor”吗？
@TheLibrarian 是的 tabTextColor 在 Material2 上工作正常，但在 Material3 上不工作
还有 tabTextAppearance 可以在技术上覆盖它。
不工作我认为surfaceColor 覆盖了TabLayout 背景颜色，但我不知道Tablayout 文本颜色！

标签： android android-theme material-components-android material3

【解决方案1】：

中的默认文本颜色M3TabLayout 基于（参见all states）：

colorOnSurfaceVariant：未选中的
colorPrimary: 选择

您可以使用materialThemeOverlay样式中的属性：

<style name="Widget.App.TabLayout" parent="Widget.Material3.TabLayout">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.TabLayout</item>
</style>

<style name="ThemeOverlay.App.TabLayout" parent="">
    <item name="colorPrimary">@color/red500_dark</item>
    <item name="colorOnSurfaceVariant">@color/blu500_dark</item>
</style>

并在您的布局中：

<com.google.android.material.tabs.TabLayout
    style="@style/Widget.App.TabLayout"

您可以在布局中使用相同的方法：

<com.google.android.material.tabs.TabLayout
    android:theme="@style/ThemeOverlay.App.TabLayout"

在任何情况下，标签项文本颜色由tabTextColor 属性定义，您可以使用以下方法完全覆盖默认选择器：

<style name="Widget.App.TabLayout" parent="Widget.Material3.TabLayout">
    <item name="tabTextColor">@color/selector_teal_700</item>
</style>

在你的布局中使用像 this 这样的选择器：

<com.google.android.material.tabs.TabLayout
    style="@style/Widget.App.TabLayout"

【讨论】：