Material Design has changed the way users interact with the apps.
Reveal is a new animation introduced in Android L that animates the view’s clipping boundaries. Reveal animations provide users visual continuity when you show or hide a group of UI elements. This animation is often times used in conjunction with a floating action button.
The ViewAnimationUtils.createCircularReveal() method enables you to animate a clipping circle to reveal or hide a view.
Here is how it is done.
Layout
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="circular_reveal_demo1.coderzheaven.com.circularrevealdemo.MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <RelativeLayout android:id="@+id/content_main" 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:visibility="visible" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/activity_main"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Material Design Cicular Reveal Animation Demo" /> <ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="20dp" android:background="@drawable/android" android:visibility="gone" /> </RelativeLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" app:srcCompat="@android:drawable/ic_dialog_info" /></android.support.design.widget.CoordinatorLayout> |
We the user taps on the floating button, the image with appear with a circular reveal animation.
Now we will look at the Activity source code.
MainActivity
package com.coderzheaven.circularrevealdemo;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.os.Bundle;import android.support.design.widget.FloatingActionButton;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.View;import android.view.ViewAnimationUtils;import android.widget.ImageView;public class MainActivity extends AppCompatActivity { ImageView view; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); view = (ImageView) findViewById(R.id.img); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (view.getVisibility() == View.INVISIBLE) doCircularReveal(); else doExitReveal(); } }); } private void doCircularReveal() { // get the center for the clipping circle int centerX = (view.getLeft() + view.getRight()) / 2; int centerY = (view.getTop() + view.getBottom()) / 2; int startRadius = 0; // get the final radius for the clipping circle int endRadius = Math.max(view.getWidth(), view.getHeight()); // create the animator for this view (the start radius is zero) Animator anim = ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius); anim.setDuration(1000); // make the view invisible when the animation is done anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); } }); view.setVisibility(View.VISIBLE); anim.start(); } void doExitReveal() { // get the center for the clipping circle int centerX = (view.getLeft() + view.getRight()) / 2; int centerY = (view.getTop() + view.getBottom()) / 2; // get the initial radius for the clipping circle int initialRadius = view.getWidth(); // create the animation (the final radius is zero) Animator anim = ViewAnimationUtils.createCircularReveal(view, centerX, centerY, initialRadius, 0); anim.setDuration(1000); // make the view invisible when the animation is done anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); view.setVisibility(View.INVISIBLE); } }); // start the animation anim.start(); }} |
All Done. Check out the video above to see how it works.
Send your comments to coderzheaven@gmail.com.