Ripples on a shape with a transparent background

Sudara picture Sudara · Apr 4, 2015 · Viewed 21.7k times · Source

I am using the following shape in my app

<?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="oval" >
            <solid android:color="@color/primary_light"/>
            <size android:height="80dp" android:width="80dp"/>
        </shape>
    </item>

    <item android:state_focused="true">
        <shape android:shape="oval">
            <stroke android:color="@color/primary_light" android:width="5dp"/>
            <size android:height="80dp" android:width="80dp"/>
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent"/>
            <size android:height="80dp" android:width="80dp"/>
        </shape>
    </item>
</selector>

It is there in my drawable folder. Now I am updating my app to Lollipop and I wish to give a ripple feedback on the circular button that I used. So in drawable-v21 folder I changed it to a ripple selector:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/primary_light">
    <item>
        <selector>
            <item android:state_focused="true">
                <shape android:shape="oval">
                    <stroke android:color="@color/primary_light" android:width="5dp"/>
                    <size android:height="80dp" android:width="80dp"/>
                </shape>
            </item>

            <item android:id="@android:id/mask">
                <shape android:shape="oval">
                    <solid android:color="@android:color/transparent"/>
                    <size android:height="80dp" android:width="80dp"/>
                </shape>
            </item>
        </selector>
    </item>
</ripple>

But unfortunately the ripple effect is not generated by using the above drawable in Lollipop. Is it because of the <solid android:color="@android:color/transparent"/>?

Can anyone show me where I have go wrong? Thanks

Answer

Sudara picture Sudara · Apr 14, 2015

After a few trial and errors it seems I have misunderstood the hierarchy of the selector and item.

The following works perfectly.

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/primary_light">
        <item android:id="@android:id/mask">
               <shape android:shape="oval">
                       <solid android:color="@android:color/white"/>
                       <size android:height="80dp" android:width="80dp"/>
               </shape>
        </item>
</ripple>