How do I change a tab background color when using TabLayout?

Question

This is my code in the main activity

public class FilterActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_filter);

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    PageAdapter pageAdapter = new PageAdapter(getSupportFragmentManager(), FilterActivity.this);
    viewPager.setAdapter(pageAdapter);

    // Give the TabLayout the ViewPager
    final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);



  }
}

And this is my code in the XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar">
    </include>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="fill_parent"
        style="@style/MyCustomTabLayout"
        android:layout_height="48dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

I want to change the background color of one tab when it's selected

score 336 · Accepted Answer · edited Mar 22 '17 at 10:36

336

What finally worked for me is similar to what @如果我是DJ suggested, but the tabBackground should be in the layout file and not inside the style, so it looks like:

res/layout/somefile.xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

and the selector res/drawable/tab_color_selector.xml:

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

edited Mar 22 '17 at 10:36

Kapil Rajput

11,429
9
50
65

answered Oct 20 '15 at 07:16

Tako

3,364
2
14
21

2

You can also add a color value to that attribute : ie : app:tabBackground:@color/colorAccent – Val Martinez Jun 27 '16 at 21:45
Thank you for the solution. However, I lost default ripple effect with it. – Ken Ratanachai S. Jul 13 '16 at 23:58
4

How can I do this programatically? – TSR Mar 01 '17 at 14:54
1

@TSR, if you don't need different colors for each tab, you can do `tabLayout.setBackgroundColor(colorInt)`. If you need it for each tab, you can extract the children from your TabLayout – karl Aug 11 '17 at 15:04
1

to improve look and feel, I think we should also add **state_pressed**: **** – Phong Nguyen Apr 08 '19 at 05:03
How to change textColor as well? Can we achieve with same logic? – Rohit Singh Jul 27 '19 at 06:11
How do I set different tab background for specific tabs? – aLL Feb 24 '21 at 01:27

如果我是DJ · Answer 2 · 2015-09-18T02:29:52.160

21

You can try this:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabBackground">@drawable/background</item>
</style>

In your background xml file:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/white" />
    <item android:drawable="@color/black" />
</selector>

edited Sep 18 '15 at 02:29

answered Sep 17 '15 at 07:42

如果我是DJ

219
1
5

and how to implement this? – TSR Mar 01 '17 at 12:12
Add property android:style to your TabLayout in XML. – amtrax Dec 27 '20 at 12:44

score 15 · Answer 3 · edited May 29 '16 at 17:23

Add atribute in xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

And create in drawable folder, tab_color_selector.xml

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

score 13 · Answer 4 · answered Aug 12 '20 at 11:01

One of the ways I could find is using the tab indicator like this:

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@color/normal_unselected_color"
    app:tabIndicatorColor="@color/selected_color"
    app:tabIndicatorGravity="center"
    app:tabIndicatorHeight="150dp"
    app:tabSelectedTextColor="@color/selected_text_color"
    app:tabTextColor="@color/unselected_text_color">

    ..... tab items here .....

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

Trick is to:

Make the tab indicator to align in center
Make the indicator height sufficiently large so that it covers the whole tab

This also takes care of the smooth animation while switching tabs

score 7 · Answer 5 · answered Jan 13 '18 at 18:57

You can have it in the xml.

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabTextColor="@color/colorGray"
        app:tabSelectedTextColor="@color/colorWhite"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

score 6 · Answer 6 · answered Dec 02 '19 at 19:58

After some messing around this is how I got the desired look (at least in the emulator) and it keeps the ripple effect.

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_selector"
    app:tabIconTint="@drawable/tab_selector"
    app:tabIconTintMode="src_atop"
    app:tabTextColor="@drawable/tab_selector" />

And the @drawable/tab_selector:

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

FYI: This is what the emulator showed before I added the color argument to @drawable/tab_selector:

score 5 · Answer 7 · answered Jul 27 '15 at 04:23

5

Have you tried checking the API?

