How to show a Dialog on Android using the reveal effect from material design?

Question

I have an Activity with a FloatingActionButton. When I press the FAB, an AlertDialog is shown. I want to animate its appearance by using something like reveal effect or curved motion from Android's Material Design. The documentation only has an example for changing visibility of existing views.

How can I achieve that for an AlertDialog?

Answer 1

I did something similar by calling the dialog's setOnShowListener before I show the dialog. I still need to refine the animation, but it is a start:

dialogToAnimate.setOnShowListener(new OnShowListener() {
    @Override public void onShow(DialogInterface dialog) {
        // Remember that ViewAnimationUtils will not work until API 21.
        final View view = dialogToAnimate.getWindow().getDecorView();
        final int centerX = view.getWidth() / 2;
        final int centerY = view.getHeight() / 2;
        // TODO Get startRadius from FAB
        // TODO Also translate animate FAB to center of screen?
        float startRadius = 20;
        float endRadius = view.getHeight();
        Animator animator = ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius);
        animator.setDuration(1000);
        animator.start();
    }
});

Answer 2

If you have a custom view (defined in a XML) you can try this:

AlertDialog a = new AlertDialog.Builder(this)...blablabla;
View v = a.findViewById(R.layout.example);

// get the center for the clipping circle
int cx = (v.getLeft() + v.getRight()) / 2;
int cy = (v.getTop() + v.getBottom()) / 2;

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

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

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

To hide it using the reverse animation:

View v = <yourAlertDialog>.findViewById(R.layout.example);

// get the center for the clipping circle
int cx = (v.getLeft() + v.getRight()) / 2;
int cy = (v.getTop() + v.getBottom()) / 2;

// get the initial radius for the clipping circle
int initialRadius = v.getWidth();

// create the animation (the final radius is zero)
Animator anim = ViewAnimationUtils.createCircularReveal(v, cx, cy, initialRadius, 0);

// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        v.setVisibility(View.INVISIBLE);
    }
});

// start the animation
anim.start();