如何在 TabLayout 更改所选选项卡的标题颜色?

How to change a color of the title of the selected tab at TabLayout?

我想在TabLayout的图标后面的这块区域换一种颜色,只有一行图标。我还需要更改标题下的这条粉红色线,但我在样式中找不到合适的参数。我的风格:

  <style name="AppTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="tabPaddingStart">6dp</item>
    <item name="tabPaddingEnd">6dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/darkPurple</item>
  </style>

  <!-- for text -->
  <style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@color/orange</item>
    <item name="textAllCaps">false</item>
  </style>

对于选项卡背景色,创建一个 selector 并放置该选择器的资源 ID,例如:

<item name="tabBackground">@drawable/selector_name</item>

对于粉色下划线,更改

中的颜色

<item name="tabIndicatorColor">@color/your_new_color</item>

尝试在 属性 选项卡布局

之后使用
app:tabIndicatorColor="@color/colorBlack"// it set Selected tab underline color
app:tabSelectedTextColor="@color/colorPrimary"// it set Selected tab  text color
app:tabTextColor="@color/colorAccent"// it set tab text color

在xml中添加属性:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

并在drawable文件夹中创建,tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

试试这个

  • 在您的 drawable folder
  • 中创建 bg_color

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/timecard"
    android:color="@color/colorText" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/timecard_selected"
    android:color="@color/colorSkyBlue"/>

<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/timecard"
    android:color="@color/colorText"/>
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/timecard_selected"
    android:color="@color/colorSkyBlue"/>

<!-- Pressed -->
<item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/timecard"
    android:color="@color/colorText"/>
<item android:state_pressed="true" android:drawable="@drawable/timecard_selected"
    android:color="@color/colorSkyBlue" />

  • 然后将其添加到您的 layout 中,像这样

 <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="0dp"
            android:tabStripEnabled="false"
            app:tabIndicatorHeight="0dp"
            android:fitsSystemWindows="true"
            app:tabContentStart="0dp"
            app:tabBackground="@drawable/bg_color"
            app:tabPaddingStart="0dp"
            android:paddingLeft="0dp"
            app:tabPaddingEnd="0dp"
            app:paddingEnd="0dp"
            android:layout_gravity="center_vertical"
            app:tabIndicatorColor="@color/colorSkyBlue"
            android:paddingRight="0dp"
            app:tabSelectedTextColor="@color/colorSkyBlue" />