在 TabLayout 设计支持库中看不到 Tab Indicator答案

【问题标题】：Unable to see Tab Indicator in TabLayout design support library在 TabLayout 设计支持库中看不到 Tab Indicator
【发布时间】：2015-06-12 05:42:48
【问题描述】：

我正在使用材料设计库并使用 CoordinatorLayout 、AppBarLayout 、RecyclerView 和 TabLayout 创建布局。

我的问题是我无法在 Tablayout 中看到 Tab 指示器。下面是我在 AppCompactActivity 中使用的 xml 文件。

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/coodinate_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/btn_next_screen">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/list_recycle"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="30dp"
            android:background="@color/white"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"

            />

        <android.support.design.widget.AppBarLayout
            android:id="@+id/abar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_home"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"

                >


            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabBackground="@color/tab_bg"
                app:tabIndicatorColor="@color/tab_indicator"
                app:tabIndicatorHeight="5dp"
                app:tabMode="fixed"

                ></android.support.design.widget.TabLayout>


        </android.support.design.widget.AppBarLayout>


        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            app:layout_anchor="@+id/list_recycle"
            app:layout_anchorGravity="bottom|right"
            android:id="@+id/floatin_ab_home"
            app:fabSize="mini"
            android:src="@drawable/ic_content_add"

            />


    </android.support.design.widget.CoordinatorLayout>

下面是没有显示标签指示器的屏幕，所以任何人都可以知道我错过了什么。

【问题讨论】：

标签： android material-design android-support-design

【解决方案1】：

我认为这是设计支持库的错误。那当您同时应用两个属性时

app:tabBackground="@color/tab_bg"
app:tabIndicatorColor="@color/tab_indicator"

背景颜色 与 标签指示器重叠。这就是标签指示器不可见的原因。

如果您删除 tabBackground 颜色属性，那么您可以看到指示器。

[2015 年 6 月 25 日更新]

正如我所说这是设计支持库中的错误。我将它报告给 android bug 源。这是参考https://code.google.com/p/android/issues/detail?id=176540。

所以这个问题的状态是 FutureRelease 所以错误已修复。它会出现在未来的图书馆中。

[2015 年 7 月 20 日更新]

该错误已在 v 22.2.1 中修复并发布。您也可以在上面的链接中查看。

【讨论】：

好的，让我检查一下，您是否有任何其他方法可以同时更改工作背景颜色和选项卡指示器颜色。
目前还没有解决办法。但是您可以将自定义视图传递给选项卡。因此，对于每个选项卡，您都可以传递包含 textView 和 ImageView 的 LinearLayout。并且您可以将背景颜色设置为 LinearLayout。
仍然坚持在 v23.+ 中

【解决方案2】：

您可以使用以下方法

1 xml 中的更改 app:tabIndicatorColor="" 设置你的指示器颜色

2 创建服装主题

<style name="AppTheme.TabStyle" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/AppTheme.TextStyle</item>
        <item name="tabTextColor">@color/primaryDark</item>
        <item name="tabSelectedTextColor">@color/white</item>
        <item name="tabIndicatorColor">@color/primaryDark</item>
        <item name="tabIndicatorHeight">3dp</item>
        <item name="android:background">?attr/colorPrimary</item>
    </style>

    <style name="AppTheme.TextStyle" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">14sp</item>
        <item name="textAllCaps">true</item>
    </style>

在您的 Tablayout 中设置主题

【讨论】：

【解决方案3】：

您使用 RecyclerView 作为主要内容，使用包含 RecyclerView 的 ViewPager 并确保您提供 viewpage 属性app:layout_behavior="@string/appbar_scrolling_view_behavior"

【讨论】：

我已经尝试过您建议的 ViewPager 并且在第一个片段中它有 RecycleView 但我的 TabLayout 无法显示 Tab 指示器。
你打电话给tabLayout.setupWithViewPager(viewPager);了吗？
参考 Chris Banes github.com/chrisbanes/cheesesquare.git的这个示例项目
是的，我称之为但它隐藏了我的文本，所以我需要在FragmentPagerAdapter 中添加getPageTitle(int position)。但我无法自定义 TabLayout 的背景颜色。
在您给定的链接中，它使用 TabLayout 的默认颜色，而我正在寻找使用我提供的颜色更改背景和标签指示器。

【解决方案4】：

我刚刚以编程方式修复了这个错误集背景颜色

tabLayout.setBackgroundColor(getResources().getColor(R.color.primary));

或在xml中

android:background="@color/primary"

但是不知道你这样设置背景颜色有没有问题

【讨论】：

【解决方案5】：

给你.. :)

改变你的属性

app:tabBackground="@color/tab_bg"

到

android:background="@color/tab_bg"

你的最终代码..

 <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/tab_bg"
            app:tabIndicatorColor="@color/tab_indicator"
            app:tabIndicatorHeight="5dp"
            app:tabMode="fixed">
 </android.support.design.widget.TabLayout>

【讨论】：

【解决方案6】：

如果还有人遇到这个问题，那就是我现有应用程序的工作示例，尝试使用它并根据您的需要进行修改。

 <com.google.android.material.tabs.TabLayout
    android:id="@+id/homeScreenTab"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@color/design_default_color_primary_dark"
    app:tabIndicatorColor="@color/black"
    app:tabGravity="fill"
    app:tabIndicatorHeight="3dp"
    app:tabMaxWidth="0dp"
    app:tabMode="fixed"
    app:tabSelectedTextColor="@android:color/white" />

【讨论】：