How To Make Whatsapp Type Of Animation For Opening The Menu From Toolbar(actionbar)

Description: I recently updated whatsapp and noticed the animation for menu item clicked on toolbar. How to achieve this effect? Are there any opensource projects to achieve this?

Solution 1:

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!

Solution 2:

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/ .

Solution 3:

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.RevealFrameLayoutxmlns: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.CardViewxmlns: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

ViewmyView= findView(R.id.awesome_card);

    // get the center for the clipping circleintcx= (myView.getLeft() + myView.getRight()) / 2;
    intcy= (myView.getTop() + myView.getBottom()) / 2;

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

    SupportAnimatoranimator=
            ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
    animator.setInterpolator(newAccelerateDecelerateInterpolator());
    animator.setDuration(1500);
    animator.start();

Solution 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