web-dev-qa-db-fra.com

Comment changer la nouvelle couleur et la hauteur de l'indicateur TabLayout

Je jouais avec le nouveau Android.support.design.widget.TabLayout, et j'ai trouvé un problème dans la définition de la classe, il n'y a pas de méthode pour changer la couleur de l'indicateur et la hauteur par défaut.

En faisant des recherches, nous avons constaté que la couleur de l'indicateur par défaut est extraite de AppTheme. Plus précisément d'ici:

<item name="colorAccent">#FF4081</item>

Maintenant, dans mon cas, si je change la colorAccent, cela affectera toutes les autres vues qui utilisent cette valeur comme couleur d’arrière-plan, par exemple ProgressBar.

Maintenant, y a-t-il un moyen de changer l’indicateurColor en autre chose que le colorAccent?

androidmaterial-designandroid-design-library
117
David_E

Ayant le problème que le nouveau TabLayout utilise la couleur de l'indicateur de la valeur colorAccent, j'ai décidé de creuser dans l'implémentation Android.support.design.widget.TabLayout, constatant qu'il n'existait aucune méthode publique pour le personnaliser. Cependant, j'ai trouvé cette spécification de style de TabLayout:

<style name="Base.Widget.Design.TabLayout" parent="Android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

Ayant cette spécification de style, nous pouvons maintenant personnaliser TabLayout comme ceci:

<Android.support.design.widget.TabLayout
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@id/pages_tabs"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="?attr/colorPrimary"
    Android:minHeight="?attr/actionBarSize"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@Android:color/white"
    app:tabIndicatorHeight="4dp"/>

Et le problème est résolu, les valeurs par défaut de la couleur et de la hauteur de l'indicateur d'onglet peuvent être modifiées.

233
David_E

Avec la bibliothèque de support de conception, vous pouvez maintenant les changer dans le fichier XML:

Pour changer le couleur de l'indicateur TabLayout:

app:tabIndicatorColor="@color/color"

Pour changer le height de l'indicateur TabLayout:

app:tabIndicatorHeight="4dp"
91
Malek Hijazi

Étant donné que je ne peux pas publier de suivi sur commentaire du développeur Android , voici une réponse mise à jour pour toute autre personne ayant besoin de définir par programme la couleur de l'indicateur d'onglet sélectionné:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

De même pour la hauteur:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

Ces méthodes ont été ajoutées récemment à révision 23.0.0 de la bibliothèque de support , ce qui explique pourquoi réponse de Soheil Setayeshi utilise la réflexion.

32
jasonchen2
app:tabIndicatorColor="@Android:color/white"
17
Sanket Parchande

Avec la bibliothèque de support de conception v23 , vous pouvez définir par programme la couleur et la hauteur.

Il suffit d'utiliser pour la hauteur: 

TabLayout.setSelectedTabIndicatorHeight(int height)

Voici le javadoc officiel .

Il suffit d'utiliser pour la couleur: 

TabLayout.setSelectedTabIndicatorColor(int color)

Voici le javadoc officiel .

Ici vous pouvez trouver l'info dans le Google Tracker .

13
Gabriele Mariotti

Pour modifier la couleur et la hauteur de l'indicateur par programmation, vous pouvez utiliser la réflexion. Par exemple, pour la couleur de l'indicateur, utilisez le code ci-dessous:

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("Android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

et pour changer la hauteur de l'indicateur, utilisez "setSelectedIndicatorHeight" au lieu de "setSelectedIndicatorColor", puis appelez-le à la hauteur souhaitée.

9
Soheil Setayeshi

L'indicateur Foto utilise ceci:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color
5
chry

à partir de xml:

app:tabIndicatorColor="#fff"

de Java:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
2
Arthur Melo

Vous pouvez changer cela en utilisant XML

app:tabIndicatorColor="#fff"
1
Ishan Fernando

Android rend les choses faciles.

public void setTabTextColors(int normalColor, int selectedColor) {
    setTabTextColors(createColorStateList(normalColor, selectedColor));
}

Alors, on dit juste

mycooltablayout.setTabTextColors(Color.parseColor("#1464f4"), Color.parseColor("#880088"));

Cela nous donnera une couleur bleue normale et une couleur sélectionnée mauve.

Maintenant on règle la hauteur

public void setSelectedTabIndicatorHeight(int height) {
    mTabStrip.setSelectedIndicatorHeight(height);
}

Et pour la hauteur on dit

mycooltablayout.setSelectedIndicatorHeight(6);
0
SmulianJulian

Il suffit de mettre cette ligne dans votre code. Si vous changez la couleur, changez la valeur de la couleur entre parenthèses.

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
0
saqib javeed