How do I make a JFoenix JFXToggleButton that looks like a ToggleButton not a switch?

Question

Using the JFoenix library, is there a way to have a toggle button that is a rectangle like the normal JavaFX ToggleButton?

The JFXToggleButton looks more like a switch—and that's not what I'm looking for.

Answer 1

To make something similar to the normal ToggleButon, you can use a lesser-known control in JFoenix called JFXToggleNode.

As you can see in the JFoenix Demo, this control often contains an icon.

But you can put anything you want in it. Why not a label?

Being careful to not forget to include the import statements, just add the following to your FXML file by hand^§.

<?import com.jfoenix.controls.JFXToggleNode?>
<?import javafx.scene.control.Label?>

...

<JFXToggleNode>
    <Label text="Boton Azul" />
</JFXToggleNode>

and add this rule to your stylesheet:

.jfx-toggle-node {
    /* This is the color once toggled on. */
    -jfx-toggle-color: deepskyblue;
}

§: Note that SceneBuilder doesn't support non-standard controls very well, yet, so though you can't drag and drop it, you can add it manually to the FXML file just fine.

Answer 2

Here's my custom implementation of JFXToggleNode

Use any icon pack you want

import com.jfoenix.controls.JFXToggleNode;
import de.jensd.fx.glyphs.materialicons.MaterialIcon;
import de.jensd.fx.glyphs.materialicons.MaterialIconView;
import javafx.scene.paint.Paint;

public class ShowPasswordButton extends JFXToggleNode {
    private MaterialIconView visible = new MaterialIconView(MaterialIcon.VISIBILITY, "20");
    private MaterialIconView notVisible = new MaterialIconView(MaterialIcon.VISIBILITY_OFF, "20");

    public ShowPasswordButton() {
        super();
        this.init();
        this.setGraphic(visible);
        this.selectedProperty().addListener((observable, oldValue, newValue) ->
                this.setGraphic(newValue ? notVisible : visible));
    }

    private void init() {
        visible.setFill(Paint.valueOf("#46a28d"));
        notVisible.setFill(Paint.valueOf("#46a28d"));
    }
}