Sto usando il nuovo TabLayout dalla libreria Android Design. Sono riuscito a impostare lo statelist textcolor usandotabLayout.setTabTextColors(colorstatelist)
Come posso ottenere lo stesso risultato usando styles.xml?
TabLayout (Android Design Library) Colore testo
Risposte:
Tramite attributi 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"/>
Inoltre, ci sono attributi come tabIndicatorColor o tabIndicatorHeight per ulteriori stili.
In codice:
tabLayout.setTabTextColors(
getResources().getColor(R.color.your_unselected_text_color),
getResources().getColor(R.color.your_selected_text_color)
);
Poiché questo vecchio metodo è deprecato a partire dall'API 23, l'alternativa è:
tabLayout.setTabTextColors(
ContextCompat.getColor(context, R.color.your_unselected_text_color),
ContextCompat.getColor(context, R.color.your_selected_text_color)
);
@ Fe Le e se volessi cambiare pragmaticamente?
—
PriyankaChauhan
@pcpriyanka grazie per il suggerimento, ho aggiornato la mia risposta con un modo altrettanto semplice per definire il colore selezionato e non selezionato nel codice.
—
Fe Le
Ecco un frammento di codice per sovrascrivere lo stile del testo e il colore del testo selezionato
<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>
Ed ecco il codice snippet per il layout
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/MyCustomTabLayout" />
Grazie, per me funziona. Tengo solo a sottolineare che tabSelectedTextColor è il colore della linea sotto la scheda e il testo della scheda quando la scheda ho selezionato.
—
Simon
Perché erediti Widget.Design.TabLayout?
—
SpaceMonkey
perché dobbiamo usare "style" qui su TabLayout? Perché non funziona se utilizzo "android: theme"?
—
SpaceMonkey
@Spacemonkey perché Widget.Design.TabLayout contiene stili di base per schede come "tabIndicatorColor", "tabIndicatorHeight"
—
sweetrenard
@sweetrenard oh, quindi sovrascrive il tema specificato in "android: theme"?
—
SpaceMonkey
Tutte le risposte sopra sono corrette, ma penso solo che sia meglio sovrascrivere gli stili predefiniti e modificare solo l'elemento specifico che si desidera modificare. L'esempio seguente renderà il testo in grassetto:
<style name="Widget.TabItem" parent="TextAppearance.Design.Tab">
<item name="android:textStyle">bold</item>
</style>
Poi..,
app:tabTextAppearance="@style/Widget.TabItem"
Mi dispiace ma dove l'hai trovato in questo modo?
—
deadfish
Devi solo sovrascrivere lo android:textAppearancestile. Perché TabLayout usa textAppearance. ecco il piccolo frammento di codice di stile.
<!-- 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>
E se non vuoi fare riferimento dal tuo Apptheme puoi specificare direttamente TabLayout usando lo snippet di seguito.
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="@style/my_tab_text"
app:tabIndicatorHeight="48dp"/>
assicurati di utilizzare AppCompact come genitore
—
Moinkhan
ok hai ragione, funziona. ma solo per la scheda "non selezionata". il testo della tabulazione selezionato è sempre nero per me
—
sebastian
Ok, non è disponibile alcun codice nella libreria di progettazione per assegnare un textColor della scheda selezionata nella libreria di supporto alla progettazione. Quindi per il colore del testo della scheda selezionata devi impostarlo usando la proprietà ..
—
Moinkhan
Per le schede personalizzate dobbiamo sovrascrivere quanto segue: 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 // per il colore della scheda selezionata 3) tabIndicatorColor // colore per l'indicatore della scheda
<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 il TabLayoutfornito nella libreria dei componenti dei materiali è possibile:
- Usa uno stile personalizzato
<com.google.android.material.tabs.TabLayout
style="@style/My_Tablayout"
..>
e nel tuo stile usa il tabTextColorcon un selettore.
<!-- 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>
- Usa il
app:tabTextColornel tuo layout:
<com.google.android.material.tabs.TabLayout
app:tabTextColor="@color/tab_layout_selector"
..>
Modo facile e perfetto:
Nel file xml:
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="@style/TabText"/>
Nel file di stili di valori:
nota: "cairo_semibold" è un font esterno, puoi sostituirlo con il tuo font.
<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>
il modo migliore o breve e semplice è creare un'appbar personalizzata come
<?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>
Attributi 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" />
In Kotlin a livello di codice
(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))