Android material design for ripple effect on click

Ripple effect is when a view is clicked, the view respond by displaying a wave like animation on top of the view.

ripple_effect.xml, place this in the drawable folder for api below 21

<?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">
            <corners android:radius="3dp" />
            <solid android:color="@color/colorPrimaryDark" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <padding android:padding="1dp" />
            <corners android:radius="5dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding android:padding="1dp" />
            <corners android:radius="5dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</selector>

ripple_effect.xml, place this in drawable-v21 for api 21 and above

<?xml version="1.0" encoding="UTF-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark">
    <item>
        <shape>
            <padding android:padding="1dp" />
            <corners android:radius="5dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</ripple>

The above ripple effect drawable can be applied to any views (Button, LinearLayout, RelativeLayout, etc) by setting the background to

android:background="@drawable/ripple_effect"

Search within Codexpedia

Custom Search

Search the entire web

Custom Search