Group Radio Buttons in Glade

How to group radio buttons in Glade so that they act as a unit. Clicking one radio button selects it and clears all other radio buttons in the group.

This tutorial shows how to group radio buttons in Glade user interface designer without any code to operate the buttons. This allows the window to be used with any language that is supported by GTK. C code that uses the radio buttons follows in the next tutorial.

Create a New Glade Window and Add a Container

Open Glade and place a new top level window by clicking the Window icon under Toplevels as shown in the image below.

New Glade Window
New Glade Window

Place a container on top of the new window to hold the radio buttons. Three radio buttons will be placed on the window, but space needs to be left for an additional widget such as a label or button to use with the radio buttons. Place a Box, found under Containers in Glade, by clicking the Box icon and then clicking on the window. When you are prompted for the number of items, change it to 4 by clicking the + sign. Click the Create button.

Create a GtkBox Dialog Box
Create a GtkBox Dialog Box

Place the Radio Buttons in the Container

Find the Radio Button icon in the left Glade pane under Control and Display. Place three radio buttons in the window container, starting at the top. Click the Radio button icon and then click the section of the container to place the radio button in. Place a label in the bottom section of the container. The label is also found under Control and Display.

Place Radio Buttons in Glade
Place Radio Buttons in Glade

The label will be used in the next tutorial to display the value of the selected radio button and is not essential for grouping radio buttons.

Change Widget IDs and Text

Select each widget to edit by using the top of the right Glade pane. Make the changes using the bottom part of the right pane under the General tab. Change the IDs of the three radio buttons from top to bottom to:
rb_1
rb_2
rb_5

Change the text labels of the radio buttons under “Label with optional image” from top to bottom to:
1%
2%
5%

Change the label widget ID to lbl_choice (under ID) and the label text to 1% (under “Label:”).

Select the main window at the top right pane of Glade and make changes in the bottom of the right pane under the General tab. The window has a default name of “window1”. Change the window ID to window_main. Change the title of the window to Tolerance Selection in the Title box under Appearance. Change the window default width to 480 and the default height to 140, also found under Appearance. First click the check box next to Default Width and Default Height before making the changes.

Click the “Preview snapshot” button at the right of the top toolbar in Glade to view a preview of the window. It should look as follows.

Glade Window with Radio Buttons
Glade Window with Radio Buttons

Notice that the buttons have not been grouped together. Each radio button is selected. In a group of radio buttons, only one radio button can be selected at a time. Save the window as window_main.glade.

Group Radio Buttons in Glade

To group the radio buttons in Glade, all buttons must be added to the group of the first button. Click the second button to select it. At the bottom of the right Glade pane under the General tab, find the Button Attributes heading. Click the pencil icon at the right of the Group box.

Group Radio Buttons in Glade
Group Radio Buttons in Glade

In the dialog box that pops up, select the first radio button – rb_1 – as shown in the image below. Click the OK button.

Grouping Glade Radio Buttons
Grouping Glade Radio Buttons

Click the third radio button (rb_5) and do the same, selecting rb_1 in the dialog box. Save the changes.

Click the “Preview snapshot” icon on the top toolbar again. This time the buttons should work as expected. Clicking one radio button selects it and clears or unselects all other radio buttons in the group as shown in the image below.

Glade Radio Button Group
Glade Radio Button Group

Glade File

Here is the final Glade file so you can compare it to your own work.

The tutorial in the next blog post shows how to update the label at the bottom of the window to reflect the text in the selected radio button. In the preview window shown above, there is no code to update the bottom label, but the radio buttons do work correctly.

Development Tools

This application was developed using:

  • Linux Mint 18.1, Mate, 64-bit
  • Glade 3.18.3

2 thoughts on “Group Radio Buttons in Glade”

Leave a Reply

Your email address will not be published. Required fields are marked *