Android TabLayout With Text and Icons Change color of both text and Icon on selected tab

Question

In my app implementing tablayout with each tab having both icons and text. When tab is selected then icon and text should be selected of same tab and un-selected tab with different color text and icons.

below is my code to implement tabs layout but not able to change text color and icons color on tab selection.

private void setupTabIcons() {

    TextView tabOne = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabOne.setText("Home");
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_home, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tabOne);

    TextView tabTwo = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabTwo.setText("Search");
    tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_search, 0, 0);
    tabLayout.getTabAt(1).setCustomView(tabTwo);

    TextView tabThree = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabThree.setText("WishList");
    tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_wishlist, 0, 0);
    tabLayout.getTabAt(2).setCustomView(tabThree);

    TextView tabFour = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabFour.setText("Cart");
    tabFour.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_cart, 0, 0);
    tabLayout.getTabAt(3).setCustomView(tabFour);

    TextView tabFive = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabFive.setText("Account");
    tabFive.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_accounts, 0, 0);
    tabLayout.getTabAt(4).setCustomView(tabFive);

}

Please help how to change text color and icon when tab is selected.

TIA

Saurabh Padwekar · Answer 1 · 2017-01-21T19:28:37.770

Toggle tab text color In your xml add the linesapp:tabTextColor and app:tabSelectedTextColor to the TabLayout .

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            app:tabTextColor="#000000"
            app:tabSelectedTextColor="#FFFFFF"
            android:layout_height="wrap_content"/>

Toggle tab icon In your fargment/activity add selector drawable to each tab.

        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        //Set selector drawable to each tab
        tabLayout.addTab(tabLayout.newTab().setText("Warm Up").setIcon(ResourcesCompat.getDrawable(getResources(), R.drawable.selector_warmup_icon,null)));
        tabLayout.addTab(tabLayout.newTab().setText("Exercise").setIcon(ResourcesCompat.getDrawable(getResources(), R.drawable.selector_exercise_icon, null)));
        tabLayout.addTab(tabLayout.newTab().setText("Rest").setIcon(ResourcesCompat.getDrawable(getResources(), R.drawable.selector_rest_icon, null)));
        tabLayout.addTab(tabLayout.newTab().setText("Success").setIcon(ResourcesCompat.getDrawable(getResources(), R.drawable.selector_success_icon, null)));

selector_warmup_icon.xml (should be like)

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_human_white_48dp" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_human_grey600_24dp" android:state_selected="false"/>

</selector>

Nothing is display on tablayout. after applying above code tab bar is blank no icon no text. — Ravi Bhandari, Jan 21 '17 at 17:58
Use .setText("Tab name") to give the tab name.Check the updated code now the text will appear as far as icons are concerned check the selector file properly — Saurabh Padwekar, Jan 21 '17 at 19:29
This doesn't work properly for kit kat as All tabs have same color and that's the color for the unselected tab — John, Aug 05 '17 at 21:00
this might be useful for you https://stackoverflow.com/a/61884583/8889086 @John — Radhika bajaj, May 19 '20 at 06:31

score 0 · Answer 2 · answered Jan 21 '17 at 15:34

0

You can do that by adding a TabLayout.OnTabSelectedListener and it has three methods onTabSelected(), onTabUnselected() and onTabReselected(), which you can use to change the color of both icon and text. Here's the link you can refer to it.

answered Jan 21 '17 at 15:34

Parth Pandya

59
4

score 0 · Answer 3 · answered Jan 21 '17 at 16:12

0

You can use a Color State List resource for the text color as well as for the tint of the icons. I think android:state_selected should work.

answered Jan 21 '17 at 16:12

Karakuri

38,365
12
84
104

Android TabLayout With Text and Icons Change color of both text and Icon on selected tab

3 Answers3