How to Implement Ripple Effect in Android

In this tip, I’m going to show you to implement ripple effect/animation in your android application. Now, you can easily add ripple effect/animation in your android, layouts, buttons, textviews, etc. and you can also change its color. Note that, this ripple effect will only show on device running lollipop and above.

 

Here, I have mentioned two different methods to implement ripple animation in your android application.

Method 1 - To Implement Ripple Effect/Animation in Android

To implement effect on press/click just add android:background="?attr/selectableItemBackground" or android:background="?attr/selectableItemBackgroundBorderless" in android View or ViewGroup as background.

Method 2: To Implement Ripple Effect/Animation in Android

Using this method, you can customize ripple effect color. First, you have to create an xml file in your drawable resource directory. Create a ripple_effect.xml file and add following code.
res/drawable/ripple_effect.xml

	<?xml version="1.0" encoding="utf-8"?>
	<ripple xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:color="#af0c0e"
	tools:targetApi="lollipop">
	<item android:id="@android:id/mask">
	<shape android:shape="rectangle">
	<solid android:color="#af0c0e" />
	</shape>
	</item>
	</ripple>

view raw ripple_effect.xml hosted with ❤ by GitHub

And set background to above drawable resource file. Final code of xml layout activity looks like this.
res/layout/ripple_animation.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical">
	<FrameLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="#fff"
	android:elevation="6dp">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="100dp"
	android:background="?attr/selectableItemBackground"
	android:clickable="true"
	android:gravity="center"
	android:padding="10dp"
	android:text="Ripple Animation/Effect in Android" />
	</FrameLayout>
	<FrameLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="10dp"
	android:background="#fff"
	android:elevation="6dp">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="100dp"
	android:background="@drawable/ripple_effect"
	android:clickable="true"
	android:gravity="center"
	android:padding="10dp"
	android:text="Ripple Animation/Effect in Android" />
	</FrameLayout>
	<FrameLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="10dp"
	android:background="#fff"
	android:elevation="6dp">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="100dp"
	android:background="?attr/selectableItemBackground"
	android:clickable="true"
	android:gravity="center"
	android:padding="10dp"
	android:text="Ripple Animation/Effect in TextView" />
	</FrameLayout>
	<FrameLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="10dp"
	android:background="#fff"
	android:elevation="6dp">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="100dp"
	android:background="@drawable/ripple_effect"
	android:clickable="true"
	android:gravity="center"
	android:padding="10dp"
	android:text="Ripple Animation/Effect in TextView" />
	</FrameLayout>
	</LinearLayout>

view raw ripple_animation.xml hosted with ❤ by GitHub