Màu văn bản của TabLayout (Thư viện thiết kế Android)

Câu trả lời:

256

Thông qua các thuộc tính 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"/>

Ngoài ra, có các thuộc tính như tabIndicatorColor hoặc tabIndicatorHeight để tạo kiểu thêm.

Trong mã:

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

Vì cách cũ này không được dùng nữa kể từ API 23, nên giải pháp thay thế là:

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);
— Fe Le
nguồn
@Fe Le nếu tôi muốn thay đổi thực dụng thì sao?
— PriyankaChauhan
@pcpriyanka, cảm ơn vì mẹo này, tôi đã cập nhật câu trả lời của mình với một cách dễ dàng để xác định màu đã chọn và không được chọn trong mã.
— Fe Le
81

Đây là đoạn mã để ghi đè kiểu văn bản và màu văn bản đã chọn

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

Và đây là đoạn mã cho bố cục

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MyCustomTabLayout" />
— Chuehnone
nguồn
1
Cảm ơn - điều này làm việc cho tôi. Cũng giống như chỉ ra rằng tabSelectedTextColor là màu cho dòng dưới tab và văn bản của tab khi tab tôi đã chọn.
— Simon
Tại sao bạn lại kế thừa Widget.Design.TabLayout?
— SpaceMonkey
1
tại sao chúng ta phải sử dụng "style" ở đây trên TabLayout? Tại sao nó không hoạt động nếu tôi sử dụng "android: theme"?
— SpaceMonkey
@Spacemonkey vì Widget.Design.TabLayout chứa phong cách cơ sở cho các tab đó như "tabIndicatorColor", "tabIndicatorHeight"
— sweetrenard
@sweetrenard ồ, vậy là nó đang ghi đè chủ đề mà tôi chỉ định trong "android: theme"?
— SpaceMonkey
5

Tất cả các câu trả lời ở trên đều đúng nhưng tôi nghĩ tốt hơn hết là ghi đè các kiểu mặc định và chỉ thay đổi phần tử cụ thể mà bạn muốn thay đổi. Ví dụ dưới đây sẽ làm cho văn bản được in đậm:

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

Sau đó..,

app:tabTextAppearance="@style/Widget.TabItem"
— Tinashe
nguồn
Tôi xin lỗi nhưng bạn đã tìm thấy con đường này ở đâu?
— deadfish
4

Bạn chỉ cần ghi đè android:textAppearancekiểu. Vì TabLayout sử dụng textAppearance. đây là đoạn mã kiểu dáng nhỏ.

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

Và nếu bạn không muốn tham chiếu từ Apptheme của mình, bạn có thể chỉ định trực tiếp cho TabLayout bằng cách sử dụng đoạn mã Dưới đây.

 <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
nguồn
đảm bảo rằng bạn đang sử dụng AppCompact với tư cách là phụ huynh
— Moinkhan
ok, bạn đúng, nó hoạt động. nhưng chỉ dành cho -tab "không được chọn". văn bản tab đã chọn luôn là màu đen đối với tôi
— sebastian
Được rồi, không có mã nào trong thư viện thiết kế có sẵn để gán màu văn bản của tab đã chọn trong thư viện hỗ trợ thiết kế. Vì vậy, đối với màu văn bản tab đã chọn, bạn phải đặt nó bằng thuộc tính ..
— Moinkhan
1

Đối với các tab tùy chỉnh, chúng tôi phải ghi đè những thứ sau: 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 // cho màu tab đã chọn 3) tabIndicatorColor // màu cho chỉ báo tab

   <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
nguồn
1

Với những thứ TabLayoutđược cung cấp trong Thư viện Thành phần Vật liệu, bạn có thể:

  • Sử dụng một kiểu tùy chỉnh 
  <com.google.android.material.tabs.TabLayout
      style="@style/My_Tablayout"
      ..>

và theo phong cách của bạn, hãy sử dụng tabTextColorvới một bộ chọn.

<!-- 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>
  • Sử dụng app:tabTextColortrong bố cục của bạn:
  <com.google.android.material.tabs.TabLayout
      app:tabTextColor="@color/tab_layout_selector"
      ..>

nhập mô tả hình ảnh ở đây

— Gabriele Mariotti
nguồn
0

Cách dễ dàng và hoàn hảo:

Trong tệp xml ::

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

Trong tệp giá trị-kiểu:

lưu ý: "cairo_semibold" là phông chữ bên ngoài, bạn có thể thay thế bằng phông chữ của mình.

<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
nguồn
0

cách tốt nhất hoặc ngắn gọn và đơn giản là làm cho thanh ứng dụng tùy chỉnh như

 <?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
nguồn
0

Thuộc tính 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" />

Trong Kotlin có lập trình

(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
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.