Feb 20, 2015

Example of Reveal animations on Android 5.0

Android 5.0, added in API level 21, introduce ViewAnimationUtils.createCircularReveal (View view, int centerX, int centerY, float startRadius, float endRadius) method returns an Animator which can animate a clipping circle, to animate a clipping circle to reveal or hide a view.


package com.example.androidrevealeffect;

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);
    }

   }
  });
 }

 // To reveal a previously invisible view using this effect:
 private void show(final View view) {
  // get the center for the clipping circle
  int cx = (view.getLeft() + view.getRight()) / 2;
  int cy = (view.getTop() + view.getBottom()) / 2;

  // get the final radius for the clipping circle
  int finalRadius = Math.max(view.getWidth(), view.getHeight());

  // create the animator for this view (the start radius is zero)
  Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy,
    0, finalRadius);
  anim.setDuration(1000);

  // make the view visible and start the animation
  view.setVisibility(View.VISIBLE);
  anim.start();
 }

 // To hide a previously visible view using this effect:
 private void hide(final View view) {

  // get the center for the clipping circle
  int cx = (view.getLeft() + view.getRight()) / 2;
  int cy = (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, cx, cy,
    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();
 }

}


<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="android-coding.blogspot.com"
        android:textSize="28dp"
        android:textStyle="bold" />

    <ToggleButton
        android:id="@+id/hideshow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textOn="Show"
        android:textOff="Hide" />
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher"
        android:background="@android:color/darker_gray" />

</LinearLayout>

No comments:

Post a Comment

Infolinks In Text Ads