Search code examples
androidmaterial-designandroid-tablayout

Ripple effect on white tabLayout

Ripple Effect on android tabs is by default in white color. I want to add a ripple effect on tablayout but my tabs background is white already and the ripple effect is invisible on it.

 <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_gravity="end"
            android:layout_weight="1"
            android:background="@color/white"
            app:layout_collapseMode="pin"
            app:tabMode="fixed"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabBackground="?attr/selectableItemBackground"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabTextColor="#222"
            />

Is there a way to change color of tabLayout ripple effect so it could be seen even in white background?

Solution

  • You need to set background using app:tabBackground in TabLayout tag.

    <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@drawable/tab_selector_ripple">

    tab_selector_ripple.xml

    <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#0e0e0e">
    <item android:drawable="@color/white" />

</ripple>

    Let me know if you have more queries regarding this?