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?

@Doraemon this article has awful code paddings and contains no information about `TabLayout`, sorry. — IliaEremin, Jun 10 '15 at 11:18
@jlopez Not duplicated, he is asking about `TabLayout`, not about actionBar tabs — Guilherme Torres Castro, Jan 07 '16 at 17:30

score 199 · Accepted Answer · edited Apr 29 '16 at 09:34

199

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"
    .... />

edited Apr 29 '16 at 09:34

Indrek Kõue

6,449
8
37
69

answered Jul 16 '15 at 21:51

Akshay

6,029
7
40
59

1

Where is something called selected tab background? – Triet Doan Aug 18 '15 at 03:54
@Forte_201092 in `TabLayout` selected tab is indicated with `tabIndicatorColor` – Akshay Aug 18 '15 at 06:11
So, in `TabLayout`, we cannot change the selected tab background? – Triet Doan Aug 18 '15 at 06:39
1

@AnhTriet you have to define `drawable-selector` with two states: pressed and unpressed (or checked/unchecked I don't remember, you got the idea). And then set this selector to tabBackground. So you can control selected tab bg. – IliaEremin Jan 09 '16 at 06:58
how to put a divider between two tabs? – Mithun Sarker Shuvro Aug 07 '16 at 05:24
@shuvro try this one http://stackoverflow.com/questions/36548875/how-to-add-margin-between-tabs-in-tablayout – Akshay Aug 08 '16 at 08:19
Is there a way to set the tab background selector (to control the effect of pressing it, for example) via code, instead of XML ? – android developer Jul 17 '17 at 11:09

score 18 · Answer 2 · answered Sep 03 '15 at 11:48

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"/>

score 8 · Answer 3 · edited May 23 '17 at 11:54

8

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.

edited May 23 '17 at 11:54

Community

1
1

answered Jun 10 '15 at 11:44

IliaEremin

3,338
3
26
35

This solution has one bug - indicator overlaps tab text – IliaEremin Jul 03 '16 at 20:36

score -19 · Answer 4 · answered Aug 10 '15 at 09:04

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

Why "problem is solved"? From this, how can we set the selected tab background? — Triet Doan, Aug 18 '15 at 03:53

TabLayout tab style

4 Answers4

Linked

Related