带有 TabItem 的材料 TabLayout：波纹效果不起作用答案

【问题标题】：Material TabLayout with TabItem : Ripple effect not working带有 TabItem 的材料 TabLayout：波纹效果不起作用
【发布时间】：2020-08-23 21:58:53
【问题描述】：

在我的布局中，我有一个 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 -> ""
            }
        }
    }

怎么了？

【问题讨论】：

你试过删除 app:tabBackground 吗？或者你需要把波纹放到 tab_bg_color

标签： android android-viewpager material-design android-tablayout material-components-android

【解决方案1】：

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

JAVA 代码

void setTabRippleColor（ColorStateList 颜色）

XML 代码

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

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

【讨论】：

@giozh 奇怪的情况，你删除了android:background="@color/white"