FloatingActionButton

[terrea]

Show me how to make animation like that. http://codepen.io/MattiaAstorino/full/eNaNgq/ :

The point is: After pressure FloatingActionButton♪ it's spreading all over ♪ view, filling it with the color itself FloatingActionButton♪

Any good examples?

[authera]

This animation is called CircularReveal. I'll give you my example, and you'll be able to take it under your size.

First to build.gradle. compile 'com.github.ozodrukh:CircularReveal:1.1.1'

Here are the four main methods.

 private void animateFab() {
    fabButton.animate().translationXBy(0.5f).translationY(-60).translationXBy(-0.9f)
            .translationX(-220).setDuration(150).setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            animateReavel((int) fabButton.getX(), 50);
        }
    });

}

private void animateFabBack() {
    fabView.setVisibility(View.INVISIBLE);
    fabButton.setVisibility(View.VISIBLE);
    fabButton.animate().translationXBy(0.5f).translationY(0).translationXBy(-0.9f)
            .translationX(0).setDuration(150).setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            isFabOpen = false;
        }
    });
}

private void animateReavel(int cx, int cy) {
    float finalRadius = hypo(fabView.getWidth(), fabView.getHeight());

    SupportAnimator animator =
            ViewAnimationUtils.createCircularReveal(fabView, cx, cy, 0, finalRadius);
    animator.addListener(new SupportAnimator.AnimatorListener() {
        @Override
        public void onAnimationStart() {
            fabButton.setVisibility(View.INVISIBLE);
            fabView.setVisibility(View.VISIBLE);
            isFabOpen = true;
        }

        @Override
        public void onAnimationEnd() {
        }

        @Override
        public void onAnimationCancel() {
        }

        @Override
        public void onAnimationRepeat() {
        }
    });

    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.setDuration(400);
    animator.start();

}

private void animateReavelBack() {
    float finalRadius = hypo(fabView.getWidth(), fabView.getHeight());

    SupportAnimator animator =
            ViewAnimationUtils.createCircularReveal(fabView, (int) fabButton.getX(), -50, finalRadius, fabButton.getWidth());
    animator.addListener(new SupportAnimator.AnimatorListener() {
        @Override
        public void onAnimationStart() {
        }

        @Override
        public void onAnimationEnd() {
            fabView.setVisibility(View.INVISIBLE);
            animateFabBack();
        }

        @Override
        public void onAnimationCancel() {
        }

        @Override
        public void onAnimationRepeat() {
        }
    });

    animator.setInterpolator(new AccelerateDecelerateInterpolator());
    animator.setDuration(200);
    animator.start();

}

Notes:

animateFab() - метод анимации кнопки, которая под конец вызывает анимацию новой вьюшки.

fabButton - the button itself.
fabView - that's the one with the "sweeting" fabButtonYou'll build it.

animateRevealBack() - в примере нигде не вызывается. Тут уж прикрутите куда надо. Собсна вся анимация наоборот.