JavaFX Tutorial - JavaFX RadioButton

• « Previous
• Next »

The radio buttons are usually grouped together to let user to do single selection, that is user can only choose one item in the radio button list. For example, when choosing shoe size we normally select one size among the list.

A radio button is either selected or deselected.

The following code shows that only one RadioButton can be selected when placed in a ToggleGroup.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
/*from w  w  w.j ava  2s .c om*/
public class Main extends Application {
  @Override
  public void start(Stage stage) {
    HBox root = new HBox();
    Scene scene = new Scene(root, 300, 150);
    stage.setScene(scene);
    stage.setTitle("");

    ToggleGroup group = new ToggleGroup();
    RadioButton button1 = new RadioButton("select first");
    button1.setToggleGroup(group);
    button1.setSelected(true);
    RadioButton button2 = new RadioButton("select second");
    button2.setToggleGroup(group);
    
    root.getChildren().add(button1);
    root.getChildren().add(button2);

    scene.setRoot(root);
    stage.show();
  }

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

The code above generates the following result.

Creating a Radio Button

The RadioButton class from the javafx.scene.control package has two constructors.

To create a radio button with an empty string for its label and set label afterwards.

RadioButton rb = new RadioButton();
//setting a text label
rb.setText("Size 9");

To create a radio button with the specified label

RadioButton rb2 = new RadioButton("Size 9");

setSelected() method with true parameter can explicitly select a radio button.

isSelected method returns whether a particular radio button is selected by a user.

setGraphic method can install an image for a RadioButton.

Image image = new Image(getClass().getResourceAsStream("Size.jpg"));
RadioButton rb = new RadioButton("Size 9");
rb.setGraphic(new ImageView(image));

Radio Button Groups

Radio buttons are typically used in a group.

We can add radio buttons to ToggleGroup object and it will manage them so that only one of the radio buttons can be selected at a time.

The following code creates a toggle group and three radio buttons and then adds each radio button to the toggle group, and specifies which button should be selected.

ToggleGroup group = new ToggleGroup();

RadioButton rb1 = new RadioButton("Size 9");
rb1.setToggleGroup(group);
rb1.setSelected(true);

RadioButton rb2 = new RadioButton("Size 10");
rb2.setToggleGroup(group);
 
RadioButton rb3 = new RadioButton("Size 11");
rb3.setToggleGroup(group);

Radio Button Events

We handle the radio button selected event through the ToggleGroup. A change listener is added to ToggleGroup.

The user data was assigned for each radio button.

The ChangeListener object checks a selected item in the group. The selected radio button is returned from the getSelectedToggle method. Then we get the user data by calling the getUserData method.

rb1.setUserData("Home")
rb2.setUserData("Calendar");
rb3.setUserData("Contacts");

final ToggleGroup group = new ToggleGroup();

group.selectedToggleProperty().addListener(
    (ObservableValue<? extends Toggle> ov, Toggle old_toggle, Toggle new_toggle) -> {
        if (group.getSelectedToggle() != null) {
            System.out.println(group.getSelectedToggle().getUserData().toString());
        }    
    }
});

The full source code.

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
//from w  w w . j ava2 s  .  c  o m
public class Main extends Application {
  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage stage) {
    Scene scene = new Scene(new Group());
    stage.setWidth(250);
    stage.setHeight(150);

    final ToggleGroup group = new ToggleGroup();

    RadioButton rb1 = new RadioButton("A");
    rb1.setToggleGroup(group);
    rb1.setUserData("A");

    RadioButton rb2 = new RadioButton("B");
    rb2.setToggleGroup(group);
    rb2.setUserData("B");

    RadioButton rb3 = new RadioButton("C");
    rb3.setToggleGroup(group);
    rb3.setUserData("C");

    group.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {
      public void changed(ObservableValue<? extends Toggle> ov,
          Toggle old_toggle, Toggle new_toggle) {
        if (group.getSelectedToggle() != null) {
          System.out.println(group.getSelectedToggle().getUserData().toString());
        }
      }
    });

    HBox hbox = new HBox();
    VBox vbox = new VBox();

    vbox.getChildren().add(rb1);
    vbox.getChildren().add(rb2);
    vbox.getChildren().add(rb3);
    vbox.setSpacing(10);

    hbox.getChildren().add(vbox);
    hbox.setSpacing(50);
    hbox.setPadding(new Insets(20, 10, 10, 20));

    ((Group) scene.getRoot()).getChildren().add(hbox);
    stage.setScene(scene);
    stage.show();
  }
}

The code above generates the following result.

Radio Button Focus

In the group of radio buttons, the first button initially has the focus by default.

When using setSelected method to select a radio button we should also use the requestFocus function to change the focus to the selected radio button.

rb.setSelected(true);
rb.requestFocus();

• Next »
• « Previous