Estoy usando el nuevo TabLayout de la biblioteca de diseño de Android. Me las arreglé para configurar la lista de estado de color de texto usandotabLayout.setTabTextColors(colorstatelist)
¿Cómo puedo lograr lo mismo usando styles.xml?
Color de texto de TabLayout (biblioteca de diseño de Android)
Respuestas:
A través de atributos XML:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="@color/your_unselected_text_color"
app:tabSelectedTextColor="@color/your_selected_text_color"/>
Además, hay atributos como tabIndicatorColor o tabIndicatorHeight para un estilo adicional.
En codigo:
tabLayout.setTabTextColors(
getResources().getColor(R.color.your_unselected_text_color),
getResources().getColor(R.color.your_selected_text_color)
);
Dado que esta forma antigua está obsoleta a partir de la API 23, la alternativa es:
tabLayout.setTabTextColors(
ContextCompat.getColor(context, R.color.your_unselected_text_color),
ContextCompat.getColor(context, R.color.your_selected_text_color)
);
@Fe Le ¿y si quiero cambiar de forma pragmática?
—
PriyankaChauhan
@pcpriyanka gracias por el consejo, he actualizado mi respuesta con una forma tan fácil de definir el color seleccionado y no seleccionado en el código.
—
Fe Le
Aquí hay un código de fragmento para anular el estilo del texto y el color del texto seleccionado
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">@style/MyCustomTabText</item>
<item name="tabSelectedTextColor">@color/tab_text_act</item>
</style>
<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/tab_text</item>
</style>
Y aquí hay un fragmento de código para el diseño.
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/MyCustomTabLayout" />
Gracias, esto funciona para mí. Solo quiero señalar que tabSelectedTextColor es el color de la línea debajo de la pestaña y el texto de la pestaña cuando seleccioné la pestaña.
—
Simon
¿Por qué hereda Widget.Design.TabLayout?
—
SpaceMonkey
¿Por qué tenemos que usar "estilo" aquí en TabLayout? ¿Por qué no funciona si utilizo "android: theme"?
—
SpaceMonkey
@Spacemonkey porque Widget.Design.TabLayout contiene estilos base para pestañas como "tabIndicatorColor", "tabIndicatorHeight"
—
sweetrenard
@sweetrenard oh, ¿entonces está anulando el tema que especifico en "android: theme"?
—
SpaceMonkey
Todas las respuestas anteriores son correctas, pero creo que es mejor anular los estilos predeterminados y solo cambiar el elemento específico que desea cambiar. El siguiente ejemplo hará que el texto esté en negrita:
<style name="Widget.TabItem" parent="TextAppearance.Design.Tab">
<item name="android:textStyle">bold</item>
</style>
Entonces..,
app:tabTextAppearance="@style/Widget.TabItem"
Lo siento, pero ¿dónde encontraste este camino?
—
pez muerto
Solo tienes que anular el android:textAppearanceestilo. Porque TabLayout usa textAppearance. aquí está el pequeño fragmento de código de estilo.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Below will reference with our custom style -->
<item name="android:textAppearance">@style/my_tab_text</item>
</style>
<style name="my_tab_text" parent="Base.TextAppearance.AppCompat">
<item name="android:textColor">@android:color/holo_blue_dark</item>
</style>
Y si no desea hacer referencia desde su Apptheme , puede especificar directamente a TabLayout usando el fragmento de abajo.
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="@style/my_tab_text"
app:tabIndicatorHeight="48dp"/>
asegúrese de estar usando AppCompact como padre
—
Moinkhan
ok tienes razón, funciona. pero solo para la pestaña "no seleccionada". el texto de la pestaña seleccionado siempre es negro para mí
—
sebastian
Ok, no hay ningún código en la biblioteca de diseño disponible para asignar un color de texto de la pestaña seleccionada en la biblioteca de soporte de diseño. Entonces, para el color del texto de la pestaña seleccionada, debe configurarlo usando la propiedad.
—
Moinkhan
Para las pestañas personalizadas, tenemos que anular lo siguiente: 1) app: tabTextColor // for_unselected_text "
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="?attr/colorPrimary"
android:scrollbarSize="24sp"
android:visibility="gone"
app:tabTextColor="@color/white_40_percent"
app:tabMode="scrollable" />
2) tabSelectedTextColor // para el color de pestaña seleccionado 3) tabIndicatorColor // color para el indicador de pestaña
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="android:textColorPrimary">@color/white</item>
<item name="tabSelectedTextColor">@color/white</item>
<item name="tabTextAppearance">@style/TabTextStyle</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="android:tabStripEnabled">true</item>
<item name="android:padding">0dp</item>
</style>
<style name="TabTextStyle">
<item name="android:fontFamily">@string/font_fontFamily_medium</item>
<item name="android:textStyle">bold</item>
<item name="android:textAllCaps">true</item>
<item name="android:textColor">@color/tab_text_color</item>
<item name="android:textSize">16sp</item>
</style>
tab_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white_40_percent"android:state_selected="false"/>
<item android:color="@color/white_100_percent"android:state_selected="true"/>
</selector>
Con lo TabLayoutproporcionado en el Biblioteca de componentes de materiales , puede:
- Usa un estilo personalizado
<com.google.android.material.tabs.TabLayout
style="@style/My_Tablayout"
..>
y en tu estilo usa el tabTextColorcon un selector.
<!-- TabLayout -->
<style name="My_Tablayout" parent="Widget.MaterialComponents.TabLayout" >
<item name="tabTextColor">@color/tab_layout_selector</item>
</style>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_selected="true"/>
<item android:alpha="0.60" android:color="?attr/colorOnSurface"/>
</selector>
- Use el
app:tabTextColoren su diseño:
<com.google.android.material.tabs.TabLayout
app:tabTextColor="@color/tab_layout_selector"
..>
Manera fácil y perfecta:
En archivo xml:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="@style/TabText"/>
En el archivo de estilos de valores:
nota: "cairo_semibold" es una fuente externa, puede reemplazarla con su fuente.
<style name="TabText" parent="TextAppearance.Design.Tab">
<item name="android:textColor">#1f57ff</item>
<item name="android:textSize">14sp</item>
<item name="android:fontFamily">@font/cairo_semibold</item>
</style>
la mejor o la forma más corta y sencilla es hacer una barra de aplicaciones personalizada
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@color/colorAccent"
app:theme="@style/myCustomAppBarTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"><RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="@+id/btn_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="@android:color/transparent"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/txt_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="@+id/btn_back"
android:layout_toRightOf="@+id/btn_back"
android:text="Title"
android:textColor="@android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Atributos XML
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/white"
app:tabBackground="@color/colorAccent"
app:tabSelectedTextColor="@color/white"
app:tabTextColor="@color/white"
app:tabMode="scrollable" />
En Kotlin programáticamente
(tab_layout as TabLayout).setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary))
(tab_layout as TabLayout).setSelectedTabIndicatorColor(ContextCompat.getColor(mContext, R.color.white))
(tab_layout as TabLayout).setTabTextColors(ContextCompat.getColor(mContext, R.color.white),
ContextCompat.getColor(mContext, R.color.white))