Java: Gridbag Layout Manager (Swing)

Posted February 20, 2006 by William_Wilson in Java programming

Use the information in this tutorial to prepare and use the Gridbag Layout Manager.


Layout Managers are used in the organization of Panels and Frames. The proper layout should be chosen to accommodate frame resizing and use.

The + signs represent empty space.
The = signs represent space inside a JTextarea.

Gridbag:
*First of all, Gridbag is likely the best layout manager available in Java. It allows for aligning properties similar to Grid, but it has automatic resize features and weights that can be applied to determine the percentage of frame each item is allowed to cover.
-When combined using JPanels with all of the other Layout Managers, there is no better combination to have the look and feel in your program’s GUI.

Prepare for gridbag:
This Layout Manager can be complicated, but once you understand the basics, it can become routine. If you wish, cut and paste.

You will want to start by mapping out your GUI:
*All work pertains to the code example below*
0 /////////////////////////////// 1
——————————————————
|++Frame Title+++++++++++++++|▄|▐ |X|
——————————————————
| ____________________+++_________|
| |____________________|++|__ADD___| 0
|+++++++++++++++++++++++++++++|
| __________________+++_________++|
||================|++|_REMOVE__|+| 1
||================|+++++++++++++|
||================|+++++++++++++|
||================|+++++++++++++|
||================|+++++++++++++|
||================|+++++++++++++|
||================|+++++++++++++|
||=====================|+++++++++++++|
|__________________________________|

*This is a simple Frame with only four items:
2 JButtons, 1 JTextArea, 1 JTextField

The idea is to grid the GUI such that EVERY item on the frame is separated into its own box. Then starting at the left, across the top number, the columns starting at 0 are separated. Then along the left or right side, starting at the top number, the rows again starting at 0 are separated.
-Now every item to be placed on your frame has a grid identity pair, an (x,y) co-ordinate (if you like). These pairs will be how we place the items onto the frame.
-This co-ordinate is always the top left co-ordinate if multiple lines cross a single item.

*We will be constructing a GridBagConstraints object which generates rules and attributes based on the information provided in the code.

Determine Fill Properties:
-This is where we decide how items react when we resize the frame.
GridBagConstraints.NONE (the default – the component will not grow in either direction)
GridBagConstraints.HORIZONTAL (make the component wide enough to fill its display area horizontally, but do not change its height),
GridBagConstraints.VERTICAL (make the component tall enough to fill its display area vertically, but do not change its width)
GridBagConstraints.BOTH (make the component fill its display area entirely)

Determine Padding:
-This is the space within a fill area that will be left empty around an item.
They are defined as: horizontal -(ipadx * #) and vertical – (ipady * #).
This will apply to both sides of the item.

Determine Insets:
-Similar to the gaps on other layout managers, this is the space you would like between items.
*NOTE that you are adding this to EVERY item, so having a left of 5 on the ADD button and a right of 5 on the JTextfield, results in a 10 space between them.
The gaps are defined as (TOP,LEFT,BOTTOM,RIGHT)

Determine The Anchor:
-The relative position of the item within its fill area:
*The default is CENTER. However, NORTH, NORTHEAST, EAST, SOUTHEAST, SOUTH, SOUTHWEST, WEST, NORTHWEST are also available.

Determine the Weight:
-This is the amount of space relative to all other weights. This item gets on the total frame. Thus the percentage does not change as the frame resizes.
*If an item has multiple grid lines across it, it spans more than one grid block. Its weight needs to reflect this to display properly.

CODE Example:
import java.awt.*;
import javax.swing.*;
public class GridBagLayoutManagerExample extends JFrame {

private JTextField newItemField;
private JList itemsList;
private JButton addButton;
private JButton removeButton;

public GridBagLayoutManagerExample(String name) {

super(name);
GridBagLayout layout = new GridBagLayout();
GridBagConstraints layoutConstraints = new GridBagConstraints();
getContentPane().setLayout(layout);

newItemField = new JTextField();
layoutConstraints.gridx = 0; layoutConstraints.gridy = 0;
layoutConstraints.gridwidth = 1; layoutConstraints.gridheight = 1;
layoutConstraints.fill = GridBagConstraints.BOTH;
layoutConstraints.insets = new Insets(12, 12, 3, 3);
layoutConstraints.anchor = GridBagConstraints.CENTER;
layoutConstraints.weightx = 1.0; layoutConstraints.weighty = 0.0;
layout.setConstraints(newItemField, layoutConstraints);
getContentPane().add(newItemField);

addButton = new JButton(“Add”);
addButton.setMnemonic(‘A’);
layoutConstraints.gridx = 1; layoutConstraints.gridy = 0;
layoutConstraints.gridwidth = 1; layoutConstraints.gridheight = 1;
layoutConstraints.fill = GridBagConstraints.HORIZONTAL;
layoutConstraints.insets = new Insets(12, 3, 3, 12);
layoutConstraints.anchor = GridBagConstraints.CENTER;
layoutConstraints.weightx = 0.0; layoutConstraints.weighty = 0.0;
layout.setConstraints(addButton, layoutConstraints);
getContentPane().add(addButton);

itemsList = new JList();
// This line sets the default width (in character units) of the list
itemsList.setPrototypeCellValue(“xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”);

JScrollPane scrollPane = new JScrollPane( itemsList,
ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS,
ScrollPaneConstants.HORIZONTAL_SCROLLBAR_AS_NEEDED);
layoutConstraints.gridx = 0; layoutConstraints.gridy = 1;
layoutConstraints.gridwidth = 1; layoutConstraints.gridheight = 1;
layoutConstraints.fill = GridBagConstraints.BOTH;
layoutConstraints.insets = new Insets(3, 12, 12, 3);
layoutConstraints.anchor = GridBagConstraints.CENTER;
layoutConstraints.weightx = 1.0; layoutConstraints.weighty = 1.0;
layout.setConstraints(scrollPane, layoutConstraints);
getContentPane().add(scrollPane);

removeButton = new JButton(“Remove”);
removeButton.setMnemonic(‘R’);
layoutConstraints.gridx = 1; layoutConstraints.gridy = 1;
layoutConstraints.gridwidth = 1; layoutConstraints.gridheight = 1;
layoutConstraints.fill = GridBagConstraints.HORIZONTAL;
layoutConstraints.ipadx = 10;
layoutConstraints.ipady = 0;
layoutConstraints.insets = new Insets(3, 3, 0, 12);
layoutConstraints.anchor = GridBagConstraints.NORTH;
layoutConstraints.weightx = 0.0; layoutConstraints.weighty = 0.0;
layout.setConstraints(removeButton, layoutConstraints);
getContentPane().add(removeButton);

}

public static void main(String[] args) {

JFrame frame = new GridBagLayoutManagerExample(“Example”);
frame.setDefaultCloseOperation(EXIT_ON_CLOSE);
frame.setSize(300,200);
frame.setVisible(true);

}

}

*This example builds the example mapped out above with the attributes I believe to be best. Try changing the attributes or adding/removing items.

*NOTE: This frame’s buttons do not actually do anything. This is simply an example of using the layout manager.

*Try resizing this frame and notice the neatness of the items no matter what size it is.

Questions or Comments: [email protected]
-William. ยง (marvin_gohan)

The Conversation

Follow the reactions below and share your own thoughts.