RadioButton
Tags: java, programming, beginners, learning
Published: 2024-06-27 17:46:20

Radio buttons, also known as _option buttons_, enable the user to choose a single item from a group of choices. In appearance radio buttons resemble check boxes, but check boxes display a square that is either checked or blank, whereas radio buttons display a circle that is either filled (if selected) or blank (if not selected).

**RadioButton** is a subclass of **ToggleButton**. The difference between a radio button and a toggle button is that a radio button displays a circle, but a toggle button is rendered similar to a button. The UML diagrams for **ToggleButton** and **RadioButton** are shown in Figure below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tijg4o7tpm87zdx5x38c.png)

Here is an example of a radio button with text **US**, a graphic image, green text color, and black border, and initially selected.

`RadioButton rbUS = new RadioButton("US");
rbUS.setGraphic(new ImageView("image/usIcon.gif"));
rbUS.setTextFill(Color.GREEN);
rbUS.setContentDisplay(ContentDisplay.LEFT);
rbUS.setStyle("-fx-border-color: black");
rbUS.setSelected(true);
rbUS.setPadding(new Insets(5, 5, 5,));`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zz0fql2iqkka6lo7po0.png)

To group radio buttons, you need to create an instance of **ToggleGroup** and set a radio button’s **toggleGroup** property to join the group, as follows:

 `ToggleGroup group = new ToggleGroup();
 rbRed.setToggleGroup(group);
 rbGreen.setToggleGroup(group);
 rbBlue.setToggleGroup(group);`

This code creates a button group for radio buttons **rbRed**, **rbGreen**, and **rbBlue** so that buttons **rbRed**, **rbGreen**, and **rbBlue** are selected mutually exclusively. Without grouping, these buttons would be independent.

When a radio button is changed (selected or deselected), it fires an **ActionEvent**. To see if a radio button is selected, use the **isSelected()** method.

We now give a program that adds three radio buttons named Red, Green, and Blue to the preceding example to let the user choose the color of the message, as shown in Figure below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0vrqw8q69x9c8tct2rp.png)

Again there are at least two approaches to writing this program. The first is to revise the preceding **CheckBoxDemo** class to insert the code for adding the radio buttons and processing their events. The second is to define a subclass that extends **CheckBoxDemo**. Listing 16.4 gives the code to implement the second approach.

```
package application;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;

public class RadioButtonDemo extends CheckBoxDemo {
	@Override // Override the getPane() method in the super class
	protected BorderPane getPane() {
		BorderPane pane = super.getPane();
		
		VBox paneForRadioButtons = new VBox(20);
		paneForRadioButtons.setPadding(new Insets(5, 5, 5, 5));
		paneForRadioButtons.setStyle("-fx-border-color: green");
		paneForRadioButtons.setStyle("-fx-border-width: 2px; -fx-border-color: green");
		RadioButton rbRed = new RadioButton("Red");
		RadioButton rbGreen = new RadioButton("Green");
		RadioButton rbBlue = new RadioButton("Blue");
		paneForRadioButtons.getChildren().addAll(rbRed, rbGreen, rbBlue);
		pane.setLeft(paneForRadioButtons);
		
		ToggleGroup group = new ToggleGroup();
		rbRed.setToggleGroup(group);
		rbGreen.setToggleGroup(group);
		rbBlue.setToggleGroup(group);
		
		rbRed.setOnAction(e -> {
			if(rbRed.isSelected()) {
				text.setFill(Color.RED);
			}
		});
		
		rbGreen.setOnAction(e -> {
			if(rbGreen.isSelected()) {
				text.setFill(Color.GREEN);
			}
		});
		
		rbBlue.setOnAction(e -> {
			if(rbBlue.isSelected()) {
				text.setFill(Color.BLUE);
			}
		});
		
		return pane;
	}
	
	public static void main(String[] args) {
		Application.launch(args);
	}
}

```

**RadioButtonDemo** extends **CheckBoxDemo** and overrides the **getPane()** method (line 12). The new **getPane()** method invokes the **getPane()** method from the **CheckBoxDemo** class to create a border pane that contains the check boxes, buttons, and a text (line 13). This border pane is returned from invoking **super.getPane()**. The radio buttons are created and added to **paneForRadioButtons** (lines 19–22). **paneForRadioButtons** is added to the border pane (lines 23).

The radio buttons are grouped together in lines 25–28. The handlers for processing the action event on radio buttons are created in lines 30–46. It sets the appropriate color based on the status of the radio buttons.

The **start** method for this JavaFX program is defined in **ButtonDemo** and inherited in **CheckBoxDemo** and then in **RadioButtonDemo**. So when you run **RadioButtonDemo**, the **start** method in **ButtonDemo** is invoked. Since the **getPane()** method is overridden in **RadioButtonDemo**, the method in **RadioButtonDemo** is invoked from line 40 in [the post](https://dev.to/paulike/button-4khg), ButtonDemo.java.