Toggle Button in JavaFX | 100% Perfect for beginners

The toggle button in JavaFX is a button that can have the same function as a switch that can be turned on or off. The JavaFX ToggleButton has two states, selected and unselected. The selected property is true when it is in the selected state. Otherwise, it is false. RadioButton and CheckBox are also the same.

This tutorial is perfect for beginners, and you will learn how to use the JavaFX ToggleButton. I will provide examples in this tutorial from creating the toggle button to finished.

How to use the Toggle Button in JavaFX

Creating the toggle button is very easy to do. You simply create an object of ToggleButton and set the name. Creating the toggle button in JavaFX is the same as creating the button control. This node is used to select a choice and not to execute a command. The code snippet below will show you how to create the toggle button in JavaFX.

// Create the Toggle Button
ToggleButton tb = new ToggleButton("Turn ON");

Add the node to the scene

To display the toggle button in JavaFX, you must add it to the scene so that the user can interact with it. If you don’t know how we can add nodes to the scene, you can learn more about the layouts in JavaFX. The following example code snippet below will show you how to add the JavaFX ToggleButton to the Scene graph.

//Create the Layout
VBox root = new VBox();
// Create the scene object
Scene scene = new Scene(root, 400, 400);

// Create the Toggle Button and display the node
ToggleButton tb = new ToggleButton("Turn ON");
root.getChildren().add(tb);

Output

Setting the Toggle Button Text

It is also important to learn how to set or change the text in the toggle button in JavaFX. By doing this, you can use the setText() method. The example code below will show you how to set the text in JavaFX ToggleButton.

ToggleButton tb = new ToggleButton("Turn ON");
tb.setText("This is new Text");

Output

Setting the JavaFX ToggleButton Font

To set the font in the toggle button in JavaFX is very easy. You create the font object and set it. You can also use SceneBuilder if you are developing your application with SceneBuilder. The example code below will show you how to set the font in your JavaFX application.

ToggleButton tb = new ToggleButton("Turn ON");
Font font = Font.font("Serif", FontWeight.EXTRA_BOLD, 30);
tb.setFont(font);

Output

Determine state

Use the isSelected() method to determine whether the toggle button in JavaFX is selected or not. The isSelected() method is a boolean value that is true or false. Proceed to the example code below to learn more.

ToggleButton tb = new ToggleButton("TURN ON");
Boolean isSelected = tb.isSelected();
if (isSelected) {
    tb.setText("Turn OFF");
} else {
    tb.setText("Turn ON");
}

Toggle Button Style

You can set styles in your toggle button to make your toggle button’s appearance better than the default style. You can add external CSS to your JavaFX application or use the inline style when setting styles in your nodes. The following code will show you how to add style to your node using the inline style.

ToggleButton tb = new ToggleButton("TURN ON");
tb.setStyle("-fx-text-fill: white; -fx-background-color: black;");

Output

JavaFX toggle button example

This example will show you the whole code and show you exactly how the toggle button works in the JavaFX application. Please proceed below to learn and apply this to your program.

package com.example.understandingtogglebutton;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Cursor;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.stage.Stage;

import java.io.IOException;

public class ToggleButtonExample extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        VBox root = new VBox();
        Scene scene = new Scene(root, 400, 400);

        ToggleButton tb = new ToggleButton("Turn ON");
        tb.setText("This is new Text");
        Boolean isSelected = tb.isSelected();
        Font font = Font.font("Serif", FontWeight.EXTRA_BOLD, 30);
        tb.setFont(font);
        tb.setStyle("-fx-text-fill: white; -fx-background-color: black;");
        Label lbl = new Label("The Toggle Button is UNSELECTED");
        root.getChildren().addAll(tb, lbl);
        root.setAlignment(Pos.CENTER);

        if (isSelected) {
            lbl.setText("The Toggle Button is SELECTED");
            tb.setText("Turn OFF");
        } else {
            lbl.setText("The Toggle Button is UNSELECTED");
            tb.setText("Turn ON");
        }

        tb.setOnAction(event -> {
            if (tb.isSelected()) {
                lbl.setText("The Toggle Button is SELECTED");
                tb.setText("Turn OFF");
            } else {
                lbl.setText("The Toggle Button is UNSELECTED");
                tb.setText("Turn ON");
            }
        });

        tb.setOnMouseEntered(event ->{tb.setCursor(Cursor.HAND);});

        stage.setScene(scene);
        stage.setTitle("Understanding The ToggleButton");
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

YouTube Video