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

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


}

Answer 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 :