SwitchButton

To get a quick preview, you can find the Demo in Google Play.

This project provides you a convient way to customise a SwitchButton widget in Android. With just resources changed and attrs set, you can get a lifelike SwitchButton in Android 5.0, iOS 7/8, MIUI, or Flyme and so on.

What are you waiting for, come to enjoy this.

update 1.2.7

Fix rendering bug on some devices.
Fix states bug.

update 1.2.6

With calling the method setChecked(boolean, false);, you can change the status without invoking the listener.

update 1.2.5

Fix shrink bug in Android 5.0 (the problem is same like it is in Android 4.4, which has been fixed in 1.2.4).
More available to setup Material Design style SwitchButton using @style/MD in xml layout.
Fix Demo Project bug

update 1.2.4

fix shrink bug(that will cause the content out of bounds not disapper, on Android 4.4)
upload .pad resource, whitch I forgot to upload before.(My fault.)

update 1.2.3

bug fix
upgrade demo apk
more clear way to use

Since the animation ran on sub thread, "toggle" and "setChecked" methods may mot execute as you wish what cause the checked status change immediately.

This problem may be solved, but I declared 2 methods to deal with the situation whether you want it happen immediately.

If you want to set the checked status immediately, just call setChecked(boolean checked); method like CheckBox. And slideToChecked(boolean checked); method for slow one with slide animation.

When toggle, call toggle(); with change the status immediately and toggle(false); for slow one.

update 1.2

(11/08/2014)

Add StateList support for all resources and enable/disable, pressed has been tested in Demo.
New Style with Material Design, preview below.
Add "shrink" feature. This makes you can draw your image resources out size the view bounds, in the other word, shrink the size of view and make the experience stay the same.

New Style with Material Design:

To use shrink feature, you can easily add these attributes in your xml file. It is recommended that set these values positive.

insetLeft: left size for shrinking
insetRight: right size for shrinking
insetTop: top size for shrinking
insetBottom: bottom size for shrinking

update 1.1

(10/08/2014)

Fix lots of bugs.
Change the default style
Add iOS7 style, you can just use like how the demo did
Update demo, it becomes more convenient, effective and beautiful
Add new attribute: measureFactor, you can custom the factor between width and height now. It is convenient to config the rest space of background. Learn more in the demo.
Update the logic of thumbMargin, it can work well with negative margins now (iOS style just using this trick).

new default style and demo apk looks like this:

Update

Add an attr of radius, now you can change the radius when configure the button's face!

Usage

In xml layout file, you can configure the face of switch button using these attrs.

onDrawable: drawable of background for status ON
offDrawable: drawable of background for status OFF
thumbDrawable: drawable of thumb
thumb_margin: set inner margin between thumb and edges
thumb_marginLeft/Top/Bottom/Right: set margin for specific edge
thumb_width: set the width of thumb, probably used for gradient drawable
thumb_height: set the height of thumb
onColor: set the color of status ON, usd for flat version, the priority is below of onDrawable
offColor: like the onColor
thumbColor: like the onColor
thumbPressedColor: like the thumbColor, but for pressed status
animationVelocity: distance of animation per frame
radius: used for color version, radius of corner of background and thumb.
measureFactor: factor limit the minimum width equals almost (the height of thumb * measureFactor)

In code

Original

After a few days before, I have updated this project completely. To finish this work, I refer to the project of @Issacw0ng, to learn how to control the animation and response to UI and did some update under my understand.

Now, SwitchButton can used more easily to present a switch of flat style using color. The default looking is like this:

(find the latest version upside)

To offer a convenient way to configuration the looking, I designed a series of interface. You can use them to change the style. In demo, you can find how to use them. The demo looks like this: