Fluent Design style Toggle Switch for Java, JavaFX

Hi, this time I’m going to talk about the new Toggle Switch style in the new version of JMetro.

Toggle Switch is a control that has become very popular in recent years. I added a JavaFX implementation some time ago to the ControlsFX library.

This new style is available in JMetro version 4.1 that has just been released.

What’s a Toggle Switch

In previous posts I’ve talked about the Toggle Switch control, what it is and a implementation I’ve done and added to ControlsFX library.

In short words, a Toggle Switch is like a Check Box or Toggle Button, with two states (on and off). It typically doesn’t have an indeterminate state like the Check Box can have and in some implementation its text may change when its state changes, to further illustrate the state it’s in.

The ControlsFX implementation has, by default, a look that fits with the default JavaFX Modena theme. Back then, I also added a Metro inspired style to JMetro that you can see below:

Toggle Switch control JMetro light theme, Java, JavaFX theme, inspired by Microsoft Metro (now named Fluent Design)

Toggle Switch OLD JMetro light style

Toggle Switch control JMetro dark theme, Java, JavaFX theme, inspired by Microsoft Metro (now named Fluent Design)

Toggle Switch OLD JMetro dark style

New Toggle Switch style

There were some issues I faced when creating the new JMetro style. First I encountered some bugs in the skin implementation that I fixed in a newly added MetroToggleSwitchSkin.

The JMetro stylesheet has changed to reference this new skin:

.toggle-switch {
    -fx-skin: "impl.jfxtras.styles.jmetro8.MetroToggleSwitchSkin";
}

It’s an implementation detail, so you don’t really, ordinarily, have to care about it. The skin is in the impl package to reflect that it’s not public API. If you use it in your code please be advised that things might change in a breaking way in the future.

Another problem I faced is that I now wanted the toggle to be on the left side, and its text on the right. Which is the opposite of the current implementation. For that I added a new CSS property: -toggle-display. which is similar to the Labeled -fx-content-display property.

-toggle-display has three possible values:

  • left: The toggle is displayed left, and the accompanying text on the right
  • right: Toggle is displayed to the right
  • thumb-only: Only the toggle is displayed with no text

The default value is right, which reflects the appearance in my first implementation of Toggle Switch. However, JMetro overrides this and sets it to left, by default:

.toggle-switch {

    -thumb-move-animation-time: 100;
    -toggle-display: left;
}

Another thing that has changed and you’ll notice in the previous code snippet is the duration of the toggle animation. That is, the time it takes for the toggle dot to go from the left to the right and vice-versa whenever it is turned off or on. This time has changed from 200ms to 100ms as indicated by the -thumb-move-animation-time CSS property.

Without further ado, here’s the new dark and light JMetro style for the Toggle Switch:

Toggle Switch control JMetro light theme, Java, JavaFX theme, inspired by Microsoft Fluent Design (previously named Metro)

Toggle Switch NEW JMetro light style

Toggle Switch control JMetro dark theme, Java, JavaFX theme, inspired by Microsoft Fluent Design (previously named Metro)

Toggle Switch NEW JMetro dark style

Wrapping up

Version 4.1 of JavaFX theme JMetro is out. This version add a new Toggle Switch style inspired by Fluent Design. The visuals have completely changed, including the animation speed.

A new skin has also been added which adds a new -toggle-display CSS property. Be advised that this skin is in the impl package as it is an implementation detail.

The documentation page for Java, JavaFX theme JMetro will be updated shortly.

As always follow me on twitter and subscribe to this blog.

Here’s what I have planned next:

  • New Button style with animation;
  • New Slider style;
  • New Progress Bar styles;
  • Possibility to change colors easily.

 

 

ToggleSwitch control revisited

ToggleSwitch - modena theme

ToggleSwitch – modena theme

Going through JMetro I just remembered the Toggle Switch control that I have created. It reminded me that this should be in a control repository next to other controls, publicly available for anyone to grab. I think this is one of those controls that should be part of the java sdk, it’s very popular especially on touch based devices. For more information read my previous blog post on the Toggle Switch control.

I have heard more than once people saying why a new control, why not simply style the Checkbox to appear the same way as a Toggle Switch. I think Toggle Switch merits being its own control the same way the Radio Button and Checkbox aren’t just skins of the Toggle Button, besides being conceptually a different control a Checkbox has the indeterminate state which doesn’t make sense in a Toggle Switch. Toggle Switch are usually also animated which can’t be achieved by skinning. And finally creating a Toggle Switch control makes it easier for others to style the control in different ways via css (styling a Checkbox to look like a Toggle Switch is difficult and hacky) .

So I decided to submit this control to the ControlsFX project.

One of the pertinent feedbacks I’ve received from the project members was that the default skin should be inline with the Modena theme.  And so I created a new css stylesheet that I think is inline with Modena and is the default look of the control (if you don’t override the default stylesheet).

Toggle Switch for java

Background

A Toggle Switch is a control that is very popular nowadays, 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.