TabLayout (Android Design Library) Цвет текста

Я использую новый TabLayout из библиотеки Android Design. Мне удалось установить список состояний текста, используя tabLayout.setTabTextColors(colorstatelist)

Как я могу добиться того же с помощью styles.xml?


android androiddesignsupport android-design-library
person sebastian    schedule 18.06.2015    source источник

Ответы (9)


arrow_upward
256
arrow_downward

Через атрибуты 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)
);
person Fe Le    schedule 30.08.2015
comment
@Fe Le, что, если я хочу измениться прагматично? - person PriyankaChauhan; 05.12.2016
comment
@pcpriyanka спасибо за совет, я обновил свой ответ, указав простой способ определить выбранный и невыбранный цвет в коде. - person Fe Le; 05.12.2016

arrow_upward
81
arrow_downward

Вот фрагмент кода для переопределения стиля текста и выбранного цвета текста

<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" />
person Chuehnone    schedule 01.07.2015
comment
Спасибо - это работает для меня. Просто хотел бы отметить, что tabSelectedTextColor — это цвет строки под вкладкой и текст вкладки, когда я выбрал вкладку. - person Simon; 21.09.2015
comment
Почему вы наследуете Widget.Design.TabLayout? - person SpaceMonkey; 27.10.2015
comment
почему мы должны использовать стиль здесь, на TabLayout? Почему это не работает, если я использую android:theme? - person SpaceMonkey; 31.10.2015
comment
@Spacemonkey, потому что Widget.Design.TabLayout содержит базовые стили для вкладок, такие как tabIndicatorColor, tabIndicatorHeight - person sweetrenard; 27.11.2015
comment
@sweetrenard о, так это переопределяет тему, которую я указываю в android:theme? - person SpaceMonkey; 28.11.2015
comment
Почему бы не использовать: ‹имя стиля=AppTabTextAppearance parent=TextAppearance.Design.Tab›? - person SafaOrhan; 08.12.2015

arrow_upward
5
arrow_downward

Все приведенные выше ответы верны, но я просто думаю, что лучше переопределить стили по умолчанию и изменить только тот элемент, который вы хотите изменить. Пример ниже сделает текст жирным:

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

Затем..,

app:tabTextAppearance="@style/Widget.TabItem"
person Tinashe    schedule 16.05.2016
comment
Я извиняюсь, но где Вы нашли этот путь? - person deadfish; 27.05.2016

arrow_upward
4
arrow_downward

Вам просто нужно переопределить стиль 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, вы можете напрямую указать 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"/>
person Moinkhan    schedule 18.06.2015
comment
убедитесь, что вы используете AppCompact в качестве родителя - person Moinkhan; 18.06.2015
comment
хорошо, вы правы, это работает. но только для невыбранной вкладки. выбранный текст вкладки всегда черный для меня - person sebastian; 18.06.2015
comment
Хорошо, в библиотеке дизайна нет кода, доступного для назначения textColor выбранной вкладки в библиотеке поддержки дизайна. Поэтому для выбранного цвета текста вкладки вы должны установить его с помощью свойства .. - person Moinkhan; 18.06.2015

arrow_upward
2
arrow_downward

Для пользовательских вкладок мы должны переопределить следующее: 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>
person Sandeep Sankla    schedule 27.11.2018

arrow_upward
1
arrow_downward

С 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"
      ..>

введите здесь описание изображения

person Gabriele Mariotti    schedule 23.09.2019

arrow_upward
0
arrow_downward

Простой и идеальный способ:

В 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>
person Eng.OsamaYousef    schedule 21.03.2019

arrow_upward
0
arrow_downward

лучший или короткий и простой способ — создать собственную панель приложений, например

 <?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>
person Vithani Ravi    schedule 20.06.2019

arrow_upward
0
arrow_downward

Атрибуты 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))
person Md Imran Choudhury    schedule 14.07.2020