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

124

Je jouais avec le nouveau android.support.design.widget.TabLayout, et j'ai trouvé un problème, dans la définition de 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 tirée de l'AppTheme. Plus précisément d'ici:

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

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

Existe-t-il maintenant un moyen de changer la couleur de l'indicateur en autre chose que le colorAccent?

David_E
la source

Réponses:

250

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' android.support.design.widget.TabLayoutimplémentation, constatant qu'il n'y avait pas de méthodes publiques pour personnaliser cela. Cependant, j'ai trouvé cette spécification de style du 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 le 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, la couleur et la hauteur de l'indicateur d'onglet peuvent être modifiées par rapport à leurs valeurs par défaut.

David_E
la source
5
y a-t-il un moyen de changer le 'tabSelectedTextColor' (pas la couleur ou la hauteur de l'indicateur de tabulation) via le code java.
Prakash
2
l'attribut app: tabIndicatorColor dans le widget tabLayout xml est le seul changement que je devais apporter pour résoudre ce problème. Merci!
Braden Holt
J'ai fait ceci en tant que style parent:parent="@style/Base.Widget.Design.TabLayout"
Ultimo_m
Cette solution s'avère légitime
Nikhil
101

Avec la bibliothèque de support de conception, vous pouvez maintenant les modifier dans le xml:

Pour changer la couleur de l'indicateur TabLayout:

app:tabIndicatorColor="@color/color"

Pour modifier la hauteur de l'indicateur TabLayout:

app:tabIndicatorHeight="4dp"
Malek Hijazi
la source
4
J'ai mis cette ligne, mais la couleur est toujours la couleur d'accent
Mahdi
@Kenji êtes-vous sûr que cette ligne a été placée dans le TabLayout et non dans le bit Toolbar du xml? Perte facile à faire :)
Wes Winn
Solution parfaite pour la hauteur. Ça fonctionne bien. Merci Malek.
Hardik Joshi
1
Et si je souhaite appliquer une couleur dégradée à la place?
hamza khan le
35

Comme je ne peux pas publier de suivi du commentaire du développeur Android , voici une réponse mise à jour pour toute autre personne qui doit 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 n'ont été ajoutées que récemment à la révision 23.0.0 de la bibliothèque de support , c'est pourquoi la réponse de Soheil Setayeshi utilise la réflexion.

jasonchen2
la source
2
setSelectedTabIndicatorHeight est obsolète maintenant, une idée de ce qu'il faut utiliser maintenant?
Michalsx
17
app:tabIndicatorColor="@android:color/white"
Sanket Parchande
la source
13

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

Utilisez simplement pour la hauteur:

TabLayout.setSelectedTabIndicatorHeight(int height)

Voici le javadoc officiel .

Utilisez simplement pour la couleur:

TabLayout.setSelectedTabIndicatorColor(int color)

Voici le javadoc officiel .

Ici vous pouvez trouver les informations dans le Google Tracker .

Gabriele Mariotti
la source
Quels nombres entiers sommes-nous censés utiliser pour la couleur?
the_prole
Vous pouvez utiliser la classe Color par exemple Color.RED
Soumya
setSelectedTabIndicatorHeight est maintenant obsolète
APP
9

Pour changer 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 désirée

Soheil Setayeshi
la source
1
Je vous remercie! cela m'aide! Je suppose que Google a oublié de fournir une méthode pour cela dans sa bibliothèque de support.
Shinta S
1
Pourquoi utiliser la réflexion, si elle est déjà disponible en tant que fonctions publiques? developer.android.com/reference/android/support/design/widget/…
android
@SoheilSetayeshi Oh, d'accord. Je vous remercie. Vous devriez peut-être mettre à jour la réponse alors.
développeur android
1
Mais c'est une solution parfaite pour les API sous la bibliothèque de support 23.0.0. Je veux dire Whaao! Très bonne réponse!
sud007
6

L'indicateur de photo utilise ceci:

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

à partir de xml:

app:tabIndicatorColor="#fff"

de java:

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

Vous pouvez changer cela en utilisant xml

app:tabIndicatorColor="#fff"
Ishan Fernando
la source
0

Mettez simplement cette ligne dans votre code. Si vous modifiez la couleur, modifiez la valeur de couleur entre parenthèses.

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

Android facilite les choses.

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 violette sélectionnée.

Maintenant, nous définissons la hauteur

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

Et pour la hauteur nous disons

mycooltablayout.setSelectedIndicatorHeight(6);
SmulianJulian
la source