Material TabLayout with TabItem : Ripple effect not working

Question

In my layout i have a TabLayout with two TabItem above a ViewPager. It all works as expected, but when i tap on a TabItem for switch visible fragment, i have no ripple effect. This is my layout:

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

And this is my PagerAdapter implementation

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

what's wrong?

Answer 1

• Remove android:background="@color/white"

JAVA Code

void setTabRippleColor (ColorStateList color)

XML Code

You can try with app:tabRippleColor. Add below in TabLayout section.

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