Holds a master degree in Computer Science. Has a 6 years work experience doing front end development which has also implied self improving on areas like Design and User Experience. Pedro has posted 33 posts at DZone. You can read more from them at their website. View Full User Profile

Toggle Switch for Java

07.06.2014
| 1941 views |
  • submit to reddit

A Toggle Switch is a control that is very popular, especially on touch based devices. You can see it in Android:

switches_switches

In iOS (6 and 7):

ios-7-toggle-switch1

And in Windows 8:

toggle-sync-setting-in-windows8

Functionally it works just like a check-box but for touch devices it has one big advantage: when your finger is over the touch device it won’t obscure the control and so you can see an instant feedback when you press it. The disadvantage is obviously that this control takes up more space.

Implementation

My implementation of the Toggle Switch allows you to change the text for the on and off state that appears right next to the toggle switch. You can also style the control using just CSS. It comes with a CSS implementation that gives it a metro look.

Demo

Below you can see a live demonstration of the control, in a light and a dark theme.

ToggleSwitch_LightTheme.gif

Toggle Switch (JMetro Light Theme)

Toggle Switch (JMetro Dark Theme)

Toggle Switch (JMetro Dark Theme)

You can grab the control and the accompanying metro style CSS by going to the jfxtras repository.

Further Developments

Currently it’s still not possible to style the Toggle Switch to look like the Android toggle switch using just CSS because it’s not possible to specify that the on and off text should appear inside the control and not outside as in the case of Metro. I’d also like to add the possibility to turn the animation on or off through CSS.

About these ads
Published at DZone with permission of its author, Pedro Duque Vieira. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)