CODEWITHSUNDEEP
androidandroid-tablayout
Ravi Bhandari
Ravi Bhandari

Reputation: 4698

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

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

Upvotes: 0

Views: 2070

Answers (3)

Saurabh Padwekar
Saurabh Padwekar

Reputation: 4074

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>

Upvotes: 1

Karakuri
Karakuri

Reputation: 38595

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.

Upvotes: 0

Parth Pandya
Parth Pandya

Reputation: 69

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.

Upvotes: 0

Related Questions