Android expanding circle animation for button click

Question

does anyone know how to implement a button transition like the one:

Answer 1

It is easy =]

Step 1 - Create the layout with a CardView (You can use another ViewGroup) and a Button. The card view must be invisible Like this:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#000">

    <Button
        android:id="@+id/btn_go"
        android:text="Go!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.v7.widget.CardView
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="200dp"
        android:visibility="invisible"/>
</RelativeLayout>

Setup 2 - Create a method that makes a circular reveal in a view:

private void circularRevealCard(View view){
        float finalRadius = Math.max(view.getWidth(), view.getHeight());

        // create the animator for this view (the start radius is zero)
        Animator circularReveal = ViewAnimationUtils.createCircularReveal(view, 0, 0, 0, finalRadius * 1.1f);
        circularReveal.setDuration(300);

        // make the view visible and start the animation
        view.setVisibility(View.VISIBLE);

        circularReveal.start();
    }

Step 3 - Listen for a click in the button and animate the CardView

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        Button goBtn = (Button) findViewById(R.id.btn_go);
        final CardView cardView = (CardView) findViewById(R.id.card);

        goBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                circularRevealCard(cardView);
            }
        });
    }

And that's it. You will have the same result of the image you provided (you just have to polish it)

The result:

Happy coding!