How to fill a view with others using Material Design animations?

Question

I try to use various functionalities integrated with the construction of materials for Android , but I can not do this type of animation when the view fills another:

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

Answer 1

The solution for this is pathInterpolator , and the name of this effect is Curved Motion .

Animations in material design rely on temporal interpolation curves and spatial motion patterns. With Android 5.0 (API level 21) and higher, you can define your own timelines and motion curves for animations.

You can see how to implement it here:

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

And a sample on GitHub HERE :

Answer 2

I tried to implement this below API 21

add gradle dependency

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

My xml activity

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 java activity

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