5

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

enter image description here

  • 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...

Beeing Jk
  • 3,796
  • 1
  • 18
  • 29

4 Answers4

4

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

enter image description here

Pratik Butani
  • 60,504
  • 58
  • 273
  • 437
1

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!

Community
  • 1
  • 1
w3bshark
  • 2,700
  • 1
  • 30
  • 40
1

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

Nigam Patro
  • 2,760
  • 1
  • 18
  • 33
1

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

Chris Hare
  • 291
  • 2
  • 5