Like Us on Facebook

Android Material Design Ripple Effect tutorial

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.

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 2 )

kuldip kotadiya:
Thanks for riple effect ..
suman mondal 8348006187:
please sir make a tutorial on json parsing to communicate between a php script and android app

    Leave a comment..

    Click to login.

    Subscribe Latest Information

    Most Popular Posts