Now you can Subscribe using RSS

Submit your Email

Sunday

How to change the background color of a tab and indicator in TabLayout in Android

Vishal Shrestha
Change 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. 

change-tab-background-color

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, 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!

Vishal Shrestha / Author & Founder

A developer by profession, a born Adventurer. I mainly do Android but like to get my hands dirty with web development and a little bit of Python. I would't rather go on a Trek than a party and you can find me having a few rounds with the heavy bag to let out the steam ;)

For Business info : My Portfolio Site.

0 comments:

Post a Comment

Coprights @ 2017 | The Code City by Vishal Shrestha Vishal Shrestha