MaterialComponents 主题中断 TabLayout答案

【问题标题】：MaterialComponents theme breaks TabLayoutMaterialComponents 主题中断 TabLayout
【发布时间】：2020-02-09 23:42:51
【问题描述】：

我正在将我的应用程序迁移到 MaterialComponents 主题。我有一个带有滚动行为的协调器布局内的 TabLayout 的活动，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">

        <com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|enterAlways|snap" />

        <com.google.android.material.tabs.TabLayout
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.MaterialComponents.Light"
            app:tabMode="fixed"
            app:elevation="0dp" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

AppCompat 主题运行良好。我有 3 个选项卡，并且 3 个选项卡标题在 TabLayout 中正确显示。

现在我有三个问题：

TabLayout 的文本是黑色的，好像 android:theme 被忽略了
不再有选定的选项卡指示器（它是我强调色的条形）
我的 3 个标签中只显示了 2 个
- 在启动时，它们右对齐
- 如果我滚动视图分页器以显示中间页面，我仍然只在 TabLayout 中显示 2 个选项卡，但现在一个左对齐，另一个右对齐
- 如果我再次滚动显示第三个选项卡，仍然只有 2 个选项卡，标题是 TabLayout，现在两个都左对齐

这是怎么回事？

编辑：我更好地理解了这个问题：似乎它“只是”一个颜色问题。选中的标签标题颜色和背景一样，所以看不到。

【问题讨论】：

标签： android android-tablayout material-components

【解决方案1】：

好的，我找到了答案：主要问题是我使用的是 android:theme 而不是 style 来应用 TabLayout 样式。

现在我正在这样做：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/AppTheme.TabLayout"/>

这里是 AppTheme.TabLayout：

<style name="AppTheme.TabLayout" parent="Widget.MaterialComponents.TabLayout.Colored">
    <item name="tabIndicatorColor">@color/colorOnPrimary</item>
</style>

按照here 的规定，我不必创建自己的样式来覆盖tabIndicatorColor，因为它应该已经采用了我在colors.xml 中定义的colorOnPrimary。好像有bug

【讨论】：