Floating action button morph

Question

I want to make this, but I didn't find any tuts or anything how to make it. (It's called Morph on google website) Can anybody tell me how or send some reference pls?

EDIT:

I want to set the layout from gone to visible... Don't you know when I should do shape.setVisibility(View.VISIBLE)? I tried but animation won't start until second click on button. (On first click layout is just set visible without animation)

Fragment layout:

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:gravity="top"
    android:padding="15dp" />


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/circle"
    android:visibility="gone">

</LinearLayout>

<ImageButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:background="@color/transparent"
    android:contentDescription="share"
    android:padding="15dp"
    android:src="@drawable/ic_share_55x55px" />

Fragment:

        ImageButton fab = (ImageButton) view.findViewById(R.id.share);
    fab.setOnClickListener(new View.OnClickListener() {
        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        @Override
        public void onClick(View view) {
            LinearLayout shape = (LinearLayout) getActivity().findViewById(R.id.circle);
            // Create a reveal {@link Animator} that starts clipping the view from
            // the top left corner until the whole view is covered.
            Animator animator = ViewAnimationUtils.createCircularReveal(
                    shape,
                    shape.getWidth() - 130,
                    shape.getHeight()- 130,
                    0,
                    (float) Math.hypot(shape.getWidth(), shape.getHeight()));

            // Set a natural ease-in/ease-out interpolator.
            animator.setInterpolator(new AccelerateDecelerateInterpolator());

            animator.setDuration(400);

            // Finally start the animation
            animator.start();
        }
    });

Answer 1

Your would need to Animate a view (in this example a LinearLayout). Set the x and y values of the createCircularReveal to the fab button.

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        LinearLayout shape = (LinearLayout) rootView.findViewById(R.id.circle);
        // Create a reveal {@link Animator} that starts clipping the view from
        // the top left corner until the whole view is covered.
        Animator animator = ViewAnimationUtils.createCircularReveal(
            shape,
            0,
            0,
            0,
            (float) Math.hypot(shape.getWidth(), shape.getHeight()));

        // Set a natural ease-in/ease-out interpolator.
        animator.setInterpolator(new AccelerateDecelerateInterpolator());

        // Finally start the animation
        animator.start();
    }
});

This is the information on the createCircleReveal

createCircularReveal(View view,
        int centerX,  int centerY, float startRadius, float endRadius);

Example Project:

https://github.com/googlesamples/android-RevealEffectBasic/

UPDATE

Instead of setting the view to GONE, set it to INVISIBLE. Also make the view setEnabled(false) to prevent it from being touched etc.

LinearLayout shape;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    final View view = inflater.inflate(R.layout.reveal_effect_basic, container, false);
    shape = (LinearLayout) view.findViewById(R.id.circle);
    shape.setVisibility(View.INVISIBLE);
    shape.setEnabled(false);
    ImageButton fab = (ImageButton) view.findViewById(R.id.share);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Animator animator = ViewAnimationUtils.createCircularReveal(
                shape,
                shape.getWidth() - 130,
                shape.getHeight() - 130,
                0,
                (float) Math.hypot(shape.getWidth(), shape.getHeight()));
            shape.setVisibility(View.VISIBLE);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            if (shape.getVisibility() == View.VISIBLE) {
                animator.setDuration(400);
                animator.start();
                shape.setEnabled(true);
            }
        }
    });