Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create Circular Reveal Effect like WhatsApp in Android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.62k
    Comment on it

    While sending a photograph/audio/video/contact through WhatsApp in Android, we have to use a attach button at the top right corner, clicking on that button makes a circular reveal effect. To show or hide a group of UI elements we called it a Reveal Animation. Android API level 21, introduced ViewAnimationUtils.createCircularReveal() method to achieve this animation.


    The ViewAnimationUtils.createCircularReveal(view, cx, cy, initialRadius, 0) method enables you to animate a clipping circle to reveal or hide a view.
    view - view to reveal
    cx - start X coordinate of reveal
    cy - start Y coordinate of reveal
    initialRadius - start radius. In most cases - 0
    endRadius - depends on your view's bounds

    btnRevealEffect.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    if (isChecked) {
    
                // To hide a previously visible view using this effect:
    
                        // get the center for the clipping circle
                        int cx = (view.getRight() + view.getRight()) / 2;
                        int cy = (view.getTop() + view.getTop()) / 2;
    
                        // get the initial radius for the clipping circle
                        int initialRadius = view.getWidth();
    
                        // create the animation (the final radius is zero)
                        Animator anim = null;
                        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
                            anim = ViewAnimationUtils.createCircularReveal(view, 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);
                                view.setVisibility(View.INVISIBLE);
                            }
                        });
    
                        // start the animation
                        anim.start();
                    } else {
    
                // To reveal a previously invisible view using this effect:
    
                        // get the center for the clipping circle
                        int cx = (view.getRight() + view.getRight()) / 2;
                        int cy = (view.getTop() + view.getTop()) / 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 = null;
                        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
                            anim = ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius);
                        }
    
                        // make the view visible and start the animation
                        view.setVisibility(View.VISIBLE);
                        anim.start();
                    }
    
                }
            });
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: