Ripple Effect in Android for Button

Ripple Effect in Android for Button

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

ripple_effect.xml 

<?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

<?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

<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>

Screen: