Reveal Animation Example Introduced In Android 5.0
Whenever you show or hide a group of UI elements or any view sometimes it will require some continuation for user’s ease. This is the scenario when reveal animation comes in the picture. Android 5.0, the lollipop version API level 21, introduced ViewAnimationUtils.createCircularReveal() method which returns an Animator which can animate a clipping circle, to animate a clipping circle to reveal or hide a view.
Today I am showing you an example in which you can see the reveal animation effect on clicking a toggle button. Follow the steps below:
Step1 : Create a new android project in your android IDE.
Step2 : Add a image for your image view in drawable folder. I have added the thumbnail image of this post.
Step3 : Write following into your main activity class:
package com.example.revealanimationexample;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.ToggleButton;
public class MainActivity extends Activity {
TextView title;
ImageView image;
ToggleButton btnHideShow;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
title = (TextView)findViewById(R.id.title);
image = (ImageView) findViewById(R.id.image);
btnHideShow = (ToggleButton) findViewById(R.id.hideshow);
btnHideShow.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
if(isChecked){
hide(title);
hide(image);
}else{
show(title);
show(image);
}
}
});
}
private void show(final View view) {
int cx = (view.getLeft() + view.getRight()) / 2;
int cy = (view.getTop() + view.getBottom()) / 2;
int finalRadius = Math.max(view.getWidth(), view.getHeight());
Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy,
0, finalRadius);
anim.setDuration(1000);
view.setVisibility(View.VISIBLE);
anim.start();
}
private void hide(final View view) {
int cx = (view.getLeft() + view.getRight()) / 2;
int cy = (view.getTop() + view.getBottom()) / 2;
int initialRadius = view.getWidth();
Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy,
initialRadius, 0);
anim.setDuration(1000);
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.INVISIBLE);
}
});
anim.start();
}
}
Step4 : Write following into main xml:
<LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="com.example.androidrevealeffect.MainActivity" > <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Reveal Animation Effect" android:textSize="28dp" android:textStyle="bold" /> <ToggleButton android:id="@+id/hideshow" android:layout_width="match_parent" android:layout_height="wrap_content" android:textOn="Show Animation" android:textOff="Hide Animation" /> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/thumb" android:background="@android:color/darker_gray" /> </LinearLayout>
Step5 : Run for the output as below:
Don’t forget to checkout my previous post on Activity transition.
Related Posts
Top 15 Best Android Apps For C Programming | 2018 Exclusive
Android Studio Introduction
Applying MediaCodec On An Open Source Android Audio Player
5 Most Used Android Testing Frameworks
Extracting Colors In Android 5.0 – “The Palette API”
Animations In Android KitKat
The Android Studio – An Introduction With The HelloWorld App
SlidingPaneLayout Example