studio - material design component android

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

Question

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 otras 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 del colorAccent ?

Answer 1

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

Answer 2

Como no puedo publicar un seguimiento del comentario del desarrollador de Android , aquí hay una respuesta actualizada para cualquier otra persona que necesite establecer 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.

Answer 3

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 .

Answer 4

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"

Answer 5

El indicador de foto usa esto:

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

Answer 6

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 por la altura deseada

Answer 7

Puedes cambiar esto usando xml

app:tabIndicatorColor="#fff"

Answer 8

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

Answer 9

Teniendo el problema de que el nuevo TabLayout usa el color del indicador del valor colorAccent , decidí profundizar en la implementación de android.support.design.widget.TabLayout , 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.

Answer 10

de xml:

app:tabIndicatorColor="#fff"

de java:

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

Answer 11

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