Custom Dialog with Circular Reveal Animation

This is a quick tutorial on how to make a full screen Custom Dialog with Circular Reveal Animation which I used in my recent app List it. Reveal is a new animation introduced in Android L.

Note: This animation require minimum SdkVersion 21.

First we will create a layout for our dialog and MainActivity.

dialog.xml

<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout
 xmlns:android=”http://schemas.android.com/apk/res/android"
 android:orientation=”vertical”
 android:layout_width=”match_parent”
 android:id=”@+id/dialog”
 android:layout_height=”match_parent”
 android:background=”@color/colorAccent”>
 <ImageView
 android:id=”@+id/closeDialogImg”
 android:layout_width=”30dp”
 android:layout_height=”30dp”
 android:layout_margin=”10dp”
 android:src=”@drawable/ic_close_black_24dp”
 android:tint=”#fff”/>
 <RelativeLayout
 android:layout_width=”match_parent”
 android:layout_height=”150dp”
 android:background=”#FFF”
 android:layout_centerInParent=”true”
 android:layout_marginEnd=”20dp”
 android:layout_marginStart=”20dp”
 android:orientation=”vertical”>
 <TextView
 android:layout_width=”wrap_content”
 android:layout_height=”wrap_content”
 android:layout_centerInParent=”true”
 android:text=”This is my Dialog”
 android:textSize=”24dp”/>
 </RelativeLayout>
</RelativeLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main"
    tools:context="beaststudio.in.revealanimation.MainActivity">


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="24dp"
        android:src="@drawable/ic_add_black_24dp"
        android:tint="#fff"
        />

</RelativeLayout>

Now all we have to do in java code is show the dialog on click of our FloatingActionButton.

FloatingActionButton fab;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                showDiag();
            }
        });
    }

Now we will create a method showDiag. In dialog.setOnShowListener we will call method revealShow(). revealShow() takes 3 arguments -your dialog view, boolean value (which will be true for opening the dialog and false when you close the dialog) and Dialog.

private void showDiag() {

    final View dialogView = View.inflate(this,R.layout.dialog,null);

    final Dialog dialog = new Dialog(this,R.style.MyAlertDialogStyle);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.setContentView(dialogView);

    ImageView imageView = (ImageView)dialog.findViewById(R.id.closeDialogImg);
    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            revealShow(dialogView, false, dialog);
        }
    });

    dialog.setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialogInterface) {
            revealShow(dialogView, true, null);
        }
    });

    dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {
        @Override
        public boolean onKey(DialogInterface dialogInterface, int i, KeyEvent keyEvent) {
            if (i == KeyEvent.KEYCODE_BACK){

                revealShow(dialogView, false, dialog);
                return true;
            }

            return false;
        }
    });



    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

    dialog.show();
}

Here comes the main part where we will code for circular reveal animation.

private void revealShow(View dialogView, boolean b, final Dialog dialog) {

    final View view = dialogView.findViewById(R.id.dialog);

    int w = view.getWidth();
    int h = view.getHeight();

    int endRadius = (int) Math.hypot(w, h);

    int cx = (int) (fab.getX() + (fab.getWidth()/2));
    int cy = (int) (fab.getY())+ fab.getHeight() + 56;


    if(b){
        Animator revealAnimator = ViewAnimationUtils.createCircularReveal(view, cx,cy, 0, endRadius);

        view.setVisibility(View.VISIBLE);
        revealAnimator.setDuration(700);
        revealAnimator.start();

    } else {

        Animator anim =
                ViewAnimationUtils.createCircularReveal(view, cx, cy, endRadius, 0);

        anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                dialog.dismiss();
                view.setVisibility(View.INVISIBLE);

            }
        });
        anim.setDuration(700);
        anim.start();
    }

}

style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">

        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowBackground">@color/colorAccent</item>
    </style>
</resources>

Here is a github repository. https://github.com/divyanshub024/RevealAnimation

Comment down below for any question.