How to use selectors to change icons with the new TabLayout

Question

I'm using the new support TabLayout from Android. The thing is that I wanted to use selectors to change the icon when a tab is selected.

I've been looking into the source code and it seems to me that the it never changes the state of the view (and for that reason I can't use the selector).

Does anyone knows some workaround?

Thank you!

Answer 1

There is way to set customView as a tab with setCustomView(View view) method. So you can create a textview and set a selector to it and set this view to tab.

Hope it helps you!

Answer 2

This is what worked for me:

Assuming you have your selectors set in the drawable res folder (like Xingang Huang showed above). In your MainActivity (where you setup your TabLayout) you include your array of icon selectors and then you loop through it like this:

for (int i = 0; i < yourTabLayout.getTabCount(); i++) {
        ImageView imageView = new ImageView(this); //your context, in this case MainActivity.class
        imageView.setImageResource(arr_tabIcons[i]); //tabIcons is the array of icons
        if (i==0) {
            imageView.setSelected(true); 
        }
        yourTabLayout.getTabAt(i).setCustomView(imageView);

    }

tab.setIcon(R.drawable.icon)

works as well but in my case the icons looked really small, so I had to use the solution with the ImageView to fill the tab view.

Happy coding ;)

Answer 3

Assume your my_selector.xml is,

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_on" android:state_selected="true"/>
    <item android:drawable="@drawable/icon_off"/> <!-- default -->
</selector>

then you can call setIcon directly,

tab.setIcon(R.drawable.my_selector);

Verified with 'com.android.support:design:22.2.0'.

Answer 4

If you did everything right (and i believe this) so you arrived at same point than me. Maybe it is a little bug in new android appcompat library.

i found an workaround (it's called Gambiarra in a good Portugues) to solve this problem. you need to call the method select() from Tab class like this:

mTabLayout.getTabAt(x).select();

BUT it's very important: x variable must be different than current selected tab index.

Answer 5

I found that when I first set the custom view for each tab in the TabLayout I need to set the first one (index 0) as selected.

    TabLayout toolbarTabLayout = (TabLayout) findViewById(R.id.tabs);
    toolbarTabLayout.setupWithViewPager(mViewPager);
    toolbarTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    toolbarTabLayout.setTabMode(TabLayout.MODE_FIXED);
    toolbarTabLayout.setTabTextColors(R.color.colorPrimary, R.color.white);
    // Iterate over all tabs and set the custom view
    for (int i = 0; i < toolbarTabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = toolbarTabLayout.getTabAt(i);
        View v=mSectionsPagerAdapter.getTabView(i);
        // no tabs are actually selected at start, this will make sure the
        // selector for the colors comes in right when initialized
        if (i==0)
            v.setSelected(true);
        tab.setCustomView(v);
    }

This seems to force the first tab as selected when the custom view is applied. It really feels like a hack, hopefully someone else will figure out the real issue and propose a better fix.