GridBagLayout Adding Space between buttons/stagger/varied columns?

I am trying to create a layout with GridBagLayout but am having trouble getting the spaces in between the JButton controls to be equal. In the first row, there are 5 buttons that have no space in between. The second and third row should have 4 buttons which are smaller which spaces in between.

The workaround I tried was to make it a 35×35 grid where the top buttons have width 7 and the other buttons width 5. I cannot figure out how to get the 4 buttons to align evenly (The space in the last column is smaller).

Code below:

import java.awt.Color;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.AbstractAction;
import javax.swing.Action;
import javax.swing.Icon;

import javax.swing.JButton;
import javax.swing.JColorChooser;
import javax.swing.JDialog;
import javax.swing.colorchooser.AbstractColorChooserPanel;
import java.awt.Insets;
import java.awt.GridBagLayout;
import java.awt.GridBagConstraints;

public class MainTwo {
    public static void main(String[] a) {
        final JColorChooser colorChooser = new JColorChooser();
        MyChooserPanel newChooser = new MyChooserPanel();
        colorChooser.addChooserPanel(newChooser);

        ActionListener okActionListener = new ActionListener() {
            public void actionPerformed(ActionEvent actionEvent) {
                System.out.println(colorChooser.getColor());
            }
        };

        ActionListener cancelActionListener = new ActionListener() {
            public void actionPerformed(ActionEvent actionEvent) {
                System.out.println("Cancel");
            }
        };

        final JDialog dialog = JColorChooser.createDialog(null, "Change Button Background", true, colorChooser,
                okActionListener, cancelActionListener);
        dialog.setVisible(true);
    }
}

class MyChooserPanel extends AbstractColorChooserPanel {
    public void buildChooser() {
        setLayout(new GridBagLayout()); 
        GridBagConstraints c = new GridBagConstraints();
        c.fill = GridBagConstraints.NONE;
        c.ipadx = 21;
        c.ipady = 15;
        c.gridwidth = 7;
        makeAddButton("Black", Color.BLACK, c);
        makeAddButton("Dark Grey", Color.PINK, c);
        makeAddButton("Custom PathVisio Grey", Color.YELLOW, c);
        makeAddButton("Grey", Color.CYAN, c);
        makeAddButton("White", Color.WHITE, c);
        c.ipadx = 15;
        c.gridwidth = 5;
        c.insets = new Insets(10,0,0,0);
        c.gridy = 1; // new row
        makeAddButton("Blue", Color.BLUE, c);
        c.gridx = 10;
        makeAddButton("Green", Color.GREEN, c);
        c.gridx = 20;
        makeAddButton("Purple", Color.MAGENTA, c);
        c.gridx = 30;
        makeAddButton("Orange", Color.ORANGE, c);
        c.gridy = 2; // new row
        c.gridx = 0;
        makeAddButton("Dark Blue", Color.BLUE, c);
        c.gridx = 10;
        makeAddButton("Dark Green", Color.GREEN, c);
        c.gridx = 20;
        makeAddButton("Dark Purple", Color.MAGENTA, c);
        c.gridx = 30;
        makeAddButton("Dark Orange", Color.ORANGE, c);
    }

    public void updateChooser() {
    }

    public String getDisplayName() {
        return "Panel";
    }

    public Icon getSmallDisplayIcon() {
        return null;
    }

    public Icon getLargeDisplayIcon() {
        return null;
    }

    private void makeAddButton(String name, Color color, GridBagConstraints c) {
        JButton button = new JButton(name);
        button.setBackground(color);
        button.setBorderPainted(false);
        button.setOpaque(true);
        button.setAction(setColorAction);
        button.setToolTipText(name);
        add(button, c);
    }

    Action setColorAction = new AbstractAction() {
        public void actionPerformed(ActionEvent evt) {
            JButton button = (JButton) evt.getSource();
            getColorSelectionModel().setSelectedColor(button.getBackground());
        }
    };
}

Answer

I’d approach this GUI as one border layout containing two grid layouts.

import java.awt.*;
import javax.swing.*;
import javax.swing.border.*;

public class FiveAndEightLayout {

    public FiveAndEightLayout() {
        JPanel gui = new JPanel(new BorderLayout(4,4));
        gui.setBorder(new TitledBorder("Border Layout"));

        JPanel topPanel = new JPanel(new GridLayout(1,0,0,0));
        for (int ii=1; ii<6; ii++) {
            topPanel.add(new JButton("Button " + ii));
        }
        topPanel.setBorder(new TitledBorder("Grid Layout"));
        gui.add(topPanel, BorderLayout.PAGE_START);

        JPanel centerPanel = new JPanel(new GridLayout(0,4,15,5));
        for (int ii=1; ii<9; ii++) {
            centerPanel.add(new JButton("Button " + ii));
        }
        centerPanel.setBorder(new TitledBorder("Grid Layout"));
        gui.add(centerPanel, BorderLayout.CENTER);

        JFrame f = new JFrame("Five And Eight Layout");
        f.add(gui);
        f.pack();
        f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        f.setVisible(true);
    }

    public static void main(String[] args) {
        Runnable r = new Runnable() {
            public void run() {
                new FiveAndEightLayout();
            }
        };
        SwingUtilities.invokeLater(r);
    }
}