Reversing circular revel animation

Question

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?

Answer 1

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();
        }
    }