Ripple Effect (Touch animation) in Android for Button or Layout

How to achieve ripple effect or ripple animation using support library in Android?

Ripple effect is the part of material design and added in API level 21. It gives the beautiful animation when a button or a layout is touched.

Here we'll implement ripple effect for:

Button
LinearLayout and
FrameLayout

First of all we need to create a file colors.xml (if not present) in app -> res -> values to define all the necessary colors
colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="white">#FFFFFF</color>
    <color name="colorRipple">#A9A9F5</color>
</resources>

Now we need to create a drawable resource file and name it ripple_effect as shown below

Add the below code to your ripple_effect.xml (v21) file (for API level 21)

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

    <!-- for Button -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>

</ripple>

Add the below code to your ripple_effect.xml file (for API level 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/colorRipple" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</selector>

Now add a Button, LinearLayout and FrameLayout to your layout file and set background as drawable resource file ripple_effect.xml

Adding Button

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/refresh"
        android:textColor="@color/white"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/ripple_effect" />

Adding LinearLayout

    <LinearLayout
        android:id="@+id/llInviteOthers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:padding="8dp"
        android:clickable="true"
        android:background="@drawable/ripple_effect">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@mipmap/ic_refresh"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/refresh"
            android:layout_marginLeft="5dp"
            android:layout_marginStart="5dp"
            android:textColor="@color/white"
            android:layout_gravity="center_vertical"/>

    </LinearLayout>

Adding FrameLayout

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:padding="8dp"
        android:clickable="true"
        android:background="@drawable/ripple_effect">

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@mipmap/ic_refresh"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/refresh"
            android:layout_marginLeft="25dp"
            android:layout_marginStart="25dp"
            android:textColor="@color/white"
            android:layout_gravity="center_vertical"/>

    </FrameLayout>