Grid bag layout not displaying the way I want

Question

So I have 6 panels, all of them used a grid layout. And I put them together using gridbaglayout, here is the design I wanted

Turn out it became a total mess The "second" panel became much further away to the right The third panel is squeezed a lot to the left and it was a disaster. Here is my code for the gridbag layout

    c.gridx = 0; c.gridy = 0;
    add (first,c); 

    c.gridx = 2; //so that the second panel starts from the center and is divided evenly with the first panel
    add(second,c);

    c.gridx = 0; c.gridy = 1;
    add(third,c);

    c.gridx = 1; 
    add(fourth,c);

    c.gridx = 2;
    add(fifth,c);

    c.gridx = 3;
    add(sixth,c);

Any help is appreciated.

Answer 1

As you wrote c.gridx = 0 and c.gridy = 0, you forgot to specify how many columns you want this JPanel to occupy. In order to specify that, you should be using c.gridwidth = 2, which tells the layout that this JPanel needs space for two columns.

To get an output like this:

Here is a small working example:

import java.awt.*;
import javax.swing.*;
// http://stackoverflow.com/questions/10968853/two-jpanels-in-jframe-one-under-other
public class GridBagLayoutExample
{
    // http://stackoverflow.com/questions/10977017/grid-bag-layout-not-displaying-the-way-i-want
    private void displayGUI()
    {
        JFrame frame = new JFrame("GridBagLayout Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel contentPane = new JPanel();
        contentPane.setLayout(new GridBagLayout());

        GridBagConstraints gbc = new GridBagConstraints();
        gbc.anchor = GridBagConstraints.FIRST_LINE_START;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.gridwidth = 2;
        gbc.weightx = 0.5;
        gbc.weighty = 0.2;

        JPanel topLeftPanel = new JPanel();
        topLeftPanel.setOpaque(true);
        topLeftPanel.setBackground(Color.DARK_GRAY);
        contentPane.add(topLeftPanel, gbc);

        gbc.gridx = 2;

        JPanel topRightPanel = new JPanel();
        topRightPanel.setOpaque(true);  
        topRightPanel.setBackground(Color.BLUE);
        contentPane.add(topRightPanel, gbc);

        gbc.gridwidth = 1;
        gbc.gridx = 0;
        gbc.gridy = 1;
        gbc.weightx = 0.25;
        gbc.weighty = 0.8;

        JPanel firstPanel = new JPanel();
        firstPanel.setOpaque(true);
        firstPanel.setBackground(Color.RED);
        contentPane.add(firstPanel, gbc);

        gbc.gridx = 1;

        JPanel secondPanel = new JPanel();
        secondPanel.setOpaque(true);
        secondPanel.setBackground(Color.GREEN.darker());
        contentPane.add(secondPanel, gbc);

        gbc.gridx = 2;

        JPanel thirdPanel = new JPanel();
        thirdPanel.setOpaque(true);
        thirdPanel.setBackground(Color.WHITE);
        contentPane.add(thirdPanel, gbc);

        gbc.gridx = 3;

        JPanel fourthPanel = new JPanel();
        fourthPanel.setOpaque(true);
        fourthPanel.setBackground(Color.MAGENTA);
        contentPane.add(fourthPanel, gbc);

        frame.setContentPane(contentPane);
        frame.setSize(200, 300);
        frame.setLocationByPlatform(true);
        frame.setVisible(true);
    }

    public static void main(String... args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
                new GridBagLayoutExample().displayGUI();
            }           
        });
    }
}

Answer 2

Here is (another) alternative nested layout. Panels 3 through 6 will get extra height, the extra width will be divided evenly amongst all 6 panels.

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

public class SixPanelNested {

    SixPanelNested() {
        JPanel gui = new JPanel(new BorderLayout());
        gui.setBorder(new TitledBorder("BorderLayout()"));

        JPanel north = new JPanel(new GridLayout(1,0));
        north.setBorder(new TitledBorder("GridLayout(1,0)"));
        gui.add(north, BorderLayout.NORTH);
        for (int ii=1; ii<3; ii++) {
            JLabel l = new JLabel("Panel " + ii);
            l.setBorder(new LineBorder(Color.BLACK));
            north.add(l);
        }

        JPanel south = new JPanel(new GridLayout(1,0));
        south.setBorder(new TitledBorder("GridLayout(1,0)"));
        gui.add(south);
        for (int ii=3; ii<7; ii++) {
            JLabel l = new JLabel("Panel " + ii);
            l.setBorder(new LineBorder(Color.BLACK));
            south.add(l);
        }

        JOptionPane.showMessageDialog(null, gui);
    }

    public static void main(String[] args) throws Exception {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                new SixPanelNested();
            }
        });
    }
}

Answer 3

I am not familiar enough with the GridBagLayout to quickly spot what you can improve to your code to fix this. But another approach might be possible, using nested BorderLayouts.

Panels 'first', 'third' and 'fourth' can be placed inside one JPanel Awith a BorderLayout in the NORTH, WEST and EAST respectively. The same can be done for the panels 'second', 'fifth' and 'sixth' in a JPanel B.

Then you group those 2 panels (A and B) in another panel with a BorderLayout in the WEST and EAST

Answer 4

Add this:

c.gridwidth = 2;

Before adding the FIRST and SECOND panels, then set gridwidth back to 1 before adding the others. Alternatively you could separate them further as suggested above. You could use two FlowLayouts for each row, and add those two to another panel with a BorderLayout with NORTH/SOUTH.