标签栏布局活动标签的文本颜色与原色相同 [英] Tabbar layout active tab textcolor is same as primary color

问题描述

这是我的风格

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

我正在定义一个带有标签栏和viewpager的布局:

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.

需要一个建议:如您所见，我没有在textview中显式维护android:textAppearence.我希望父母的主题会决定这一点.可以吗?还是最好明确定义外观?

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?

该如何更改?

推荐答案

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

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>

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

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

这篇关于标签栏布局活动标签的文本颜色与原色相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！