Modifier la couleur du texte dans l'onglet sélectionné

Question

J'ai un problème avec les onglets de mon application. Lorsque je sélectionne un onglet, je veux changer l'icône et la couleur du texte. Lorsque je passe à un autre onglet, l'icône et la couleur du texte doivent passer à la couleur neutre.

J'ai essayé de le faire, mais tant que l'icône change, la couleur du texte reste la même.

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

Voici mon code pour l'adaptateur

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

Le problème vient OnTabUnselected si j'effacer
tab.setIcon(); La couleur du texte est bien, mais de toute évidence l'icône ne change pas.

Answer 1

Vous pouvez définir un style à la TextView sur vos onglets à l'aide d'un sélecteur

Cela suppose que vous avez utilisé une mise en page d'onglet personnalisé contenant un TextView avec style = « style @/tabText ».

valeurs/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> 

puis définissez le textColor à l'aide d'un sélecteur:

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> 

puis définir les attributs de votre couleur états sélectionnés et non sélectionnés (c'est-à-dire affichés ici comme colorSelected et colorDeselected.

Vous pouvez personnaliser vos onglets avec une mise en page personnalisée:

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> 

voici comment l'TextView dans l'onglet se fait attacher au style. Vous pouvez creuser dans la mise en page de l'onglet standard XML dans le SDK de la plate-forme pour voir comment l'icône et le texte fonctionnent et ajuster cette mise en page en conséquence.