How to achieve an "overflowing" riplle-effect in android

Question

I saw this kind of riplle effect in YouTube's android app. I want to get the same effect working in my app. Should I create an own Ripple-Drawable or is there a different approach? Actually I already tried "?attr/selectableItemBackground" but the effect is much different.

This is how my ripple effect looks:

Answer 1

You can create ripple from selector .See below example .

1.This is for API 21 and above, Create this in drawable

custom_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <shape android:shape="rectangle">
        <solid android:color="@color/line" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent" />
    </shape>
</item>
</selector>

2.Add same name file in drawable-v21 for below 21 API.

v1/custom_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/line">

<item
    android:id="@android:id/mask"
    android:drawable="@android:color/white" />
</ripple>

and finally set android:background="@drawable/custom_ripple" , where you want ripple.

Answer 2

Just add the value ?android:selectableItemBackgroundBorderless to android:foreground or android:background

Be sure to use the android namespace.