Color de texto de TabLayout (biblioteca de diseño de Android)

Respuestas:

256

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
fuente
@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
81

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" />
Chuehnone
fuente
1
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
1
¿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
5

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"
Tinashe
fuente
Lo siento, pero ¿dónde encontraste este camino?
pez muerto
4

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"/>
Moinkhan
fuente
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
1

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>
Sandeep Sankla
fuente
1

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

ingrese la descripción de la imagen aquí

Gabriele Mariotti
fuente
0

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>
osama astal
fuente
0

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>
Vithani Ravi
fuente
0

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))
Md Imran Choudhury
fuente