TabLayout tab style

Question

I use new TabLayout from com.android.support:design library. I want to change background of the selected/unselected tabs. I look at sources and found only tabBackground attribute that change all tabs colour and does not control selected tab colour.

How can I control selected/unselected tab background?

Answer 1

Define:

    <style name="AppTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabMaxWidth">@dimen/tab_max_width</item>
        <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/range</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>

Apply:

<android.support.design.widget.TabLayout
    style="@style/AppTabLayout"
    app:tabTextAppearance="@style/AppTabTextAppearance"
    android:layout_width="match_parent"
    .... />

Answer 2

I read How to Style ActionBar, tab background on selected tab and figure out what to do. It is really similar problem, but I found awesome solution specially for TabLayout:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@color/tab_layout_color"
    app:tabIndicatorHeight="48dp"
    app:tabIndicatorColor="@color/selected_tab_color"
    />

note that layout_height and tabIndicatorHeight have the same height. So you get pretty transition animation with this way.

Answer 3

I met this problem too. I just searched tabIndicatorColor in the whole project and found the following code in some R.java:

       @see #TabLayout_tabBackground
       @see #TabLayout_tabContentStart
       @see #TabLayout_tabGravity
       @see #TabLayout_tabIndicatorColor
       @see #TabLayout_tabIndicatorHeight
       @see #TabLayout_tabMaxWidth
       @see #TabLayout_tabMinWidth
       @see #TabLayout_tabMode
       @see #TabLayout_tabPadding
       @see #TabLayout_tabPaddingBottom
       @see #TabLayout_tabPaddingEnd
       @see #TabLayout_tabPaddingStart
       @see #TabLayout_tabPaddingTop
       @see #TabLayout_tabSelectedTextColor
       @see #TabLayout_tabTextAppearance
       @see #TabLayout_tabTextColor

So the problem is solved. May this will be some help for you.
i.e. I use IDEA

Answer 4

If you look into the TabLayout.class you will notice inner TabView.class for tab's actual layout. It's same layout as any other with isSelected attribute. Selecting tab will also have impact on this so all you need to do is to create selector background drawable like

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/tab_bg_selected"/>
<item android:drawable="@color/tab_bg_unselected"/></selector>

and attach it to the tabBackground attribute e.g. in XML like

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@drawable/tab_bg"
            app:tabIndicatorHeight="4dp"/>