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 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?

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.

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"

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.

app:tabIndicatorColor="@android:color/white"

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 .

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

L'indicateur de photo utilise ceci:

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

à partir de xml:

app:tabIndicatorColor="#fff"

de java:

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

Vous pouvez changer cela en utilisant xml

app:tabIndicatorColor="#fff"

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"));

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