woshizhangmiao21 / switchbutton

A cute widget of Switch Button for you to create beautiful and friendly UI.

SwitchButton

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:

(find the latest version upside)