更改所选选项卡的颜色

时间:2018-01-01 10:28:00

标签: android android-tablayout

我正在使用tabLayout在我的应用中使用标签。我想改变背景颜色和所选标签的文字颜色。我正在通过这样做改变整个tabLayout的背景颜色

 android:background="@color/colorAccent"

并更改textcolor和selectedtextcolor

app:tabTextColor="#000000"
app:tabSelectedTextColor="@color/colorAccent"

但我现在要做的就是在选择特定标签时更改背景颜色?怎么做 ? 在此先感谢:)

2 个答案:

答案 0 :(得分:3)

你可以在标签布局小部件中这样做

<android.support.design.widget.TabLayout

    app:tabBackground="@drawable/selector"

    />

并在drawable文件夹中定义您的selector.xml

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

答案 1 :(得分:1)

  

在TabLayout中更改选项卡的背景颜色非常简单   使用Android提供的设计支持库。你可以简单   使用。更改整个TabLayout的背景   app:tabBackground属性,您可以更改选项卡指示器颜色   使用app:tabIndicatorColor属性,但有更好的方法,如果   你想要更多的功能。更改选项卡布局的更好方法   颜色是使用选择器,使用选择器,你可以有不同   选项卡的不同状态的背景,即选中,未选择等。

请按照以下步骤操作:

<强> 1。创建一个可绘制的tab_selected_background,它将用作所选标签的背景

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorPrimary" />
    <corners android:radius="4dp" />
</shape>

<强> 2。创建一个选择器tab_selector,用作选项卡布局的背景:

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

第3。现在最后创建选项卡布局并使用我们刚刚创建的选择器作为tabLayout的背景。

  <android.support.design.widget.TabLayout
        android:id="@+id/subChordTabs"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:tabGravity="center"
        app:tabMode="scrollable"
        app:tabBackground="@drawable/tab_selector"
        app:tabIndicatorColor="@color/tabIndicator"
        android:padding="8dp"
        app:tabIndicatorHeight="2dp"/>

你得到的结果如下,

enter image description here