How to add ripple effect to “entire” cardview in android

Question

I am new to Android programming. I want to add ripple effect to cardview. Actually I found the solution, however, after touching cardview element, it seems that the effect doesn't cover entire cardview. I mean that the effect fades out suddenly and doesn't reach the edges of the cardview. The result which I'm getting is as follows:

While I want something like this one posted in this blog post .

This is the approach I have tried:

cardview_item.xml

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        style="@style/MyCardViewStyle"
        android:layout_height="280dp"
        android:id="@+id/appletCard"
        app:cardBackgroundColor="@color/cardDefaultBg"
        android:clickable="true"
        android:foreground="@drawable/ripple_effect"
        >

      //Some TextViews here ...

</android.support.v7.widget.CardView>

And this is the ripple_effect.xml in the drawable-v21 package:

<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item
    android:id="@android:id/mask"
    android:drawable="@android:color/white"/>
</ripple>

If it is important, I use support library.

Answer 1

You should apply mask to your ripple. Try this:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
            <corners android:radius="@dimen/card_corner_radius" />
        </shape>
    </item>
</ripple>

Answer 2

You can use android default ripple effect with "?attr/selectableItemBackground"

            <android.support.v7.widget.CardView
                android:id="@+id/appletCard"
                android:layout_width="match_parent"
                android:layout_height="280dp"
                style="@style/MyCardViewStyle"
                android:clickable="true"
                android:foreground="?attr/selectableItemBackground"
                app:cardBackgroundColor="@color/cardDefaultBg">


            </android.support.v7.widget.CardView>

Or create custom

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/RippleColor" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/RippleColor" />
        </shape>
    </item>

    <item>
        <shape
            android:shape="rectangle">
            <solid android:color="@color/backColor" />
        </shape>
    </item>
</selector>

If you want that effect reach the edges, use this library that provides you OnRippleCompleteListener , so you can wait until it finish effect and reach the edges

Answer 3

After checking the similar applications which are using ripple effect for their ui elements, I found out that the effect has changed over different versions of Android. The case I'm looking for is used in Lollipop Android devices. So as I ran the emulator on API 25 (Nogut), I didn't get the desired result.

Thank you all for ur responses.