I am trying to learn GridBagLayout. I've gotten the hang of it in many respects, but I am having serious problems when the first row has element(s) with a gridwidth greater than 1 or the first column has elements(s) with a gridheight greater than 1. I'm trying to make a very simple GUI with only four elements, slightly staggered. I have attached images of what it should look like and what it actually looks like. The actual output has all the elements converging at a central point, which is not what I want. The code is below. Anyone see where I have gone wrong? Thanks.

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


public class GridBagExperiment extends JFrame
{
    JPanel redPanel, bluePanel, greenPanel, yellowPanel;
    double redWidthPercent = 0.40;
    double redHeightPercent = 0.40;
    double blueWidthPercent = 0.60;
    double blueHeightPercent = 0.40;
    double greenWidthPercent = 0.60;
    double greenHeightPercent = 0.60;
    double yellowWidthPercent = 0.40;
    double yellowHeightPercent = 0.60;

    GridBagConstraints gbc;
    Container container;


    public static void main (String args[])
    {
        GridBagExperiment gbe = new GridBagExperiment ();
    }

    
    public GridBagExperiment ()
    {
        this.setSize (400, 400);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        container = this.getContentPane();

        redPanel = new JPanel ();
        bluePanel = new JPanel ();
        greenPanel = new JPanel ();
        yellowPanel = new JPanel ();
        redPanel.setBackground(Color.RED);
        bluePanel.setBackground(Color.BLUE);
        greenPanel.setBackground(Color.GREEN);
        yellowPanel.setBackground(Color.YELLOW);

        container.setLayout(new GridBagLayout ());
        gbc = new GridBagConstraints ();

        AddPanel (redPanel, 0, 0, 1, 1, redWidthPercent, redHeightPercent);
        AddPanel (bluePanel, 1, 0, 2, 1, blueWidthPercent, blueHeightPercent);
        AddPanel (greenPanel, 0, 1, 2, 1, greenWidthPercent, greenHeightPercent);
        AddPanel (yellowPanel, 2, 1, 1, 1, yellowWidthPercent, yellowHeightPercent);
        this.setVisible (true);
    }


    public void AddPanel (JPanel panel, int gridx, int gridy, int gridwidth, int gridheight, double weightx, double weighty)
    {
        gbc.gridx = gridx;
        gbc.gridy = gridy;
        gbc.gridwidth = gridwidth;
        gbc.gridheight = gridheight;
        gbc.weightx = weightx;
        gbc.weighty = weighty;
        gbc.fill = GridBagConstraints.BOTH;
        this.add (panel, gbc);
    }
}

Just to explain a little more my reasoning (see DesiredOutputExplained.gif), I've uploaded another image of where (I think) the cells of the grid are.

Red should occupy (0,0).
Blue should occupy (1,0) and (2,0).
Green should occupy (0,1) and (1,1).
Yellow should occupy (2,1).

See if you can spot the reason. If you can't just ask. ;-)

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

public class GridBagExperiment extends JFrame {
	JPanel redPanel, bluePanel, greenPanel, yellowPanel;
	double col1Weight = 0.4;
	double col2Weight = 0.2;
	double col3Weight = 0.4;
	double row1Weight = 0.4;
	double row2Weight = 0.6;

	GridBagConstraints gbc;
	Container container;

	public static void main (String args[]) {
		GridBagExperiment gbe = new GridBagExperiment();
	}

	public GridBagExperiment() {
		setSize (400, 400);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		container = getContentPane();

		redPanel = new JPanel ();
		bluePanel = new JPanel ();
		greenPanel = new JPanel ();
		yellowPanel = new JPanel ();
		redPanel.setBackground(Color.RED);
		bluePanel.setBackground(Color.BLUE);
		greenPanel.setBackground(Color.GREEN);
		yellowPanel.setBackground(Color.YELLOW);

		GridBagLayout gbl = new GridBagLayout();
		container.setLayout(gbl);
		gbc = new GridBagConstraints ();

		AddPanel (redPanel, 0, 0, 1, 1, 0.0, 0.0);
		AddPanel (bluePanel, 1, 0, 2, 1, 0.0, 0.0);
		AddPanel (greenPanel, 0, 1, 2, 1, 0.0, 0.0);
		AddPanel (yellowPanel, 2, 1, 1, 1, 0.0, 0.0);

		gbl.columnWeights = new double[] { col1Weight, col2Weight, col3Weight };
		gbl.rowWeights = new double[] { row1Weight, row2Weight };
		setVisible (true);
	}

	public void AddPanel (JPanel panel, int gridx, int gridy, int gridwidth, int gridheight, double weightx, double weighty) {
		gbc.gridx = gridx;
		gbc.gridy = gridy;
		gbc.gridwidth = gridwidth;
		gbc.gridheight = gridheight;
		gbc.weightx = weightx;
		gbc.weighty = weighty;
		gbc.fill = GridBagConstraints.BOTH;
		add(panel, gbc);
	}
}
commented: Thank you. +12

Ah, you are using columnWeights and rowWeights instead of weightx and weighty. That works much better! Now I can experiment with making more complex GUIs. Thanks a lot!.

Actually, the thing you need to remember is that weightx and weighty are column/row weights. They don't apply to the component to which they are added to they apply to that component's column and row. So, the combined and conflicting weights you provided were counter productive and couldn't be fulfilled, and since nothing existed in column 2 alone, its width was compressed to a pixel or three (if anything at all).

That makes sense. Thank you. I'm starting to get the hang of it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.