How to fill a view with another with Material Design Animation?

I tried to implement this below API 21

add gradle dependancy

dependencies {        compile 'com.github.ozodrukh:CircularReveal:1.0.6@aar'    }

My activity xml is

activity_reval_anim.xml

<RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".RevalAnimActivity">    <ImageView        android:id="@+id/img_top"        android:layout_width="match_parent"        android:layout_height="200dp"        android:layout_alignParentLeft="true"        android:layout_alignParentStart="true"        android:layout_alignParentTop="true"        android:background="@color/color_primary"        android:src="@drawable/ala"/>    <io.codetail.widget.RevealLinearLayout        xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="200dp"        android:layout_below="@+id/img_top"        android:background="@color/color_primary">        <LinearLayout            android:visibility="invisible"            android:id="@+id/ll_reveal"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="@color/color_accent"            android:orientation="horizontal"            ></LinearLayout>    </io.codetail.widget.RevealLinearLayout>    <ImageButton        android:id="@+id/img_floating_btn"        android:layout_width="60dp"        android:layout_height="60dp"        android:layout_alignParentRight="true"        android:layout_marginRight="40dp"        android:layout_marginTop="170dp"        android:background="@drawable/expand_btn"/></RelativeLayout>

My Activity java is

RevalAnimActivity.java

public class RevalAnimActivity extends ActionBarActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_reval_anim);        final ImageButton mFloatingButton = (ImageButton) findViewById(R.id.img_floating_btn);        mFloatingButton.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                animateButton(mFloatingButton);            }        });    }    private void animateButton(final ImageButton mFloatingButton) {        mFloatingButton.animate().translationXBy(0.5f).translationY(150).translationXBy(-0.9f)                .translationX(-150). setDuration(300).setListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                super.onAnimationEnd(animation);                animateReavel((int) mFloatingButton.getX(), 150,mFloatingButton);            }        });    }    private void animateReavel(int cx, int cy, final ImageButton mFloatingButton) {        final View myView = findViewById(R.id.ll_reveal);        // get the final radius for the clipping circle        float finalRadius = hypo(myView.getWidth(), myView.getHeight());        SupportAnimator animator =                ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);        animator.addListener(new SupportAnimator.AnimatorListener() {            @Override            public void onAnimationStart() {                mFloatingButton.setVisibility(View.INVISIBLE);                myView.setVisibility(View.VISIBLE);            }            @Override            public void onAnimationEnd() {                Toast.makeText(getApplicationContext(), "Done", Toast.LENGTH_LONG)                        .show();            }            @Override            public void onAnimationCancel() {            }            @Override            public void onAnimationRepeat() {            }        });        animator.setInterpolator(new AccelerateDecelerateInterpolator());        animator.setDuration(1000);        animator.start();    }    static float hypo(int a, int b) {        return (float) Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));    }}

The solution to do that is pathInterpolator and the name of this effect is Curved Motion.

Animations in material design rely on curves for time interpolation and spatial movement patterns. With Android 5.0 (API level 21) and above, you can define custom timing curves and curved motion patterns for animations.

You can see how to implement it here :

http://developer.android.com/training/material/animations.html#CurvedMotion

And sample on GitHub HERE :