Cómo cambiar el nuevo color y altura del indicador TabLayout

Estaba jugando con el nuevo android.support.design.widget.TabLayout, y encontré un problema, en la definición de la clase, no hay métodos para cambiar el color del indicador y la altura predeterminada.

Al investigar un poco, descubrí que el color del indicador predeterminado se toma del AppTheme. Específicamente desde aquí:

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

Ahora, en mi caso, si cambio el colorAccent, afectará a todas las demás vistas que usan este valor como color de fondo, por ejemplo ProgressBar

Ahora, ¿hay alguna forma de cambiar el IndicadorColor a otra cosa además de colorAccent?

Teniendo el problema de que el nuevo TabLayout usa el color del indicador del valor colorAccent, decidí profundizar en la android.support.design.widget.TabLayoutimplementación, descubriendo que no hay métodos públicos para personalizar esto. Sin embargo, encontré esta especificación de estilo 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>

Con esta especificación de estilo, ahora podemos personalizar TabLayout de esta manera:

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

Y el problema resuelto, tanto el color del indicador de pestaña como la altura se pueden cambiar de sus valores predeterminados.

Con la biblioteca de soporte de diseño ahora puede cambiarlos en el xml:

Para cambiar el color del indicador TabLayout:

app:tabIndicatorColor="@color/color"

Para cambiar la altura del indicador TabLayout:

app:tabIndicatorHeight="4dp"

Como no puedo publicar un seguimiento del comentario del desarrollador de Android , aquí hay una respuesta actualizada para cualquier otra persona que necesite configurar mediante programación el color del indicador de pestaña seleccionado:

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

Del mismo modo, para la altura:

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

Estos métodos se agregaron recientemente a la revisión 23.0.0 de la Biblioteca de soporte , por lo que la respuesta de Soheil Setayeshi utiliza la reflexión.

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

Con la biblioteca de soporte de diseño v23 puede establecer mediante programación el color y la altura.

Solo use para la altura:

TabLayout.setSelectedTabIndicatorHeight(int height)

Aquí el javadoc oficial .

Solo use para el color:

TabLayout.setSelectedTabIndicatorColor(int color)

Aquí el javadoc oficial .

Aquí puede encontrar la información en Google Tracker .

Para cambiar el color y la altura del indicador mediante programación, puede usar la reflexión. por ejemplo, para el color del indicador, use el siguiente código:

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

y para cambiar la altura del indicador use "setSelectedIndicatorHeight" en lugar de "setSelectedIndicatorColor" y luego invoque la altura deseada

Foto indicador use esto:

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

de xml:

app:tabIndicatorColor="#fff"

de java:

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

Puedes cambiar esto usando xml

app:tabIndicatorColor="#fff"

Simplemente ponga esta línea en su código. Si cambia el color, cambie el valor del color entre paréntesis.

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

Android lo hace fácil.

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

Entonces, solo decimos

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

Eso nos dará un color azul normal y un color púrpura seleccionado.

Ahora establecemos la altura

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

Y para la altura decimos

mycooltablayout.setSelectedIndicatorHeight(6);