Android Material Design Ripple Effect tutorial

In Android  |  Last Updated on Wed, 14 Sep 2016

In this tutorial I am going to talk about Android Material Design Ripple Effect  tutorial . Ripple effect only show on device running lollipop and above. you can add ripple effect or animation in your android, layouts, buttons, textviews, etc. and you can also change its color.Ripple Effect may be of different types like circular, rectangle etc.RippleDrawable class that shows a ripple effect in response to state changes. There are more than one way to do it. Let’s  see how to do ripple effect in Android.

Prerequisites:

• JDK 7.0 or Above
• Android Studio 2.0

Steps to Follow:
Step 1: Create a New Android Studio project name Ripple1.
Step 2: Select minimum API level 21  as Ripple Effect or Animation works on and Above the Lolipop version.
Step 3: Select Blank Activity and Give your layout xml name is activity_main and click finish.
Inside Drawable folder write the following code. A touch feedback drawable may contain multiple child layers, including a special mask layer that is not drawn to the screen. A single layer may be set as the mask from XML by specifying its android:id value as  mask.

<?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="#0198E1"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#0198E1"/>
</shape>
</item>
</ripple>

 
 Step 4: Inside activity_main.xml  write the following code.
 

<?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:background="#fff"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Click to see ripple effect" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ripple"
android:padding="16dp"
android:text="Click Here" />
 
<Button
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="16dp"
 android:background="@drawable/ripple"
 android:padding="16dp"
 android:text="Click here"/>

 </LinearLayout>

Now compile and  test the application in real device.