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!

Cremona

how u resolved ur issue because mine is not getting resolved from customView – Ariel

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!

Urion

Answer 2

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'.

Noma

This works great but I've encountered a quirk. The first tab doesn't get selected. Is it only me? I've tried manually setting the pager to 0 (pager.setCurrentItem(0);) – Danuloff

@kgandroid, were you looking at android.support.design.widget.TabLayout.Tab? It has the method. – Noma

Answer 3

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.

Doubtless

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.

Punctuation

Answer 5

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 ;)

Negativism