How to Change the Background Color in TabLayout

Changing the background color of tab in TabLayout is fairly simple using the design support library that Android provides. You can simply change the background of the whole TabLayout using the app:tabBackground property and you can change the tab indicator color using the app:tabIndicatorColor property, but there are better ways if you want more functionality.
A better way to change the tabLayout color is using selectors, using selectors you can have different background for different sates of tab i.e selected, unselected etc.
Here’s an example :
Note : We are going to use selectors, if you wanna know more about selectors please refer to this post: Selectors in Android. 

How to change tab color in TabLayout : 

  1. Create a drawable, tab_selected_background, that will be use as the background for the selected tab:
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        >
        <solid android:color="@color/tab_background_selected" />
        <corners android:radius="4dp"/>
    </shape>
  2. Create a selector, tab_selector that will be used as the background for tab layout:
    <?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. Now finally create the tab layout and use the selector that we’ve just create as the background of the 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"/>

We’ve seen that we can easily modify the tabLayout look using selectors, If you want to learn how to create nested TabLayout, you can check that out here: Nested TabLayout.
We can create a more customized tabLayout using custom style, but we’ll do that in another post. If you have any question feel free to connect with me on any of my given social network or just comment below! Happy Coding. Cheers!

Don’t miss these tips!

We don’t spam! Read our privacy policy for more info.

You’ve been successfully subscribed to our newsletter! See you on the other side!

Sharing is caring!

5 thoughts on “How to Change the Background Color in TabLayout”

  1. Everyone wants to make their photos the most beautiful. Somebody wants to auto cut his image. Someone wants to change background of their photo or cut out image.
    MasterLogix team make the best tool for change background & background removerchange background in android app.#changebackground #backgroundremove #backgroundtransparent
    Remove Image Background Make Transparent Image best app for background eraser and change background to make your photo more stylish and attractive with this cut out image

Leave a Comment

Your email address will not be published.

Exit mobile version