Search code examples
androidreversecircularreveal

Reversing circular revel animation


I want to make a simple animation that I'll try to describe. At 1st there is this smallish circle in the middle of screen, then when you press it circular animation reveals a rectangular Button. I don't know if I did it the best way possible but here it is

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/circle_color"></solid>

    <size
        android:width="50dp"
        android:height="50dp"/>
</shape>

Layout for my fragment

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/fragments_container">

    <Button
        android:id="@+id/my_button"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@color/buttons_color"
        android:visibility="invisible"
        />

    <ImageView
        android:id="@+id/circle_image"
        android:layout_gravity="center"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:srcCompat="@drawable/circle" />

</FrameLayout>

Then inside my fragment

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    activity = (MainActivity) getActivity();
    final View fragments_container = activity.findViewById(R.id.fragments_container);

    final Button button = (Button) activity.findViewById(R.id.my_button);
    final ImageView image = (ImageView) activity.findViewById(R.id.circle_image);



    image.setOnClickListener(new ImageView.OnClickListener(){
        @Override
        public void onClick(View v) {
            Animator animator = ViewAnimationUtils.createCircularReveal(fragments_container,
                    image.getLeft() + image.getWidth() / 2,
                    image.getTop() + image.getHeight() / 2,
                    0,
                    button.getWidth());

            image.setVisibility(View.INVISIBLE);
            button.setVisibility(View.VISIBLE);
            animator.start();
        }
    });
}

So far everything works fine. Next I want to do reversed circular reveal animation - basically the same animation I just created just reversed so that in the end of it I would have my small circle and button would had disappeared.

Can anyone give me some hints how could I do it?


Solution

  • I have tried something to solve your problem hope it helps you.

    image.setOnClickListener(new ImageView.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                        revealShow(button, true);
                    }
                }
            });
    
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                        revealShow(image, false);
                    }
                }
            });
    

    // here is the revealShow method and you can change animation duration according to your requirement.

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        private void revealShow(View view, boolean isExpand) {
    
            int w = view.getWidth();
            int h = view.getHeight();
    
            int endRadius = (int) Math.hypot(w, h);
    
            int cx = (int) (image.getX() + (image.getWidth() / 2));
            int cy = (int) (image.getY() + (image.getHeight() / 2));
    
    
            if (isExpand) {
                Animator revealAnimator = ViewAnimationUtils.createCircularReveal(fragments_container, cx, cy, 0, endRadius);
    
                image.setVisibility(View.INVISIBLE);
                button.setVisibility(View.VISIBLE);
                revealAnimator.setDuration(500);
                revealAnimator.start();
    
            } else {
    
                Animator anim =
                        ViewAnimationUtils.createCircularReveal(fragments_container, cx, cy, endRadius, image.getWidth() / 2);
    
                anim.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        image.setVisibility(View.VISIBLE);
                        button.setVisibility(View.INVISIBLE);
                    }
                });
                anim.setDuration(500);
                anim.start();
            }
        }