web-dev-qa-db-fra.com

Comment changer la couleur de l'icône de l'onglet sélectionné de TabLayout?

J'utilise une TabLayout avec une ViewPager et je me demande comment je peux le plus efficacement changer la couleur de l'icône de l'onglet sélectionné dans TabLayout.

L'application Youtube de Google . Sur la page principale, quatre icônes sont en gris foncé. Lorsqu'un onglet spécifique est sélectionné, l'icône de l'onglet devient blanche.

Sans bibliothèques tierces , comment puis-je obtenir le même effet?

Une solution possible est apparemment avec les sélecteurs. Mais dans ce cas, je devrais trouver à la fois une version blanche et une version grise de l'icône, puis changer d'icône lorsque l'onglet est sélectionné ou désélectionné. Je me demande s'il existe une méthode plus efficace où je peux simplement mettre en évidence la couleur de l'icône ou autre chose. Je n'ai pas pu trouver cela dans aucun tutoriel.

MODIFIER

La solution que je mentionne directement ci-dessus nécessite l'utilisation de deux dessinables pour l'icône de chaque onglet. Je me demande s'il est possible de le faire par programme avecUNdessinable pour l'icône de chaque onglet.

javaandroidmobilematerial-designandroid-tablayout
55
wayway

J'ai trouvé un moyen qui peut être facile. 

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setOnTabSelectedListener(
            new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {

                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    super.onTabSelected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }

                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    super.onTabUnselected(tab);
                    int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
                    tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
                }

                @Override
                public void onTabReselected(TabLayout.Tab tab) {
                    super.onTabReselected(tab);
                }
            }
    );
75
Cristian Hoyos
private void setupTabIcons() {
    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);
    tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    tabLayout.getTabAt(3).setIcon(tabIcons[3]);

    tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(1).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(2).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
    tabLayout.getTabAt(3).getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);


    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.getIcon().setColorFilter(Color.parseColor("#a8a8a8"), PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
}
37
Nurcahyadin

Vous pouvez utiliser un ColorStateList.

Commencez par créer un fichier XML (par exemple, /color/tab_icon.xml), qui ressemble à ceci et définit les différentes nuances pour différents états:

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

    <item Android:color="@color/icon_light_inactive" />
</selector>

Ajoutez ensuite ceci à votre code:

ColorStateList colors;
if (Build.VERSION.SDK_INT >= 23) {
    colors = getResources().getColorStateList(R.color.tab_icon, getTheme());
}
else {
    colors = getResources().getColorStateList(R.color.tab_icon);
}

for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    Drawable icon = tab.getIcon();

     if (icon != null) {
        icon = DrawableCompat.wrap(icon);
        DrawableCompat.setTintList(icon, colors);
    }
}

Tout d’abord, vous extrayez ColorStateList de votre XML (la méthode sans thème est obsolète, mais elle est nécessaire pour les périphériques d’avant Marshmallow). Ensuite, vous définissez pour l’icône de chaque onglet la valeur TintList sur ColorStateList; utilisez DrawableCompat (bibliothèque de support) pour prendre également en charge les versions antérieures.

C'est tout!

32
Felix Edelmann

Pour cela, vous devrez personnaliser les icônes des onglets en utilisant la classe de sélecteur pour chaque onglet, comme:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@drawable/advisory_selected" Android:state_selected="true" />
<item Android:drawable="@drawable/advisory_normal" Android:state_selected="false" />

12
Anshul Tyagi

vérifiez le code suivant. Personnalisez votre icône: la couleur et l’autre aucune couleur.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@drawable/mybookings_select" Android:state_selected="true"/><!-- tab is selected(colored icon)-->
<item Android:drawable="@drawable/mybookings" /><!-- tab is not selected(normal no color icon)-->

3
Prathap Badavath

Pourquoi n'utilisez-vous pas les polices d'icônes (telles que font awesome) pour vos icônes? puis changez la police du texte de l'onglet en votre icône de police souhaitable .ttf et profitez de la couleur de texte sélectionnée pour vos icônes de tabulation!

J'ai moi-même utilisé cette méthode et elle est vraiment belle et propre :)

tout d’abord, configurez les titres à partir de la police de votre choix:

dans string.xml:

    <string name="ic_calculator">&#xf1ec;</string>
    <string name="ic_bank">&#xf19c;</string>

puis dans MainActivity.Java:

    private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new FragmentBank(), getString(R.string.ic_bank));
    adapter.addFragment(new FragmentCalculate(), getString(R.string.ic_calculator));
    viewPager.setAdapter(adapter);
    }

Ensuite, vous devriez changer la police des titres d'onglets en font-awesome

    Typeface typeFaceFont = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
    int tabsCount = vg.getChildCount();
    for (int j = 0; j < tabsCount; j++) {
        ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
        int tabChildsCount = vgTab.getChildCount();
        for (int i = 0; i < tabChildsCount; i++) {
            View tabViewChild = vgTab.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(typeFaceFont);
            }
        }
    }

et enfin, dans votre fichier .xml associé, définissez la couleur de votre tabTextColor et tabSelectedTextColor:

<Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:scrollbars="horizontal"
        Android:background="@color/colorPrimaryDark"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/textColorPrimary"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
</Android.support.design.widget.AppBarLayout>

et en couleurs.xml:

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorHighlight">#FFFFFF</color>
    <color name="textColorPrimary">#E1E3F3</color>
</resources>
3
par4301

En vous référant à la deuxième réponse qui montre comment définir la couleur séparément, de nombreuses personnes se demandent peut-être comment supprimer la couleur de la première icône lors du passage à la suivante. Ce que vous pouvez faire, c'est comme ça:

private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
tabLayout.getTabAt(3).setIcon(tabIcons[3]);

tabLayout.getTabAt(0).getIcon().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(1).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(2).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);
tabLayout.getTabAt(3).getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);


tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        tab.getIcon().setColorFilter(Color.GREEN,PorterDuff.Mode.SRC_IN);

    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        //for removing the color of first icon when switched to next tab
        tablayout.getTabAt(0).getIcon().clearColorFilter();
        //for other tabs
        tab.getIcon().clearColorFilter();

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});}

J'aurais commenté la deuxième réponse mais n'avais pas assez de réputations pour ça! Pardon. Mais suivez s'il vous plaît que vous économiseriez votre temps et votre mal de tête! Bon apprentissage

1
Alok

Une façon possible de "mettre en surbrillance" l'icône est d'accéder à la vue d'image et de définir le filtre de couleur. Essayez d’utiliser la méthode ImageView setColorFilter (int color) et d’appliquer la couleur blanche. 

1
Yaw Asare

Cela peut être fait très simplement, entièrement en XML. 

Ajoutez une ligne à votre TabLayout dans votre code xml, app:tabIconTint="@color/your_color_selector", comme ci-dessous:

 <Android.support.design.widget.TabLayout
     Android:id="@+id/tab_layout"
     Android:layout_width="match_parent"
     Android:layout_height="wrap_content"
     app:tabIconTint="@color/your_color_selector"
     app:tabIndicatorColor="@color/selected_color"/>

Ensuite, créez un fichier de sélecteur de couleur (nommé "your_color_selector.xml" ci-dessus) dans le répertoire res/color:

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

Cela suppose que vous avez 2 couleurs, "selected_color" et "unselected_color" dans votre fichier colors.xml.

1
Vin Norman

Vous pouvez modifier la couleur du texte de l'onglet sélectionné à l'aide de l'attribut XML suivant de la disposition des onglets:

app:tabSelectedTextColor="your desired color"

Pour personnaliser la couleur de l’icône de l’onglet sélectionné, vous devez utiliser le sélecteur Créer un fichier xml dans un dossier pouvant être dessiné:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
   <item Android:color="selected_item_color" Android:state_activated="true" />
   <item Android:color="unselected_item_color" />
</selector>

et ajoutez ce sélecteur à l'attribut XML de mise en page d'onglet comme ci-dessous:

app:tabIconTint="@drawable/name_of_file"
0
Shrinivasan

tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {...} Est obsolète. Plutôt utiliser

tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            int tabIconColor = ContextCompat.getColor(context, R.color.tabSelectedIconColor);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            int tabIconColor = ContextCompat.getColor(context, R.color.tabUnselectedIconColor);
            tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
0
Ememobong AkpanEkpo

Vérifiez le code suivant:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        if(tab.getPosition() == 0){
            tabLayout.getTabAt(0).setIcon(tabIcons1[0]);
        }
        if(tab.getPosition() == 1){
            tabLayout.getTabAt(1).setIcon(tabIcons1[1]);
        }
        if(tab.getPosition() == 2){
            tabLayout.getTabAt(2).setIcon(tabIcons1[2]);
        }
    }
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }
    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});
0
Karunya Nepolian

Vous pouvez utiliser addOnTabSelectedListener, cela fonctionne pour moi.

tablayout = findViewById(R.id.viewall_tablayout);
pager = findViewById(R.id.viewall_pager);
adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragments(new RestFragment(),"Restaurant");
adapter.addFragments(new BarFragment(),"Bar");
adapter.addFragments(new HotelFragment(),"Hotel");
adapter.addFragments(new CoffeeFragment(),"Coffee Shop");
pager.setAdapter(adapter);
tablayout.setupWithViewPager(pager);

tablayout.getTabAt(0).setIcon(R.drawable.ic_restaurant);
tablayout.getTabAt(1).setIcon(R.drawable.ic_glass_and_bottle_of_wine);
tablayout.getTabAt(2).setIcon(R.drawable.ic_hotel_black_24dp);
tablayout.getTabAt(3).setIcon(R.drawable.ic_hot_coffee);

tablayout.getTabAt(0).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.getTabAt(1).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.getTabAt(2).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.getTabAt(3).getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        tab.getIcon().setTint(getResources().getColor(R.color.colorPrimary,getTheme()));
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        tab.getIcon().setTint(getResources().getColor(R.color.colorAccent,getTheme()));
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});
0
Shakthi Dilshan