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


124

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?

Respuestas:


250

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.


55
¿hay alguna manera de cambiar el 'tabSelectedTextColor' (no el color o la altura del indicador de tabulación) a través del código java?
Prakash

2
El atributo app: tabIndicatorColor en el widget tabLayout xml es el único cambio que necesitaba hacer para solucionar este problema. ¡Gracias!
Braden Holt

Hice esto como estilo principal:parent="@style/Base.Widget.Design.TabLayout"
Ultimo_m

Esta solución resulta ser legítima
Nikhil

101

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"

44
Puse esta línea, pero el color sigue siendo color de acento
Mahdi

@Kenji, ¿estás seguro de que esta línea se colocó en el TabLayout y no en el bit de la barra de herramientas del xml? Desplazamiento fácil de hacer :)
Wes Winn

Solución perfecta para la altura. Funciona bien. Gracias malek
Hardik Joshi

1
¿Qué pasa si quiero aplicar un color degradado en su lugar?
hamza khan

35

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.


2
setSelectedTabIndicatorHeight está en desuso ahora, ¿alguna idea de qué usar ahora?
Michalsx


13

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 .


¿Qué enteros se supone que debemos usar para el color?
the_prole

Puede usar la clase Color por ejemplo Color.RED
Soumya

setSelectedTabIndicatorHeight está en desuso ahora
APP

9

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


1
¡Gracias! esto me ayuda! Supongo que Google olvidó proporcionar un método para esto en su biblioteca de soporte.
Shinta S

1
¿Por qué usar la reflexión, si ya está disponible como funciones públicas? developer.android.com/reference/android/support/design/widget/…
Android

@SoheilSetayeshi Oh, está bien. Gracias. Tal vez deberías actualizar la respuesta entonces.
Desarrollador de Android

1
Pero esta es una solución perfecta para las API debajo de la biblioteca de soporte 23.0.0. Me refiero a Whaao! ¡Gran respuesta!
sud007

6

Foto indicador use esto:

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

6

de xml:

app:tabIndicatorColor="#fff"

de java:

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


0

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

0

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);
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.