TabLayout（Androidデザインライブラリ）テキストの色

回答:

256

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

さらに、さらにスタイルを設定するために、tabIndicatorColorやtabIndicatorHeightなどの属性があります。

コード内：

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

この古い方法はAPI23で非推奨になっているため、代替手段は次のとおりです。

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);
— フェ・ル
ソース
@Fe Le実用的に変更したい場合はどうすればよいですか？
— PriyankaChauhan 2016
@pcpriyankaヒントをありがとう、コードで選択された色と選択されていない色を定義する簡単な方法で答えを更新しました。
— Fe Le
81

テキストスタイルと選択したテキストの色を上書きするスニペットコードは次のとおりです

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

そして、これがレイアウトのスニペットコードです

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MyCustomTabLayout" />
— Chuehnone
ソース
1
ありがとう-これは私のために働きます。tabSelectedTextColorは、タブの下の線の色であり、タブを選択したときのタブのテキストであることを指摘するのと同じです。
— サイモン
なぜWidget.Design.TabLayoutを継承しているのですか？
— SpaceMonkey 2015年
1
ここTabLayoutで「スタイル」を使用する必要があるのはなぜですか？「android：theme」を使用すると機能しないのはなぜですか？
— SpaceMonkey 2015年
@Spacemonkey Widget.Design.TabLayoutには、「tabIndicatorColor」、「tabIndicatorHeight」などのタブの基本スタイルが含まれているため
— sweetrenard 2015年
@sweetrenardああ、それで「android：theme」で指定したテーマを上書きしますか？
— SpaceMonkey 2015年
5

上記のすべての答えは正しいですが、デフォルトのスタイルをオーバーライドして、変更したい特定の要素のみを変更する方が良いと思います。以下の例では、テキストが太字になります。

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

次に..、

app:tabTextAppearance="@style/Widget.TabItem"
— ティナーシェ
ソース
申し訳ありませんが、この方法はどこで見つけましたか？
— デッドフィッシュ2016年
4

android:textAppearanceスタイルを上書きするだけです。TabLayoutはtextAppearanceを使用するためです。これがスタイルの小さなスニペットコードです。

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

また、Appthemeから参照したくない場合は、Belowスニペットを使用してTabLayoutに直接指定できます。

 <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/my_tab_text"
            app:tabIndicatorHeight="48dp"/>
— モイカン
ソース
AppCompactを親として使用していることを確認してください
— Moinkhan 2015年
わかりました、あなたは正しいです、それは働きます。ただし、「選択されていない」タブのみです。選択したタブテキストは私にとって常に黒です
— セバスチャン2015年
デザインサポートライブラリで選択したタブのtextColorを割り当てるために使用できるコードがデザインライブラリにありません。だから、選択したタブのテキストの色についてあなたは、プロパティを使用して、それを設定する必要が...
— Moinkhan
1

カスタムタブの場合、以下をオーバーライドする必要があります：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 //選択したタブの色3）tabIndicatorColor //タブインジケーターの色

   <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
ソース
1

TabLayout提供マテリアルコンポーネントライブラリすることができます：

  • カスタムスタイルを使用する 
  <com.google.android.material.tabs.TabLayout
      style="@style/My_Tablayout"
      ..>

そしてあなたのスタイルでtabTextColorセレクターでを使用してください。

<!-- 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>
  • app:tabTextColorレイアウトでを使用します。
  <com.google.android.material.tabs.TabLayout
      app:tabTextColor="@color/tab_layout_selector"
      ..>

ここに画像の説明を入力してください

— ガブリエレマリオッティ
ソース
0

簡単で完璧な方法：

xmlファイル内::

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

values-stylesファイルの場合：

注：「cairo_semibold」は外部フォントであるため、自分のフォントに置き換えることができます。

<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
ソース
0

最良または短くて簡単な方法は、次のようなカスタムアプリバーを作成することです

 <?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
ソース
0

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

Kotlinでプログラム的に

(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
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.