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!

Sharing is caring!