Tabbar layout active tab textcolor is same as primary color

问题

This is my style:

<resources>

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>

  <style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
  </style>

  <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />

  <style name="ThemeOverlay.AppCompat.navTheme">
    <!-- Color of text and icon when SELECTED -->
    <item name="colorPrimary">#ffffff</item>
    <!-- Background color when SELECTED -->
    <item name="colorControlHighlight">@color/colorPrimary</item>

  </style>

</resources>

And I am defining a layout with tabbar and viewpager as:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <com.google.android.material.appbar.MaterialToolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      android:minHeight="?attr/actionBarSize"
      android:theme="?attr/actionBarTheme"
      android:title="@string/app_name" />

    <com.google.android.material.card.MaterialCardView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_marginLeft="4dp"
      android:layout_marginRight="4dp"
      android:layout_marginBottom="-2dp"
      android:theme="@style/Theme.MaterialComponents.DayNight"
      app:cardCornerRadius="4dp"
      app:cardElevation="4dp">
  <TextView
          android:id="@+id/moonset"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_below="@id/longi"
          android:layout_marginStart="5dp"
          android:layout_marginTop="2dp"
          android:layout_toEndOf="@+id/msicon"
          android:paddingTop="-2dp"
          android:text="@string/tv_sunst" />
      ....
    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.tabs.TabLayout
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      android:layout_height="40dp"
      android:background="?attr/colorPrimary"/>
  </com.google.android.material.appbar.AppBarLayout>


  <androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.MaterialComponents.DayNight"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Everything is working fine, except the active button in tabbar layout text color is same as the background color, hence invisible.

And one advice is needed: as you have seen, I am not explicitly maintioning android:textAppearence in textview. I am expecting theme in parent will decide that. Is this ok or it is better to define appearence explicitly?

How I can change this?

回答1:

The text color on the TabLayout is based on the tabTextColor attribute.

The default color is defined by this selector:

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

As you can check the color for the selected text is ?attr/colorPrimary.
You can provide a custom selector in your layout or in your style:

<com.google.android.material.tabs.TabLayout
    app:tabTextColor="@color/my_selector"
    ..>

回答2:

According Material Components Library, this is normal behavior starting from v1.1.0-alpha01. You can change the default behavior by setting the normal and selected text color of TabLayout like below:

app:tabSelectedTextColor="@android:color/black"
app:tabTextColor="@android:color/white"

Update: According suggestion of Mario, As tabSelectedTextColor is deprecated you can use a selector like below (As for example):

color/tab_text_color_selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@android:color/black" android:state_selected="true"/>
<item android:color="@android:color/white"/>
</selector>

And set it to TabLayout as tabTextColor

<com.google.android.material.tabs.TabLayout
    ...
    app:tabTextColor="@color/tab_text_color_selector"
    ...>

来源：https://stackoverflow.com/questions/60187396/tabbar-layout-active-tab-textcolor-is-same-as-primary-color