TabLayout (bibliothèque de conception Android) Couleur du texte

Réponses:

256

Via les attributs 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"/>

De plus, il existe des attributs tels que tabIndicatorColor ou tabIndicatorHeight pour un style supplémentaire.

Dans du code:

tabLayout.setTabTextColors(
    getResources().getColor(R.color.your_unselected_text_color),
    getResources().getColor(R.color.your_selected_text_color)
);

Étant donné que cette ancienne méthode est obsolète à partir de l'API 23, l'alternative est:

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);
Fe Le
la source
@Fe Le et si je veux changer de manière pragmatique?
PriyankaChauhan
@pcpriyanka merci pour le conseil, j'ai mis à jour ma réponse avec un moyen aussi simple de définir la couleur sélectionnée et non sélectionnée dans le code.
Fe Le
81

Voici un extrait de code pour remplacer le style de texte et la couleur de texte sélectionnée

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

Et voici un extrait de code pour la mise en page

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MyCustomTabLayout" />
Chuehnone
la source
1
Merci - cela fonctionne pour moi. Juste pour souligner que tabSelectedTextColor est la couleur de la ligne sous l'onglet et le texte de l'onglet lorsque l'onglet j'ai sélectionné.
Simon le
Pourquoi héritez-vous de Widget.Design.TabLayout?
SpaceMonkey
1
pourquoi devons-nous utiliser "style" ici sur TabLayout? Pourquoi ça ne marche pas si j'utilise "android: theme"?
SpaceMonkey
@Spacemonkey parce que Widget.Design.TabLayout contient des styles de base pour des onglets tels que "tabIndicatorColor", "tabIndicatorHeight"
sweetrenard
@sweetrenard oh, donc il remplace le thème que je spécifie dans "android: theme"?
SpaceMonkey
5

Toutes les réponses ci-dessus sont correctes, mais je pense simplement qu'il est préférable de remplacer les styles par défaut et de ne modifier que l'élément spécifique que vous souhaitez modifier. L'exemple ci-dessous rendra le texte en gras:

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

Ensuite..,

app:tabTextAppearance="@style/Widget.TabItem"
Tinashe
la source
Je suis désolé mais où as-tu trouvé cette voie?
deadfish
4

Il vous suffit de remplacer le android:textAppearancestyle. Parce que TabLayout utilise textAppearance. voici le petit extrait de code de style.

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

Et si vous ne souhaitez pas faire référence à partir de votre Apptheme, vous pouvez directement spécifier à TabLayout en utilisant l'extrait de code ci-dessous.

 <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
la source
assurez-vous que vous utilisez AppCompact en tant que parent
Moinkhan
ok tu as raison, ça marche. mais uniquement pour l'onglet "non sélectionné". le texte de l'onglet sélectionné est toujours noir pour moi
sebastian
Ok, il n'y a pas de code dans la bibliothèque de conception disponible pour attribuer un textColor de l'onglet sélectionné dans la bibliothèque de support de conception. Donc, pour la couleur du texte de l'onglet sélectionné, vous devez la définir à l'aide de la propriété ..
Moinkhan
1

Pour les onglets personnalisés, nous devons remplacer les éléments suivants: 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 // pour la couleur d'onglet sélectionnée 3) tabIndicatorColor // couleur pour l'indicateur d'onglet

   <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
la source
1

Avec le TabLayoutfourni dans la bibliothèque de composants de matériaux, vous pouvez:

  • Utilisez un style personnalisé 
  <com.google.android.material.tabs.TabLayout
      style="@style/My_Tablayout"
      ..>

et dans votre style utilisez le tabTextColoravec un sélecteur.

<!-- 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>
  • Utilisez le app:tabTextColordans votre mise en page:
  <com.google.android.material.tabs.TabLayout
      app:tabTextColor="@color/tab_layout_selector"
      ..>

entrez la description de l'image ici

Gabriele Mariotti
la source
0

Manière facile et parfaite:

Dans un fichier xml:

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

Dans le fichier de styles de valeurs:

note: "cairo_semibold" est une police externe, vous pouvez la remplacer par votre police.

<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
la source
0

Le meilleur moyen ou court et simple est de créer une barre d'applications personnalisée comme

 <?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
la source
0

Attributs 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" />

Dans Kotlin par programmation

(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
la source