J'utilise le nouveau TabLayout de la bibliothèque Android Design. J'ai réussi à définir la liste de statistiques textcolor en utilisanttabLayout.setTabTextColors(colorstatelist)
Comment puis-je obtenir la même chose en utilisant styles.xml?
TabLayout (bibliothèque de conception Android) Couleur du texte
Réponses:
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 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
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" />
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
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
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"
Je suis désolé mais où as-tu trouvé cette voie?
—
deadfish
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"/>
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
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>
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"
..>
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>
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>
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))