How to make whatsapp type of animation for opening the menu from toolbar(actionbar)

Question

Description:

1. I recently updated whatsapp and noticed the animation for menu item clicked on toolbar. How to achieve this effect?
2. Are there any opens

Answer 1

Yes we can use the circular reveal effect now on 2.3+

We can achieve this effect by using this Circular Reveal Library.

adding the library dependency

 dependencies {
        compile ('com.github.ozodrukh:CircularReveal:1.3.1@aar') {
            transitive = true;
        }
    }

Use regular RevealFrameLayout & RevealLinearLayout don't worry, only target will be clipped :)

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

    <!-- Put more views here if you want, it's stock frame layout  -->

    <android.support.v7.widget.CardView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/awesome_card"
        style="@style/CardView"
        app:cardBackgroundColor="@color/material_deep_teal_500"
        app:cardElevation="2dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center_horizontal"
        />

</io.codetail.widget.RevealFrameLayout>

and in code add

 View myView = findView(R.id.awesome_card);

    // get the center for the clipping circle
    int cx = (myView.getLeft() + myView.getRight()) / 2;
    int cy = (myView.getTop() + myView.getBottom()) / 2;

    // get the final radius for the clipping circle
    int dx = Math.max(cx, myView.getWidth() - cx);
    int dy = Math.max(cy, myView.getHeight() - cy);
    float finalRadius = (float) Math.hypot(dx, dy);

    SupportAnimator animator =
            ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.setDuration(1500);
    animator.start();

Answer 2

Seems like they "ported" lollipop animation in pre-L devices. The simplest way to do this is using libraries like Igvalle's Material-Animation (see #4). Its minSdk is 16, but I hope you can decrease it for 14 or below.

Some other libraries: TransitionsBackport, PreLollipopTransition, transitions-everywhere.

Please let me know if you create this animation!

Answer 3

This is a link to webpage which shows how to implement it . Hope it helps http://blog.grafixartist.com/circular-reveal-effect-like-whatsapp-in-android/ .

Answer 4

I gave it a try, I wasn't able to make it compatible with pre-L devices but I think it looks pretty cool.

Go Check it out on GitHub