You will need to create a listener for the OnTabSelectedListener event, then when a user selects any tab you should check if it is the correct one, then change the background color using tabLayout.setBackgroundColor(int color), or if it is not the correct tab make sure you change back to the normal color again with the same method.

answered Jul 27 '15 at 04:23

sorifiend

5,927
1
28
45

Yes, I've tried that, but tabLayout changes the full tab widget color, and I can't find a method on tabLayout.Tab that only changes the tab color and the other tabs stay with the same color. – Joel Lara Jul 27 '15 at 11:12
I am not 100% sure what you are after. If you only want to color the body of one tab then you can add a container/view inside that tab, then you should be able to set the container/view background color in the XML like normal, for example the following will set the background to red `android:background=FF0000` – sorifiend Jul 27 '15 at 11:44
These other questions/answers may help you: http://stackoverflow.com/questions/30904138/how-to-change-the-new-tablayout-indicator-color-and-height and http://stackoverflow.com/a/30755351/1270000 – sorifiend Jul 28 '15 at 22:56

score 2 · Answer 8 · answered Dec 14 '18 at 11:57

As I found best and suitable option for me and it will work with animation too.

You can use indicator it self as a background.

You can set app:tabIndicatorGravity="stretch" attribute to use as background.

Example:

   <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorGravity="stretch"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/colorAccent">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chef" />


        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User" />

    </android.support.design.widget.TabLayout>

Hope it will helps you.

This is taking the accent color automatically. How to give it different color without changing the accent color. thanks — MindRoasterMir, Apr 09 '19 at 13:16

score 2 · Answer 9 · answered Oct 19 '20 at 08:58

Since ViewPager is tending to be replaced by ViewPager2 and we will need to migrate to it.

A quick work around using Java would be something like this:

    final List<String> colors = new ArrayList<String>(){
        {
            add("#FF0000");
            add("#800000");
            add("#FFFF00");
        }
    };

    
    ViewPager2 viewPager = findViewById(R.id.viewPager);
    ViewPagerAdapter adapter = new ViewPagerAdapter(your_data_structure);
    viewPager.setAdapter(adapter);

    final TabLayout tabs = findViewById(R.id.tabs);

    tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.view.setAlpha((float) 0.5);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.view.setAlpha(1);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

    TabLayoutMediator mediator = new TabLayoutMediator(tabs, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
        @Override
        public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
            tab.setText("Tab" + position);
            
            /* 
            *  With this feature the TabIndicator color is ignored 
            *  or covered by the new color ex.(if alpha channel is changed the indicator can be seen through)
            */
            tab.view.setBackgroundColor(Color.parseColor(colors.get(position))); //You can use your HEX string color
        }
    });

    mediator.attach();

score 1 · Answer 10 · answered Mar 27 '18 at 13:18

You can change the background or ripple color of each Tab like this:

    //set ripple color for each tab
    for(int n = 0; n < mTabLayout.getTabCount(); n++){

        View tab = ((ViewGroup)mTabLayout.getChildAt(0)).getChildAt(n);

        if(tab != null && tab.getBackground() instanceof RippleDrawable){
            RippleDrawable rippleDrawable = (RippleDrawable)tab.getBackground();
            if (rippleDrawable != null) {
                rippleDrawable.setColor(ColorStateList.valueOf(rippleColor));
            }
        }
    }

score 0 · Answer 11 · answered Dec 24 '18 at 18:11

You can change the background color of the tab by this attribute

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
'android:background="@color/primary_color"/>'

score 0 · Answer 12 · answered Sep 23 '21 at 09:58

You can simply use tab.view.setBackground(drawable) in tabLayout.addOnTabSelectedListener as given below:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.view.setBackground(getResources().getDrawable(R.drawable.ic_rectangle_1345));
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.view.setBackgroundColor(Color.TRANSPARENT);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

score -3 · Answer 13 · answered Jun 20 '18 at 08:03

-3

One of simplest solution is to change colorPrimary from colors.xml file.

answered Jun 20 '18 at 08:03

Ahmad Sadiq

153
1
1
8

How do I change a tab background color when using TabLayout?

13 Answers13

Linked

Related