Change text color in selected tab

Question

I have a problem with tabs in my app. When I select a tab, I want to change its icon and text color. When I change to another tab, the icon and text color need to change to the neutral color.

I tried to do this, but while the icon does change, the text color stays the same.

final TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.addTab(tabs.newTab().setIcon(R.mipmap.destacados_act).setText("Destacados"));
tabs.setSelectedTabIndicatorColor(Color.rgb(255,170,0));
tabs.addTab(tabs.newTab().setIcon(R.mipmap.secciones).setText("Secciones"));
tabs.addTab(tabs.newTab().setIcon(R.mipmap.descargas).setText("Descargas"));

final ViewPager view_pager = (ViewPager) findViewById(R.id.pager);
final ViewPagerAdapterPrincipal adapter = new ViewPagerAdapterPrincipal(getSupportFragmentManager(), tabs.getTabCount());
view_pager.setAdapter(adapter);
view_pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));

tabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        view_pager.setCurrentItem(tab.getPosition());

        switch (tab.getPosition()) {
            case 0:
                tab.setIcon(R.mipmap.destacados_act);
                tabs.setSelectedTabIndicatorColor(Color.rgb(255,170,0));
                break;
            case 1:
                tab.setIcon(R.mipmap.secciones_act);
                tabs.setSelectedTabIndicatorColor(Color.rgb(0,255,255));
                break;
            case 2:
                tab.setIcon(R.mipmap.descargas_act);
                tabs.setSelectedTabIndicatorColor(Color.rgb(170,255,0));
                break;
        }
    }
    public void onTabUnselected(TabLayout.Tab tab) {

        switch (tab.getPosition()) {
            case 0:
                tab.setIcon(R.mipmap.destacados);
                break;
            case 1:
                tab.setIcon(R.mipmap.secciones);
                break;
            case 2:
                tab.setIcon(R.mipmap.descargas);
                break;
        }
    }
    public void onTabReselected(TabLayout.Tab tab) {
    }
});

Here is my code for the adapter

public class ViewPagerAdapterPrincipal extends FragmentStatePagerAdapter {

    int numOfTabs;

    public ViewPagerAdapterPrincipal(FragmentManager fm, int numOfTabs) {

        super(fm);
        this.numOfTabs = numOfTabs;
    }

    public Fragment getItem(int position) {

        switch(position){
            case 0 :
                DestacadosPrincipal tab1 = new DestacadosPrincipal();
                return tab1;
            case 1 :
                Secciones tab2 = new Secciones();
                return tab2;
            case 2 :
                Descargas tab3 = new Descargas();
                return tab3;
            default:
                return null;
        }
    }

    public int getCount() {
        return numOfTabs;
    }
}

The problem comes in OnTabUnselected if I erase
tab.setIcon(); The text color is fine but obviously the icon doesn't change.

Answer 1

You can set a style to the TextView on your tabs using a selector

This assumes you've used a custom tab layout containing a TextView with style="@style/tabText".

values/styles.xml

<style name="tabText">
    <item name="android:textColor">@drawable/text_selector_tab</item>
    <item name="android:textSize">@dimen/fontTab</item>
    <item name="android:textAllCaps">true</item>
</style>

then set the textColor using a selector:

drawable/text_selector_tab.xml

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

then set your color attributes for selected and unselected states (i.e. shown here as colorSelected and colorDeselected.

You can customize your tabs with a custom layout:

layoutTab = (LinearLayout)inflater.inflate(R.layout.layout_tab, null);
TabLayout.Tab tab = mTabLayout.newTab();
tab.setCustomView(layoutTab);
mTabLayout.addTab(tabHome);

layout/layout_tab.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clipToPadding="false">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/tabText" />

 </LinearLayout>

this is how the TextView in the tab gets tied to the style. You can dig into the standard tab layout XML in the platform SDK to see how the icon and text work and adjust this layout accordingly.