last - TabLayout(Android Design Library) Color de texto

com.android.support:design 26

Question

Estoy usando el nuevo TabLayout de la biblioteca de diseño de Android. Logré establecer la lista de estado de textcolor usando tabLayout.setTabTextColors(colorstatelist)

¿Cómo puedo lograr lo mismo usando styles.xml?

Answer 1

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 antigua forma está en desuso a partir de 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)
);

Answer 2

Aquí hay un código de fragmento para anular el estilo de texto y el color de 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" />

Answer 3

Con el TabLayout provisto en la Biblioteca de Componentes de Materiales puede:

• Usa un estilo personalizado

<com.google.android.material.tabs.TabLayout style="@style/My_Tablayout" ..>

y en su estilo use el tabTextColor con 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 la app:tabTextColor en su diseño:

<com.google.android.material.tabs.TabLayout app:tabTextColor="@color/tab_layout_selector" ..>

Answer 4

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 valores-estilos:

nota: "cairo_semibold" es una fuente externa, puede reemplazarla por 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>

Answer 5

Para las pestañas personalizadas, tenemos que anular lo siguiente: 1) aplicación: 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>

Answer 6

Solo tiene que anular el estilo android:textAppearance . 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 a su Apptheme , puede especificar directamente a TabLayout usando el fragmento A continuación.

 <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/my_tab_text"
            app:tabIndicatorHeight="48dp"/>

Answer 7

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 pondrá el texto en negrita:

<style name="Widget.TabItem" parent="TextAppearance.Design.Tab">
    <item name="android:textStyle">bold</item>
</style>

Entonces..,

app:tabTextAppearance="@style/Widget.TabItem"

Answer 8

La mejor manera, corta o simple, es hacer una barra de aplicaciones personalizada como

 <?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>