How to achieve the following animation in android material design?

Question

Would like to achieve this animation in android.Appreciate any help.

Answer 1

I haven't tested this but it should work.

Add this dependency to your apps gradle file: compile 'com.github.ozodrukh:CircularReveal:1.1.1'

Declare these variables at the beginning of your activity:

LinearLayout mRevealView;
boolean hidden = true;

Add this in your onCreate method:

mRevealView = (LinearLayout) findViewById(R.id.reveal_items);
mRevealView.setVisibility(View.INVISIBLE);

In your FAB's onClick method, add this:

int cx = (mRevealView.getLeft() + mRevealView.getRight());
        int cy = mRevealView.getTop();
        int radius = Math.max(mRevealView.getWidth(), mRevealView.getHeight());

        //Below Android LOLIPOP Version
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            SupportAnimator animator =
                    ViewAnimationUtils.createCircularReveal(mRevealView, cx, cy, 0, radius);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            animator.setDuration(700);

            SupportAnimator animator_reverse = animator.reverse();

            if (hidden) {
                mRevealView.setVisibility(View.VISIBLE);
                animator.start();
                hidden = false;
            } else {
                animator_reverse.addListener(new SupportAnimator.AnimatorListener() {
                    @Override
                    public void onAnimationStart() {

                    }

                    @Override
                    public void onAnimationEnd() {
                        mRevealView.setVisibility(View.INVISIBLE);
                        hidden = true;

                    }

                    @Override
                    public void onAnimationCancel() {

                    }

                    @Override
                    public void onAnimationRepeat() {

                    }
                });
                animator_reverse.start();
            }
        }
        // Android LOLIPOP And ABOVE Version
        else {
            if (hidden) {
                Animator anim = android.view.ViewAnimationUtils.
                        createCircularReveal(mRevealView, cx, cy, 0, radius);
                mRevealView.setVisibility(View.VISIBLE);
                anim.start();
                hidden = false;
            } else {
                Animator anim = android.view.ViewAnimationUtils.
                        createCircularReveal(mRevealView, cx, cy, radius, 0);
                anim.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        mRevealView.setVisibility(View.INVISIBLE);
                        hidden = true;
                    }
                });
                anim.start();
            }
        }

Add this method to your activity:

private void hideRevealView() {
    if (mRevealView.getVisibility() == View.VISIBLE) {
        mRevealView.setVisibility(View.INVISIBLE);
        hidden = true;
    }
}

Create a new xml layout for the reveal, call it reveal_layout.xml and add this:

<io.codetail.widget.RevealFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize">

    //You can include whatever layout you want here
    <include layout="@layout/layout_you_want_to_show" />

</io.codetail.widget.RevealFrameLayout>

For this to work, it's imperative that you add this to the end of your activitys' layout:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <include layout="@layout/reveal_layout" />

</FrameLayout>

Hope this helps.