How to Implement Custom Circular Reveal Animation Android in Material Design

Google’s new material design has brought new and exciting ways to delight app users with an appealing visual functions to implement in Android app. The custom circular reveal animation Android is a new animation introduced in Android L which animates view’s clipping boundaries.

In simple words, it provides user visual continuity when you hide or show any UI element or group of UI elements. For example, whenever you would like to show a group of UI elements, it will need some continuation for user’s ease. And, this is where Circular reveal animation Android comes in the picture.

In our today’s Android app tutorial, we’ll build a simple app to demonstrate how to implement circular reveal animation android.

Let’s Get Started

Open Android Studio and create a new project under file menu.

Select the targeted device and click on next.

In the next tab, select Empty Activity.

Start Code Integration

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#45B39D"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:text="Transition types"
android:textColor="@android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<Button
android:id="@+id/transition1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Explode transition" />
<Button
android:id="@+id/transition2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Explode with bounce transition" />
<Button
android:id="@+id/transition3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Slide from right transition" />
<Button
android:id="@+id/transition4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Slide top to bottom" />
</LinearLayout>

Transition_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/square_red"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/circle_24dp"
/>
<TextView
android:id="@+id/activity_title"
style="@style/Base.TextAppearance.AppCompat.Widget.ActionMode.Subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups" />
<Button
android:id="@+id/exit_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:layout_marginTop="50dp"
android:text="back to main screen" />
</LinearLayout>

Put 2 xml file in “transition” folder in resources, if you don’t find folder please create new folder with name “transition”.

Explode.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<explode
android:duration="500"
android:interpolator="@android:interpolator/bounce" />
</transitionSet>

Slide_from_top.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<slide
android:duration="500"
android:slideEdge="top" />
</transitionSet>

TransitionHelper.java

package com.spaceo.transitionanimation;
import android.app.Activity;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.util.Pair;
import android.view.View;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
class TransitionHelper {
public static Pair<View, String>[] createSafeTransitionParticipants(@NonNull Activity activity,
boolean includeStatusBar, @Nullable Pair... otherParticipants) {
View decor = activity.getWindow().getDecorView();
View statusBar = null;
if (includeStatusBar) {
statusBar = decor.findViewById(android.R.id.statusBarBackground);
}
View navBar = decor.findViewById(android.R.id.navigationBarBackground);
List<Pair> participants = new ArrayList<>(3);
addNonNullViewToTransitionParticipants(statusBar, participants);
addNonNullViewToTransitionParticipants(navBar, participants);
if (otherParticipants != null && !(otherParticipants.length == 1
&& otherParticipants[0] == null)) {
participants.addAll(Arrays.asList(otherParticipants));
}
return participants.toArray(new Pair[participants.size()]);
}
private static void addNonNullViewToTransitionParticipants(View view, List<Pair> participants) {
if (view == null) {
return;
}
participants.add(new Pair<>(view, view.getTransitionName()));
}
}

MainActivity.java

package com.spaceo.transitionanimation;
import android.content.Intent;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v4.util.Pair;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private Button transition1;
private Button transition2;
private Button transition3;
private Button transition4;
public static final String TRANSITION_TYPE="transition_type";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initControls();
}
private void initControls() {
transition1=(Button)findViewById(R.id.transition1);
transition2=(Button)findViewById(R.id.transition2);
transition3=(Button)findViewById(R.id.transition3);
transition4=(Button)findViewById(R.id.transition4);
transition1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent mIntent=new Intent(MainActivity.this, NextAcitivity.class);
mIntent.putExtra(TRANSITION_TYPE,1);
transitionTo(mIntent);
}
});
transition2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent mIntent=new Intent(MainActivity.this, NextAcitivity.class);
mIntent.putExtra(TRANSITION_TYPE,2);
transitionTo(mIntent);
}
});
transition3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent mIntent=new Intent(MainActivity.this, NextAcitivity.class);
mIntent.putExtra(TRANSITION_TYPE,3);
transitionTo(mIntent);
}
});
transition4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent mIntent=new Intent(MainActivity.this, NextAcitivity.class);
mIntent.putExtra(TRANSITION_TYPE,4);
transitionTo(mIntent);
}
});
}
@SuppressWarnings("unchecked")
void transitionTo(Intent i) {
final Pair<View, String>[] pairs = TransitionHelper.createSafeTransitionParticipants(this, true);
ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pairs);
startActivity(i, transitionActivityOptions.toBundle());
}
}

NextActivity.java

package com.spaceo.transitionanimation;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.transition.Explode;
import android.transition.Slide;
import android.transition.Transition;
import android.transition.TransitionInflater;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import static com.spaceo.transitionanimation.MainActivity.TRANSITION_TYPE;
public class NextAcitivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.transition_activity);
((Button)findViewById(R.id.exit_button)).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
onBackPressed();
}
});
int type = getIntent().getIntExtra(TRANSITION_TYPE,1);
switch (type){
case 1:
Explode explodeTransition = new Explode();
explodeTransition.setDuration(500);
getWindow().setEnterTransition(explodeTransition);
break;
case 2:
Transition explodeWithBounce = TransitionInflater.from(this).inflateTransition(R.transition.explode);
getWindow().setEnterTransition(explodeWithBounce);
break;
case 3:
Slide slideTransition = new Slide();
slideTransition.setDuration(500);
slideTransition.setSlideEdge(Gravity.RIGHT);
getWindow().setEnterTransition(slideTransition);
break;
case 4:
Transition slideFromTop = TransitionInflater.from(this).inflateTransition(R.transition.slide_from_top);
getWindow().setEnterTransition(slideFromTop);
break;
default:
break;
}
}
}

And done!

Be proud of yourself. Now, to challenge yourself, you can further use Staggered layout manager to create a grid with three columns, or experiment with Palatte API. Although, if you’ve building an app for your startup idea, then it’s better to consult with Android app development company or take help from expert developers to begin the development process.

Get a free copy of Circular Reveal Animation from Github.