TabLayout 在不应该的时候有背景色

Question

我正在关注 this 关于将 ViewPager2 与 TabLayout 作为点一起使用的文章，它大部分工作正常，但我有一个小 UI 问题，即 TabLayout 的背景颜色会冲掉未选择的点。

我的activityUI:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingHorizontal="10dp">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/intro_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/intro_tlPageIndicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:tabBackground="@drawable/pager_dot_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp"
        app:tabPaddingStart="8dp"
        app:tabPaddingEnd="8dp" />
</FrameLayout>

drawable/pager_dot_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pager_selected_dot" android:state_selected="true" />
    <item android:drawable="@drawable/pager_default_dot" />
</selector>

drawable/pager_selected_dot

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="6dp"
            android:useLevel="false">
            <solid android:color="#8fa6b5"/>
        </shape>
    </item>
</layer-list>

drawable/pager_default_dot

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="6dp"
            android:useLevel="false">
            <solid android:color="#e8edf0"/>
        </shape>
    </item>
</layer-list>

style.xml:

<style name="App.Material" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:navigationBarColor">@color/primary</item>
    <item name="android:textColorPrimary">@color/textColor</item>
    <item name="android:textColorSecondary">@color/mutedTextColor</item>
    <item name="actionModeCloseDrawable">@drawable/close</item>
    <item name="actionModeStyle">@style/ActionModeStyle</item>
    <item name="actionMenuTextColor">#ffffff</item>
    <item name="colorAccent">@color/primary</item>
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary</item>
    <item name="colorError">@color/error</item>
    <item name="colorPrimaryVariant">@color/primary</item>
    <item name="colorSecondaryVariant">@color/primary</item>
    <item name="colorSurface">@color/cardViewBackgroundColor</item>
    <item name="colorOnPrimary">#ffffff</item>
    <item name="colorOnSecondary">#ffffff</item>
    <item name="colorOnBackground">@color/textColor</item>
    <item name="colorOnError">#ffffff</item>
    <item name="colorOnSurface">@color/textColor</item>
    <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.LargeComponent</item>
    <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.MediumComponent</item>
    <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.SmallComponent</item>
    <item name="windowActionModeOverlay">true</item>
    <item name="windowNoTitle">true</item>
</style>

Answer 1

虽然我没能重现问题，但您可以尝试以下方法之一：

解决方案一：将tabLayout的背景设置为透明色

<com.google.android.material.tabs.TabLayout
    ...
    android:background="@android:color/transparent"

解决方案 2： 将 tabLayout 的背景设置为透明矩形 drawable

创建：transparent_rect.xml@res/drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#00000000" />
</shape>

设置背景为tabLayout

<com.google.android.material.tabs.TabLayout
    ...
    android:background="@drawable/transparent_rect"

Answer 2

@Zain 帮助我走上了找到解决方案的正确道路，看来我用于 colorSurface 的颜色是罪魁祸首，我把它去掉了，我的点现在按预期显示了。

TabLayout 在不应该的时候有背景色

TabLayout has a background color when it shouldn't

android

android-tablayout

android-viewpager2