Ripple Animation In Android 5.0

Among many other new features, Android Lollipop has brought a series of new animations that can be added to your apps. In this tutorial we will see how to add circular reveal ripple effect in your application.

The Ripple touch effect has been introduced in Android 5.0 (API level 21) with material design. Touch feedback in material design gives a visual confirmation at the point of contact when users interact with UI elements.

Here the touch effect animation for buttons use the new RippleDrawable class, which transitions between different states of ripple effect. So in general, the ripple effect for regular buttons will work by default. But if we have custom button we have to add the touch feedback for own drawables and for custom buttons by simply wrapping them in a ripple element.

Let’s follow the steps below to create ripple effect on a button click.

Step1: Create a new project in android studio with API level 21.

Step2: Add following image to your drawable folder

lollipop2

Step3: Write the following into you main.xml:

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<ImageView
android:id="@+id/image"
android:src="@drawable/lollipop2"
android:layout_width="match_parent"
android:layout_height="250dp"
android:elevation="5dp"/>

<Button
android:id="@+id/button"
android:text="Click to see Ripple Effect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/image"/>

</RelativeLayout>

 

 

Step4: Write the following in MainActivity.java:

 

package com.example.myfirstapplication;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

private ImageView mImageView;
private Button mButton;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView( R.layout.main);
mImageView = (ImageView) findViewById( R.id.image );
mButton = (Button) findViewById( R.id.button );
mButton.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View view) {
if( mImageView.getVisibility() == View.VISIBLE ) {
hideImageCircular();
}
else {
revealImageCircular();
}
}
});
}

private void hideImageCircular() {
int x = getX();
int y = getY();
int radius = getRadius();

Animator anim = ViewAnimationUtils.createCircularReveal(mImageView, x, y, radius, 0);

anim.addListener(new AnimatorListenerAdapter() {

@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mImageView.setVisibility( View.INVISIBLE );
}
});

anim.start();
}

private void revealImageCircular() {
int x = getX();
int y = getY();
int radius = getRadius();

Animator anim = ViewAnimationUtils.createCircularReveal(mImageView, x, y, 0, radius);

anim.setDuration( 1000 );
anim.addListener( new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
mImageView.setVisibility( View.VISIBLE );
}
});

anim.start();
}

private int getX() {
return ( mImageView.getLeft() + mImageView.getRight() ) / 2;
}

private int getY() {
return ( mImageView.getTop() + mImageView.getBottom() ) / 2;
}

private int getRadius() {
return mImageView.getWidth();
}
}

 

 

Step5: Run for the output

ripple1

ripple2

Leave a Comment: