Laying Out Components Within a Container

How to Use GridBagLayout: The Example Explained

Here, again, is the applet that shows a GridBagLayout in action.

This is a picture of the applet's GUI. To run the applet, click the picture. The applet will appear in a new browser window.

Below is the code that creates the GridBagLayout and the components it manages. (Here's the whole program. The program runs either within an applet, with the help of AppletButton, or as an application.)

JButton button;
Container contentPane = getContentPane();
GridBagLayout gridbag = new GridBagLayout();
GridBagConstraints c = new GridBagConstraints();
contentPane.setLayout(gridbag);
c.fill = GridBagConstraints.HORIZONTAL; 
   
button = new JButton("Button 1");
c.weightx = 0.5;
c.gridx = 0;
c.gridy = 0;
gridbag.setConstraints(button, c);
contentPane.add(button);

button = new JButton("2");
c.gridx = 1;
c.gridy = 0;
gridbag.setConstraints(button, c);
contentPane.add(button);

button = new JButton("Button 3");
c.gridx = 2;
c.gridy = 0;
gridbag.setConstraints(button, c);
contentPane.add(new JButton("Button 3"));

button = new JButton("Long-Named Button 4");
c.ipady = 40;      //make this component tall
c.weightx = 0.0;
c.gridwidth = 3;
c.gridx = 0;
c.gridy = 1;
gridbag.setConstraints(button, c);
contentPane.add(button);

button = new JButton("Button 5");
c.ipady = 0;       //reset to default
c.weighty = 1.0;   //request any extra vertical space
c.anchor = GridBagConstraints.SOUTH; //bottom of space
c.insets = new Insets(10,0,0,0);  //top padding
c.gridx = 1;       //aligned with button 2
c.gridwidth = 2;   //2 columns wide
c.gridy = 2;       //third row
gridbag.setConstraints(button, c);
contentPane.add(button);

This example uses one GridBagConstraints instance for all the components the GridBagLayout manages. Just before each component is added to the container, the code sets (or resets to default values) the appropriate instance variables in the GridBagConstraints object. It then uses the setConstraints method to record all the constraint values for that component.

For example, to make button 4 be extra tall, the example has this code:

c.ipady = 40;

And before setting the constraints of the next component, the code resets the value of ipady to the default:

c.ipady = 0;

For clarity, here's a table that shows all the constraints for each component the GridBagLayout handles. Values that aren't the default are marked in bold font. Values that are different from those in the previous table entry are marked in italic font.

Component	Constraints
All components	ipadx = 0 fill = GridBagConstraints.HORIZONTAL
Button 1	ipady = 0 weightx = 0.5 weighty = 0.0 gridwidth = 1 anchor = GridBagConstraints.CENTER insets = new Insets(0,0,0,0) gridx = 0 gridy = 0
Button 2	weightx = 0.5 gridx = 1 gridy = 0
Button 3	weightx = 0.5 gridx = 2 gridy = 0
Button 4	ipady = 40 weightx = 0.0 gridwidth = 3 gridx = 0 gridy = 1
Button 5	ipady = 0 weightx = 0.0 weighty = 1.0 anchor = GridBagConstraints.SOUTH insets = new Insets(10,0,0,0) gridwidth = 2 gridx = 1 gridy = 2

All the components in this container are as wide as possible, given their row and column. The program accomplishes this by setting the GridBagConstraints fill instance variable to GridBagConstraints.HORIZONTAL, leaving it at that setting for all the components. If the program didn't specify the fill, the buttons would be at their natural width, like this:

This program has two components that span multiple columns (buttons 4 and 5). To make button 4 tall, we added internal padding (ipady) to it. To put space between buttons 4 and 5, we used insets to add a minimum of 10 pixels above button 5 and also made button 5 hug the bottom edge of its cell.

When you enlarge the window the program brings up, the columns grow proportionately. This is because each component in the first row, where each component is one column wide, has weightx = 1.0. The actual value of these components' weightx is unimportant. What matters is that all the components, and consequently, all the columns, have an equal weight that is greater than 0. If no component managed by the GridBagLayout had weightx set, then when the components' container was made wider, the components would stay clumped together in the center of the container, like this:

Note that if you enlarge the window, the last row is the only one that gets taller. This is because only button 5 has weighty greater than zero.

Laying Out Components Within a Container