web-dev-qa-db-ja.com

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

Android Designライブラリの新しいTabLayoutを使用しています。 tabLayout.setTabTextColors(colorstatelist) を使用してtextcolor状態リストを設定できました

Styles.xmlを使用して同じことを実現するにはどうすればよいですか？

androidandroid-design-libraryandroiddesignsupport
83
sebastian

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

この古い方法はAPI 23で廃止されるため、代替手段は次のとおりです。

tabLayout.setTabTextColors(
    ContextCompat.getColor(context, R.color.your_unselected_text_color),
    ContextCompat.getColor(context, R.color.your_selected_text_color)
);
250
Fe Le

以下は、テキストスタイルと選択したテキストの色をオーバーライドするスニペットコードです。

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

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

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

それから..、

app:tabTextAppearance="@style/Widget.TabItem"
5
Tinashe

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

カスタムタブの場合、次をオーバーライドする必要があります。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>
1
Sandeep Sankla

簡単で完璧な方法：

Xmlファイルで::

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

値スタイルファイル：

注：「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>
0
osama astal

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

 <?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>
0
Vithani Ravi