Concepts / Grouping Radio Buttons with ButtonGroup

Grouping Radio Buttons with ButtonGroup

A JCheckBox draws its box from a pair of Icons: one for the unselected state and one for the selected state.

  • Programming

A Checkbox That Looks Wrong

Suppose a Swing window shows a row of checkboxes, and one of them looks wrong. It is still a box with a check mark, but the picture does not match the design you wanted. Before you can fix that, you need to know what the box on the screen actually is and which part of your program controls it. This article starts from that practical question and follows the behavior from the screen back to the mechanism that produces it.

What do you think happens?

A JCheckBox has a visual state that changes when it is selected or deselected. When the box is checked, what decides which picture is drawn?

Reveal answer
Answer:

The selection state of the checkbox decides which of two icons is drawn.

The checkmark is not produced by drawing a check symbol on demand. The component chooses between two icons, one for the unselected state and one for the selected state. Because the choice depends only on the selection state, customizing the appearance means replacing one or both of those icons.

Tracing the Icon Through Each Step

Tracing means asking, at each step, which state the button is in and which icon belongs to that state. Start with a single checkbox that has been customized. Its unselected icon is the picture it shows when it is not checked. Its selected icon is the picture it shows once it becomes checked. A click moves the button from one state to the other, and the displayed icon follows the state.

Unselectedshows the unselected iconSelectedshows the selected iconUnselected againshows the unselected iconclick to checkclick to uncheck
Which icon is drawn now after each click, and does it match the icon the design expects for that state?

The diagram shows the principle the source relies on. The icon is a function of the state, not of a separate drawing step. If the button is unselected, the unselected icon is the one to check. If it is selected, the selected icon is the one to check. Tracing a customized button is therefore a matter of following the state through each click or call and naming the icon that state uses.

Why the Picture Depends Only on State

Definition

A JCheckBox draws its box from a pair of Icons: one for the unselected state and one for the selected state.

This definition explains the appearance you see on screen. The checkbox does not decide, at drawing time, to add a check symbol. It holds two icons and uses whichever one matches its current selection state. The source describes this directly: you can change the look of the check box by substituting different icons for the standard ones.

Unselectedunselected iconSelectedselected icon
Which icon appears when the button is unselected, and which appears when it is selected?

Choosing the Icons with the Constructor and Setters

The source names the methods that control each icon. The icon for the unselected state is the main icon of the JCheckBox. You can supply it when the component is constructed, or you can replace it later with setIcon(). The icon for the selected state is changed with setSelectedIcon(). Both methods belong to the JCheckBox object, so you call them on the particular checkbox you want to customize.

StateIcon controlledHow to set it
UnselectedThe main icon of the buttonSupply it in the constructor, or replace it later with setIcon()
SelectedThe selected iconSet it with setSelectedIcon()

Which call controls which icon, as described in the source

java
Notes on the code
  • The constructor argument supplies the unselected icon.
  • setSelectedIcon() replaces the icon shown when the box is checked.
  • The file names are placeholders chosen for this illustration.

If you later want to change only the unselected appearance, call setIcon() on the same object. The selected icon set by setSelectedIcon() is a separate setting and is not replaced by that call.

Radio Buttons and Menu Items Follow the Same Pattern

The same two-icon customization applies to JRadioButton, JCheckBoxMenuItem, and JRadioButtonMenuItem. A radio button therefore has an unselected icon and a selected icon, and you customize them with the same two methods: setIcon() for the unselected appearance and setSelectedIcon() for the selected appearance.

The source points to ToolBarDemo.java as a concrete case. That program creates a set of radio buttons that use custom icons. It builds each button in a helper method whose documentation says it creates a JRadioButton and adds it to a specified button group. The button group is therefore part of the construction, so customizing a radio button happens during setup, alongside its grouping. The source excerpt does not explain how the button group behaves once its buttons are set up, so this article limits itself to the icon mechanism.

Finding the Step Where the Display Departs

When a customized button looks wrong, the source gives a method: identify the state where the wrong appearance occurs, then check the call that sets the icon for that state. The question is not whether the appearance looks right in general. It is which step produced the first wrong picture.

Worked example

A Checkbox Shows the Wrong Icon After a Click

A checkbox was given a plain unselected icon in its constructor and was meant to show a checked icon once selected. After a click, the box shows the unselected picture instead of the checked one. Where did the display first depart from the expected result?

  1. 1
    Step 1: Starting state

    The box begins unselected, so the unselected icon is correct and it is drawn as expected.

  2. 2
    Step 2: The click

    The click changes the box to the selected state. The expected icon is now the selected icon.

  3. 3
    Step 3: Where the picture departs

    The wrong picture appears at Step 2, the selected state. The unselected icon is drawn where the selected icon should be.

  4. 4
    Step 4: Check the right call

    Following the source's method, look at the call that sets the selected icon. If setSelectedIcon() was never called for this checkbox, or was given the wrong image, the selected state will show the wrong picture.

Result

The first wrong picture occurs in the selected state, so the fix belongs at the icon that state uses, not at the unselected icon that was correct all along.

Mistakes When Customizing Button Icons

  • Common mistake

    Changing the unselected icon when the selected state is the one that looks wrong

    What it looks like

    The box looks wrong only after it is checked, but the programmer keeps calling setIcon() and never touches the selected icon.

    Why it fails

    Each state uses its own icon. Changing the icon for a different state does not affect the picture shown in the state that is wrong.

    Do this instead

    Identify the state where the wrong appearance occurs, then check the call that sets the icon for that state.

  • Common mistake

    Assuming the checkmark is drawn by the component on demand

    What it looks like

    Looking for a drawing routine that adds a check symbol, when the design should instead be a different picture.

    Why it fails

    The component chooses between two icons based on selection state. Its appearance comes from those icons.

    Do this instead

    Replace one or both icons to change the look.

  • Common mistake

    Treating setIcon() and setSelectedIcon() as interchangeable

    Why it fails

    setIcon() controls the unselected icon, and setSelectedIcon() controls the selected icon.

Practice Tracing an Icon Sequence

MEDIUM

A JRadioButton is created with an unselected icon U. Later, setSelectedIcon() is called with a selected icon S. The button is then selected, deselected, and selected again. For each of the four moments (creation, after first selection, after deselection, after second selection), state which icon should be displayed. Then say which step would be the first place to look if the display at the second selection were wrong.

Hints
  • Ask which state the button is in at each moment, then name the icon that state uses.
  • Recall that the unselected icon comes from the constructor or setIcon(), and the selected icon comes from setSelectedIcon().
  • The first wrong picture is the first moment where the displayed icon does not match the expected one.

Key Takeaways

  • A JCheckBox draws its box from a pair of Icons, one for the unselected state and one for the selected state, and the choice depends only on the selection state.
  • The constructor or setIcon() controls the unselected icon, and setSelectedIcon() controls the selected icon, both called on the specific button being customized.
  • The same two-icon customization applies to JRadioButton, JCheckBoxMenuItem, and JRadioButtonMenuItem.
  • When a customized button looks wrong, identify the state where the wrong appearance occurs, then check the call that sets the icon for that state.