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

Question

I'm trying to go around different functionality integrated with Android Material Design but I can't to do this type of animation when a view fill another like that :

Do you know how to do it or a library/project an example that does this?

Answer 1

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