Android: animation on layout after button clicked for minimum SDK version of 14

Question

How can I do exactly the same effect as this in Android in minimum SDK version 14 application?

• Background effect
• slide toggle button
• my minSDKVersion is 14

Is looks like a circle enlarging animation on background, or is there a more specific function for it?

many thanks...

Answer 1

Have a look Circular Reveal from touch point:

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
        if (view.getId() == R.id.square_yellow) {
            revealFromCoordinates(motionEvent.getRawX(), motionEvent.getRawY());
        }
    }
    return false;
}

private Animator animateRevealColorFromCoordinates(int x, int y) {
    float finalRadius = (float) Math.hypot(viewRoot.getWidth(), viewRoot.getHeight());

    Animator anim = ViewAnimationUtils.createCircularReveal(viewRoot, x, y, 0, finalRadius);
    viewRoot.setBackgroundColor(color);
    anim.start();
}

Answer 2

I don't have concrete examples for exactly what you display in your example, however here are some examples that you can use to get close:

You can use a simple ToggleButton for the switch. See here: http://developer.android.com/guide/topics/ui/controls/togglebutton.html

For the ripple animation, take a look at this post: https://stackoverflow.com/a/26604471/1738090 There are several examples there which display a "ripple" effect. You could easily reuse this animation, decrease the opacity and set the animation to the background of the bigger views as shown in your example.

Hope this helps!

Answer 3

You can refer to this library Material Animation library for implementing background reveal animation and Toggle Button library for checkbox animations.

Answer 4

For anyone that is interested, I went ahead and created a demo app to demonstrate this effect using circular reveal from two switches. You can download it here. It's API 21 and above however.

https://github.com/o4wcoder/CircularRevealDemo