Material 带有 TabItem 的 TabLayout：波纹效果不起作用

Question

在我的布局中，我有一个 TabLayout，在 ViewPager 上方有两个 TabItem。一切都按预期工作，但是当我点击 TabItem 切换可见片段时，我没有涟漪效应。 这是我的布局：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        style="@style/Widget.MaterialComponents.TabLayout"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/white"
        app:tabBackground="@color/tab_bg_color"
        app:tabSelectedTextColor="@color/tab_sel_color"
        app:tabTextColor="@color/tab_text_color">

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="TAB ONE" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="TAB TWO" />

    </com.google.android.material.tabs.TabLayout>


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

这是我的 PagerAdapter 实现

 class UploadScreenPagerAdapter(fragmentManager: FragmentManager) : 
     FragmentPagerAdapter(
            fragmentManager,
            BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT
     ) {
         var fragOne = FragOne()
         var fragTwo = FragTwo()

         override fun getItem(position: Int): Fragment {
             return when (position) {
                 0 -> fragOne
                 1 -> fragTwo
                 else -> fragOne
             }
        }

        override fun getCount(): Int {
            return 2
        }

        override fun getPageTitle(position: Int): CharSequence? {
            return when (position) {
                0 -> "TAB ONE"
                1 -> "TAB TWO"
                else -> ""
            }
        }
    }

怎么了？

Answer 1

• 删除android:background="@color/white"

JAVA代码

void setTabRippleColor (ColorStateList color)

XML代码

你可以试试app:tabRippleColor。 在 TabLayout 部分添加以下内容。

app:tabRippleColor="@color/colorPrimary"  // or add your Hex code