Come modificare il colore e l'altezza del nuovo indicatore TabLayout

Stavo giocando con il nuovo android.support.design.widget.TabLayoute ho trovato un problema, nella definizione della classe, non ci sono metodi per cambiare il colore dell'indicatore e l'altezza predefinita.

Facendo alcune ricerche, ho scoperto che il colore dell'indicatore predefinito è preso da AppTheme. In particolare da qui:

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

Ora, nel mio caso, se cambio il colorAccent, influenzerà tutte le altre viste che usano questo valore come colore di sfondo, ad esempio ProgressBar

Ora c'è un modo per cambiare l'indicatoreColor in un'altra cosa oltre a colorAccent?

Avendo il problema che il nuovo TabLayout utilizza il colore dell'indicatore dal valore colorAccent, ho deciso di approfondire l' android.support.design.widget.TabLayoutimplementazione, scoprendo che non esistono metodi pubblici per personalizzarlo. Tuttavia ho trovato questa specifica di stile del 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>

Avendo questa specifica di stile, ora possiamo personalizzare il TabLayout in questo modo:

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

E risolto il problema, sia il colore che l'altezza dell'indicatore di tabulazione possono essere modificati dai valori predefiniti.

Con la libreria di supporto alla progettazione ora puoi cambiarli in xml:

Per modificare il colore dell'indicatore TabLayout:

app:tabIndicatorColor="@color/color"

Per modificare l' altezza dell'indicatore TabLayout:

app:tabIndicatorHeight="4dp"

Dal momento che non posso pubblicare un seguito al commento dello sviluppatore Android , ecco una risposta aggiornata per chiunque altro abbia bisogno di impostare a livello di programmazione il colore dell'indicatore della scheda selezionata:

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

Allo stesso modo, per l'altezza:

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

Questi metodi sono stati aggiunti solo di recente alla revisione 23.0.0 della libreria di supporto , motivo per cui la risposta di Soheil Setayeshi utilizza la riflessione.

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

Con la libreria di supporto al design v23 è possibile impostare programmaticamente il colore e l'altezza.

Usa solo per l'altezza:

TabLayout.setSelectedTabIndicatorHeight(int height)

Qui il javadoc ufficiale .

Usa solo per il colore:

TabLayout.setSelectedTabIndicatorColor(int color)

Qui il javadoc ufficiale .

Qui puoi trovare le informazioni nel Google Tracker .

Per modificare il colore e l'altezza dell'indicatore a livello di codice puoi usare la riflessione. ad esempio per il colore dell'indicatore utilizzare il codice seguente:

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

e per cambiare l'altezza dell'indicatore usa "setSelectedIndicatorHeight" invece di "setSelectedIndicatorColor" quindi invocalo all'altezza desiderata

L'indicatore foto usa questo:

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

da xml:

app:tabIndicatorColor="#fff"

da java:

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

Puoi cambiarlo usando xml

app:tabIndicatorColor="#fff"

Basta inserire questa riga nel codice. Se cambi il colore, cambia il valore del colore tra parentesi.

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

Android lo rende facile.

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

Quindi, diciamo solo

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

Questo ci darà un colore blu normale e un colore viola selezionato.

Ora impostiamo l'altezza

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

E per altezza diciamo

mycooltablayout.setSelectedIndicatorHeight(6);