Android TabLayout style customization

In Android, TabLayout is a new element introduced in the Design Support library. It provides a horizontal layout to display tabs on the screen.

In this article, we will consider how you can customize the TabLayout for your design, without creating your own custom views.

So, let’s add a TabLayout with several tabs by the following code:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Favorite" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="All" />

</com.google.android.material.tabs.TabLayout>

By default, it looks like this:

Default style

The color of the indicator and the selected text tint is using from colorAccent from application theme.

Solid Tabs

Let’s say we want to make a selected tab with a solid fill without an indicator line, for this, we need to create a new selector with states: pressed and default. Create a new drawable file tabs_selector.xml and paste:

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

Put the line code in our layout file:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tabs_selector">

And get this:

Solid tabs

Oops, we forgot about text color, let’s fix it:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="@color/unselectedColor"
    app:tabBackground="@drawable/tabs_selector">

Result:

Rounded Tabs

And what about a tab with rounded corners like iOS? It’s pretty simple, take a look.

Create a new selector with a shape. Set corners radius for e.g.6dp :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/button" />
    <corners android:radius="6dp" />
</shape>

Our result:

Tabs with rounded corners

Try to take this one step, add padding for the tab. For this, we will slightly change our previous selector by adding layer-list with padding:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/button" />
            <corners android:radius="6dp" />
        </shape>

    </item>
</layer-list>

Now it looks like this:

TabItem with padding

And anything else, let’s rounded TabLayout corners for consistency. To do this, we again need another selector file.

Create a file tab_layout_bg.xmlwith the following code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/background_color" />
    <corners android:radius="6dp" />
</shape>

And put a new line in TabLayout declaration:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:tabBackground="@drawable/tabs_selector"
    app:tabIndicator="@null"
    android:background="@drawable/tab_layout_bg"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="@color/unselectedColor">

Result:

Our final result

Final result

Create Style

Finally, let’s move all our parameters to the android style file:

<style name="RoundedTabLayoutStyle" parent="Widget.Design.TabLayout">
    <item name="tabBackground">@drawable/tabs_selector</item>
    <item name="tabIndicator">@null</item>
    <item name="android:background">@drawable/tab_layout_bg</item>
    <item name="tabSelectedTextColor">@color/white</item>
    <item name="tabTextColor">@color/unselectedColor</item>
</style>

Cleanup code:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout2"
    style="@style/RoundedTabLayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">

Conclusion

This article described to you how you can customizing TabLayout and Tabs.

If you feel there is something important that I missed out on, let me know in the comment below. If you found the article helpful, please applause the article and follow me on Twitter at @Shadyrover