TabLayout (Android Design Library) Textfarbe

Antworten:

255

Über XML-Attribute:

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

Darüber hinaus gibt es Attribute wie tabIndicatorColor oder tabIndicatorHeight für die weitere Gestaltung.

In Code:

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

Da dieser alte Weg ab API 23 veraltet ist, lautet die Alternative:

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);
— Fe Le
quelle
@Fe Le was ist, wenn ich mich pragmatisch ändern will?
— PriyankaChauhan
@pcpriyanka danke für den Tipp, ich habe meine Antwort mit einer ebenso einfachen Möglichkeit aktualisiert, ausgewählte und nicht ausgewählte Farben im Code zu definieren.
— Fe Le
81

Hier ist ein Snippet-Code zum Überschreiben des Textstils und der ausgewählten Textfarbe

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

Und hier ist ein Snippet-Code für das Layout

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MyCustomTabLayout" />
— Chuehnone
quelle
1
Danke - das funktioniert bei mir. Ich möchte nur darauf hinweisen, dass die tabSelectedTextColor die Farbe für die Linie unter der Registerkarte und den Text der Registerkarte ist, als ich die Registerkarte ausgewählt habe.
— Simon
Warum erben Sie Widget.Design.TabLayout?
— SpaceMonkey
1
Warum müssen wir hier auf TabLayout "style" verwenden? Warum funktioniert es nicht, wenn ich "android: theme" verwende?
— SpaceMonkey
@Spacemonkey, weil Widget.Design.TabLayout Basisstile für Registerkarten wie "tabIndicatorColor", "tabIndicatorHeight" enthält
— sweetrenard
@sweetrenard oh, also überschreibt es das Thema, das ich in "android: theme" angegeben habe?
— SpaceMonkey
5

Alle obigen Antworten sind korrekt, aber ich denke, es ist besser, die Standardstile zu überschreiben und nur das spezifische Element zu ändern, das Sie ändern möchten. Das folgende Beispiel macht den Text fett:

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

Dann..,

app:tabTextAppearance="@style/Widget.TabItem"
— Tinashe
quelle
Es tut mir leid, aber wo hast du diesen Weg gefunden?
— Deadfish
4

Sie müssen nur den android:textAppearanceStil überschreiben . Weil TabLayout textAppearance verwendet. Hier ist der kleine Code-Snippet-Code.

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

Und wenn Sie nicht auf Ihr Apptheme verweisen möchten , können Sie TabLayout mit dem Snippet Below direkt angeben.

 <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
quelle
Stellen Sie sicher, dass Sie AppCompact als übergeordnetes Element verwenden
— Moinkhan
ok du hast recht, es funktioniert. aber nur für die "nicht ausgewählte" -Tab. Der ausgewählte Tab-Text ist für mich immer schwarz
— Sebastian
Ok, in der Designbibliothek ist kein Code zum Zuweisen einer Textfarbe der ausgewählten Registerkarte in der Designunterstützungsbibliothek verfügbar. Für die ausgewählte Tabulatortextfarbe müssen Sie sie also mit der Eigenschaft festlegen.
— Textfarbe einstellen
1

Für benutzerdefinierte Registerkarten müssen wir Folgendes überschreiben: 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 // für die ausgewählte Registerkartenfarbe 3) tabIndicatorColor // Farbe für die Registerkartenanzeige

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

Mit dem TabLayoutin der Materialkomponentenbibliothek bereitgestellten können Sie:

  • Verwenden Sie einen benutzerdefinierten Stil 
  <com.google.android.material.tabs.TabLayout
      style="@style/My_Tablayout"
      ..>

und in deinem Stil benutze das tabTextColormit einem Selektor.

<!-- 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>
  • Verwenden Sie die app:tabTextColorin Ihrem Layout:
  <com.google.android.material.tabs.TabLayout
      app:tabTextColor="@color/tab_layout_selector"
      ..>

Geben Sie hier die Bildbeschreibung ein

— Gabriele Mariotti
quelle
0

Einfacher und perfekter Weg:

In der XML-Datei ::

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

In der Wertestildatei:

Hinweis: "cairo_semibold" ist eine externe Schriftart, die Sie durch Ihre Schriftart ersetzen können.

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

Beste oder kurze und einfache Möglichkeit ist es, benutzerdefinierte Appbar wie zu machen

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

XML-Attribute

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

(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
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.