Circular Reveal Android Compat With Design Library 28

Question

How To Create A Circular Reveal Animation In Android With Design Library Version 28

I Saw few Classes Which They Are Have Reveal Word Like This Items :

android.support.design.circularreveal.CircularRevealFrameLayout
android.support.design.circularreveal.CircularRevealGridLayout
android.support.design.circularreveal.CircularRevealLinearLayout
android.support.design.circularreveal.CircularRevealRelativeLayout
android.support.design.circularreveal.cardview.CircularRevealCardView
android.support.design.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout

But I Don't Found Any Tutorial For That

Please Give Me Some Ways To Implement this Beautiful Animation With Design Library

Answer 1

I am not familiar with those views, but the way to create circular reveal is as follows:

val view= ... //Get your view
val cx = view.width / 2
val cy = view.height / 2
val finalRadius = Math.hypot(cx, cy)
val anim = ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius) //this is the important one here
anim.start()

Answer 2

Here's how to do it, with either version 28.0.0 of the Support library, or the new AndroidX library:

private <T extends View & CircularRevealWidget> void circularRevealFromMiddle(@NonNull final T circularRevealWidget) {
    circularRevealWidget.post(new Runnable() {
        @Override
        public void run() {
            int viewWidth = circularRevealWidget.getWidth();
            int viewHeight = circularRevealWidget.getHeight();

            int viewDiagonal = (int) Math.sqrt(viewWidth * viewWidth + viewHeight * viewHeight);

            final AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.playTogether(
                    CircularRevealCompat.createCircularReveal(circularRevealWidget, viewWidth / 2, viewHeight / 2, 10, viewDiagonal / 2),
                    ObjectAnimator.ofArgb(circularRevealWidget, CircularRevealWidget.CircularRevealScrimColorProperty.CIRCULAR_REVEAL_SCRIM_COLOR, Color.RED, Color.TRANSPARENT));

            animatorSet.setDuration(5000);
            animatorSet.start();
        }
    });
}

Posting the runnable might not be required depending on how you use it, but it helps with 2 potential issues:

• The View needs to be attached to the window at the point of calling CircularRevealCompat.createCircularReveal
• My example code calculates the middle of the View, which requires the View's width and height, and the post always runs after the View's onLayout so those will always be available this way.

Knowing that the reveal starts from the middle of the View, we also know that the View will be fully revealed when the radius of the reveal circle equals half of the View's diagonal.

CircularRevealCompat.createCircularReveal returns an Animator, similar to the old way of doing it (ViewAnimationUtils.createCircularReveal).

By default, there is no scrim color on the reveal animation. If you want to animate the scrim color as the View is being revealed, you need an ObjectAnimator of the special property CircularRevealWidget.CircularRevealScrimColorProperty.CIRCULAR_REVEAL_SCRIM_COLOR

You can easily create the reverse animation as well by swapping the startRadius and endRadius (and the scrim's start and end colors).