Changing the background color of a Tab in TabLayout (Android design support library) doesn't occupy the entire tab space

android change tab background color programmatically
change tab indicator color android
tablayout library android
android tablayout add tab programmatically
android.support.design.widget.tablayout androidx
scrollable tabs'' android
change tab icon color when selected android
unselected tab indicator color android

I have a TabLayout (design support library) which is tied up to a ViewPager containing three tabs. I have designed a custom layout and set that to each tab in the TabLayout. I have been trying to change the background color of the currently selected tab. The color only wraps up around the text in the tab but doesn't occupy the entire tab space.

Below are the code snippets of my activity and the custom layout file.

Activity code

public class CustomTabLayoutActivity extends AppCompatActivity {

private TabLayout tabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_custom_tab_layout);
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
    setupViewPager(viewPager);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    setupTabLayout();
    viewPager.setCurrentItem(0);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            for (int i = 0; i < tabLayout.getTabCount(); i++) {
                if (i == position) {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#198C19"));
                } else {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#f4f4f4"));
                }
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}


private void setupViewPager(ViewPager viewPager) {
    CustomViewPagerAdapter pagerAdapter = new CustomViewPagerAdapter(getSupportFragmentManager());
    pagerAdapter.addFragments(new OneFragment(), "ONE");
    pagerAdapter.addFragments(new OneFragment(), "TWO");
    pagerAdapter.addFragments(new OneFragment(), "THREE");
    viewPager.setAdapter(pagerAdapter);
}

private void setupTabLayout() {

    TextView customTab1 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab2 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab3 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    customTab1.setText("ONE");
    tabLayout.getTabAt(0).setCustomView(customTab1);
    customTab2.setText("TWO");
    tabLayout.getTabAt(1).setCustomView(customTab2);
    customTab3.setText("THREE");
    tabLayout.getTabAt(2).setCustomView(customTab3);
}
}

Custom Layout file for each tab

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/tab"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_gravity="center"
   android:background="#ffffff"
   android:text="Test"
   android:textColor="@android:color/black"
   android:textSize="20sp" />

Here is the screenshot of the tabs after running the above code.

As you guys can see, the color only occupies the text in the tab but not the entire tab space. How to achieve this? Any ideas/suggestions would help me a lot. Thanks in advance.

Define a selector as a drawable, and also have a drawable for the selected/unselected states.

For this solution, I started with the code from this answer, and then added the functionality that changes the background color for the current Tab.

First, the selector, tab_background.xml in the drawable folder:

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

Then, tab_background_selected.xml in the drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#d13fdd1a" />
</shape>

Then, tab_background_unselected.xml in the drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#3F51B5" />
</shape>

Finally, in your styles.xml, specify the selector to use, and also specify the tab indicator style, since the app:tabIndicatorColor property in the TabLayout will now be ignored:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabBackground">@drawable/tab_background</item>
    <item name="tabIndicatorColor">#ff00ff</item>
    <item name="tabIndicatorHeight">2dp</item>
</style>

Result with the example colors above:

Additional Note:

Tested with the 23.3.0 versions of the support library components:

dependencies {
    compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.android.support:cardview-v7:23.3.0'
    compile 'com.android.support:recyclerview-v7:23.3.0'
    compile 'com.android.support:design:23.3.0'
    compile 'com.android.support:support-v4:23.3.0'
}

How do I change a tab background color when using TabLayout , How do I change the tab color on my Android? 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.

you should use:

app:tabBackground="@drawable/tab_selector"
android:background="@color/colorNormal"

tab_selector.xml (in Drawable Folder):

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

How to Change Selected Tab Background Color Android, How do I change the TabLayout font size on android? 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

Tabs with Ripple effect: In addition to Daniel Nugent's answer It would be beautiful to add a ripple effect to tabs. In order to achieve this, you must add these two drawables to drawable-v21 folder:

tab_background_selected.xml :

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#63D25B"> <!-- ripple color -->
    <item android:drawable="#d13fdd1a" /> <!-- normal color -->
</ripple>

tab_background_unselected.xml :

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#606FC7"> <!-- ripple color -->
    <item android:drawable="#3F51B5" /> <!-- normal color -->
</ripple>

How to change the background color of a tab and indicator in , You can have it in the xml. <android.support.design.widget.TabLayout android:id​="@+id/tabs" app:tabTextColor="@color/colorGray"  I was playing around with the new android.support.design.widget.TabLayout, and found a problem, in the class definition, there are no methods to change the indicator color, and default height. Doing some research, found that the default indicator color is taken from the AppTheme.

I know that its quite late to answer this question, but have a different & simple answer without creating any new background or selector. Tab-Layout have default padding of 12dp at its start & end. Just set

app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"

to fill color in your tab.

Android Material Design Tabs (Tab Layout) with Swipe, How to Change Selected Tab Background Color Android? Android TabLayout provides a horizontal layout to display tabs on the screen. Use app:tabBackground="@drawable/tab_background" in TabLayout. Add the following dependency to your app module's build. In the activity_main. Create tab_background. Add colors in the colors TabLayout provides a horizontal layout to display tabs. Population of the tabs to display is done through TabLayout.Tab instances. You create tabs via newTab(). From there you can change the tab's label or icon via setText(int) and setIcon(int) respectively.

Google Play Style Tabs using TabLayout, 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  After creating new project, open build.gradle of app level and add design support library because Tablayout is a part of Android Design Support Library: compile 'com.android.support:design:27.0.2

TabLayout, Tab layout are visible below toolbar with View pager, used to create swipeable views on. and add design support library because Tablayout is a part of Android Design Support Library: android:background="@color/colorPrimary" Now if you want to show big text on selected tab or change text color, then you can do  1. id: id attribute is used to uniquely identify a TabLayout. 2. support.design:tabBackground: This attribute is used to set the background of the tabs. We can set a color or drawable in the background of tabs. Below we set the Black color for the background of the tabs.

Android using tablayout with viewpager, Tabs are now best implemented by leveraging the ViewPager with a custom To implement Google Play style sliding tabs, make sure to follow the Design Support Library android:layout_weight="1" android:background="@android:color/white" Currently, the TabLayout class does not provide a clean abstraction model  TabLayout provides a horizontal layout to display tabs. The layout handles interactions for a group of tabs including: scrolling behavior, (swipe) gestures, tab selection, animations, and alignment.

Comments
  • WOW man !!! I have been trying to achieve this for the past 5 hours. You saved my day. That worked like a charm.
  • Can you please explain why we need to add few lines of code to styles.xml?
  • Glad it worked for you! The addition to styles.xml is just to link up the selector and drawables that set the background color.
  • It works fine when the tab mode is set to fixed, but when set to scrollable, the spacing between the tabs is lost. I have used "tab:padding" to add spacing between the tabs. Is that the right approach to do that?
  • Is there anyway to do this so that the selected tab is a different color depending tab position? For example, having first tab green when selected and having second tab red when selected? Edit: I think it can be done with OnTabSelectedListener() and using TabLayout.setBackgroundResource() for each tab in onTabSelected().
  • Thanks for this, but I am already getting the ripple effect with Daniel Nugent's answer. I am using version 28.0.0-alpha3 of the support libraries - maybe that's why?
  • @ban-geoengineering Thanks for your comment. I haven't seen ripple effect with Daniel's answer at the time I was writing this answer.