How to create a ButtonGroup with connected buttons in Java?

Question

I am currently trying to create a group of toggle-buttons that are similar to the one's used in the formatter preferences of Eclipse:

Currently I have attempted this in the following way:

public class Exercise extends JFrame {

    private String[] buttonNames = {"A", "B", "C", "D", "E"};

    Exercise() {
        final JPanel topPanel = new JPanel();
        topPanel.setLayout(new GridBagLayout());
        GridBagConstraints c = new GridBagConstraints();
        int tabCount = 0;
        final ButtonGroup topButtonGroup = new ButtonGroup();
        for (String buttonName : buttonNames) {
            JToggleButton tabButton = new JToggleButton(buttonName);
            topButtonGroup.add(tabButton);
            c.fill = GridBagConstraints.HORIZONTAL;
            c.insets = new Insets(0, -6, 0, -7); // Questionable line
            c.gridx = tabCount;
            c.gridy = 0;
            topPanel.add(tabButton, c);
            tabCount++;
        }
        this.add(topPanel);
        this.setVisible(true);
        this.pack();
    }

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

The result is as follows:

I have a couple of concerns with my code. First, I do not understand why I have to make the insets negative. According to Oracle's tutorial, "[b]y default, each component has no external padding." Hence, shouldn't there be no spaces by default? Without the negative insets, the result looks like follows:

Second, I would like to have the toggle button darken instead of turn blue with toggled "on". Is there any easy way do this through Java Swing? Finally, is there any better approach in general? I am curious to know how Eclipse managed to get the toggle-buttons to look as if they are perfectly connected.

Update

I have tried using a BoxLayout as recommended. Unfortunately, this did not seem to fix the problem. The result is almost identical to the picture above. Here is the modified constructor:

Exercise() {
    final JPanel topPanel = new JPanel();
    topPanel.setLayout(new BoxLayout(topPanel, BoxLayout.X_AXIS));
    final ButtonGroup topButtonGroup = new ButtonGroup();
    for (String buttonName : buttonNames) {
        JToggleButton tabButton = new JToggleButton(buttonName);
    //    tabButton.setBorder(BorderFactory.createBevelBorder(
    //              BevelBorder.RAISED, Color.LIGHT_GRAY, Color.DARK_GRAY));
        topButtonGroup.add(tabButton);
        topPanel.add(tabButton);
    }
    this.add(topPanel);
    this.setVisible(true);
    this.pack();
}

Interestingly enough when I tried adding a border as commented out above, the extra spacing between the buttons somehow disappeared. The result is as below:

As much as possible I would like to keep the general look of the button as before but have the edges be more rectangular so that the toggle-buttons will look more connected.

Answer 1

You can use a layout like BoxLayout to eliminate the space. GridBagLayout isn't the only layout out there. Recommended reading: http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html

You can also call JButton functions like setBorder() and setBackground() to achieve the effects you mentioned. As always, the API is your best friend: http://docs.oracle.com/javase/7/docs/api/