标签栏布局活动标签文本颜色与原色相同

Question

这是我的风格：

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

我正在定义一个带有 tabbar 和 viewpager 的布局：

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

一切正常，除了标签栏布局中的活动按钮文本颜色与背景颜色相同，因此不可见。

需要一个建议：如您所见，我没有在 textview 中明确维护 android:textAppearence。我期待 parent 中的主题会决定这一点。这样可以还是明确定义外观更好？

我该如何更改？

Answer 1

根据 Material 组件库，这是从 v1.1.0-alpha01 开始的正常行为。您可以通过设置 TabLayout 的 normal 和 selected 文本颜色来更改默认行为，如下所示：

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

更新： 根据，由于 tabSelectedTextColor 已弃用，您可以使用如下选择器（例如):

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>

并将其设置为 TabLayout 作为 tabTextColor

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

Answer 2

TabLayout 上的文本颜色基于 tabTextColor 属性。

默认颜色由此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>

您可以检查所选文本的颜色是?attr/colorPrimary。
您可以在布局或样式中提供自定义选择器：

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

标签栏布局活动标签文本颜色与原色相同

Tabbar layout active tab textcolor is same as primary color

android

android-layout

android-tablayout

material-components-android