TabLayout | TabIndicator未选择的颜色

Question

我正在使用TabLayout

我需要在未选中时设置TabIndicator的颜色。

这就是我需要做的事情 -

这就是我所做的 -

Answer 1

请使用app:tabTextColor。

• 当取消选中时，会显示app:tabTextColor

• 选择时，会显示app:tabSelectedTextColor

使用以下代码：

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    app:tabGravity="fill"
    app:tabMode="fixed"
    android:background="@color/colorPrimary"
    app:tabIndicatorColor="@color/white"
    app:tabIndicatorHeight="4dp"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="#AAAAAA"
    app:tabTextAppearance="@style/NavigationTabTextAppeareance"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    >

粗体 Tabtext

styles.xml：

 <style name="NavigationTabTextAppeareance" parent="TextAppearance.Design.Tab">
    <item name="android:textStyle">bold</item>
</style>

对于未选中标签底部颜色：

参考：TabLayout color of unselected tab underline

Answer 2

如果未选中标签，可以使用tabtextColor设置默认颜色

在drawable underlinedrawable.xml中创建xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- UNSELECTED TAB STATE -->
<item android:state_selected="false" android:state_pressed="false">
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Bottom indicator color for the UNSELECTED tab state -->
        <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
            <shape android:shape="rectangle">
                <stroke android:color="#65acee" android:width="2dp"/>
            </shape>
        </item>
    </layer-list>
</item>
</selector>

要更改tabtextColor下划线，请在main xml中添加underlinedrawable

<android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabTextColor="@color/unselected_color"
            app:tabSelectedTextColor="@color/selected_color"
            app:tabBackground="@drawable/underlinedrawable" />