How to use GridBagLayout in java swing

In this tutorial we will learn about the GridBagLayout in Java Swing. GridBagLayout is a layout manager that lays out a container’s components in a grid of cells with each component occupying one or more cells, called its display area. The display area aligns components vertically and horizontally, without requiring that the components be of the same size.

According to the Oracle java GridBagLayout is :

GridBagLayout is one of the most flexible — and complex — layout managers the Java platform provides. A GridBagLayout places components in a grid of rows and columns, allowing specified components to span multiple rows or columns. Not all rows necessarily have the same height. Similarly, not all columns necessarily have the same width. Essentially, GridBagLayout places components in rectangles (cells) in a grid, and then uses the components’ preferred sizes to determine how big the cells should be.

I feel that most of developers found GridBagLayout is complex to understand and use for laying out the Swing application. But it is very easy to understand and use in Swing Application and it give the professional look to your Swing application. I hope after reading out this tutorials you will also found GridBagLayout is easy to understand and use.

To Understand the GridBagLayout, we will use the raw diagram of our Screen which we are going to develop in this tutorial.

I have used the Excel to mark the Screen as below shown in image.

2

Now we will try to understand above image in context of GirdBagLayout.

In the Image we Define that the Main Screen will have 8 columns (0 to 7, X-coordinates) and 7 rows (0 to 6, Y-coordinates).

Below code define the GridBagLayout with 8 columns and 7 rows and we are setting the Layout in JPanel, Please note we have used the minimum widths and weights for each row and columns to make it equals size of each cell in GridBagLayout.

  JPanel contentPane = new JPanel();
  GridBagLayout gbl_contentPane = new GridBagLayout();
  gbl_contentPane.columnWidths = new int[] { 0, 0, 0, 0, 0, 0, 0, 0 };
  gbl_contentPane.rowHeights = new int[] { 0, 0, 0, 0, 0, 0, 0 };
  gbl_contentPane.columnWeights = new double[] { 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 };
  gbl_contentPane.rowWeights = new double[] { 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 };
  contentPane.setLayout(gbl_contentPane);

The Directions(NORHT, SOUTH, EAST and WEST) and Coordinates (X and Y) define the position of controls, which will be put on GridBagLayout using GridBagConstraints.

Lets see how these can be used in GridBagConstraints.

NORTH is GridBagConstraints.NORTH

SOUTH is GridBagConstraints.SOUTH

EAST is GridBagConstraints.EAST

WEST is GridBagConstraints.WEST

There are other possible direction as well in GridBagConstraints like NORTHEAST,NORTHWEST etc. you may use any of them as your requirement.

Now see below code, where we are putting one JLabel in position as X=0, Y=0 and align in WEST direction and finally add the JLable control in contentPane with defined constraints.

JLabel label = new JLabel("Name :");
GridBagConstraints gridBagConstraints = new GridBagConstraints();
gridBagConstraints.insets = new Insets(5, 5, 5, 5);
gridBagConstraints.anchor = GridBagConstraints.WEST;
gridBagConstraints.gridx = 0;
gridBagConstraints.gridy = 0;
// Add the JLable in panel with gridBagConstraints
contentPane.add(label, gridBagConstraints);

gridBagConstraints.insets define the space require from each direction for control in cell.

gridBagConstraints.insets = new Insets(5, 5, 5, 5);

gridBagConstraints.anchor define the direction of control within cell.

gridBagConstraints.anchor = GridBagConstraints.WEST;

gridBagConstraints.gridx define the X coordinate position of Control.

gridBagConstraints.gridx = 0;

gridBagConstraints.gridy define the Y coordinate position of Control.

gridBagConstraints.gridy = 0;

Now we will add more controls in raw screen and develop the same in JPanel.

4

By Looking at image above you may guess each constraints position, you can also see that some controls such as TextBoxes, and Address TextArea require more than one cell, we can define the constraints width and height as below code.

JTextArea textAddress = new JTextArea(5, 20);
GridBagConstraints gb_textAddress = new GridBagConstraints();
gb_textAddress.insets = new Insets(5, 5, 5, 5);
gb_textAddress.anchor = GridBagConstraints.WEST;
gb_textAddress.gridwidth = 2;
gb_textAddress.gridheight = 3;
gb_textAddress.gridx = 5;
gb_textAddress.gridy = 3;
contentPane.add(textAddress, gb_textAddress);

In the above code the Address TextArea is require width as 2 cells and Height as 3 cells.

gb_textAddress.gridwidth = 2;
gb_textAddress.gridheight = 3;

after developing the whole class the code look like below.

package com.javaconnect.swing.gb;

import java.awt.EventQueue;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextArea;
import javax.swing.JTextField;
import javax.swing.border.EmptyBorder;

public class GridBagLayoutExample extends JFrame {

	private static final long serialVersionUID = 1L;

	public static void main(String[] args) {
		EventQueue.invokeLater(new Runnable() {
			public void run() {
				try {
					GridBagLayoutExample frame = new GridBagLayoutExample();
					frame.setVisible(true);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		});
	}

	public GridBagLayoutExample() {
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setBounds(100, 100, 700, 300);

		JPanel contentPane = new JPanel();
		contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
		setContentPane(contentPane);

		GridBagLayout gbl_contentPane = new GridBagLayout();
		gbl_contentPane.columnWidths = new int[] { 0, 0, 0, 0, 0, 0, 0, 0 };
		gbl_contentPane.rowHeights = new int[] { 0, 0, 0, 0, 0, 0, 0 };
		gbl_contentPane.columnWeights = new double[] { 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 };
		gbl_contentPane.rowWeights = new double[] { 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0 };
		contentPane.setLayout(gbl_contentPane);

		JLabel labelName = new JLabel("Name :");
		GridBagConstraints gb_labelName = new GridBagConstraints();
		gb_labelName.insets = new Insets(5, 5, 5, 5);
		gb_labelName.anchor = GridBagConstraints.WEST;
		gb_labelName.gridx = 0;
		gb_labelName.gridy = 1;
		contentPane.add(labelName, gb_labelName);

		JTextField textName = new JTextField(20);
		GridBagConstraints gb_textName = new GridBagConstraints();
		gb_textName.insets = new Insets(5, 5, 5, 5);
		gb_textName.anchor = GridBagConstraints.WEST;
		gb_textName.gridwidth = 2;
		gb_textName.gridx = 1;
		gb_textName.gridy = 1;
		contentPane.add(textName, gb_textName);

		JLabel labelCountry = new JLabel("Country :");
		GridBagConstraints gb_labelCountry = new GridBagConstraints();
		gb_labelCountry.insets = new Insets(5, 5, 5, 5);
		gb_labelCountry.anchor = GridBagConstraints.WEST;
		gb_labelCountry.gridx = 4;
		gb_labelCountry.gridy = 1;
		contentPane.add(labelCountry, gb_labelCountry);

		JTextField textCountry = new JTextField(20);
		GridBagConstraints gb_textCountry = new GridBagConstraints();
		gb_textCountry.insets = new Insets(5, 5, 5, 5);
		gb_textCountry.anchor = GridBagConstraints.WEST;
		gb_textCountry.gridwidth = 2;
		gb_textCountry.gridx = 5;
		gb_textCountry.gridy = 1;
		contentPane.add(textCountry, gb_textCountry);

		JLabel labelAge = new JLabel("Age :");
		GridBagConstraints gb_labelAge = new GridBagConstraints();
		gb_labelAge.insets = new Insets(5, 5, 5, 5);
		gb_labelAge.anchor = GridBagConstraints.WEST;
		gb_labelAge.gridx = 0;
		gb_labelAge.gridy = 2;
		contentPane.add(labelAge, gb_labelAge);

		JTextField textAge = new JTextField(20);
		GridBagConstraints gb_textAge = new GridBagConstraints();
		gb_textAge.insets = new Insets(5, 5, 5, 5);
		gb_textAge.anchor = GridBagConstraints.WEST;
		gb_textAge.gridwidth = 2;
		gb_textAge.gridx = 1;
		gb_textAge.gridy = 2;
		contentPane.add(textAge, gb_textAge);

		JLabel labelGender = new JLabel("Gender :");
		GridBagConstraints gb_labelGender = new GridBagConstraints();
		gb_labelGender.insets = new Insets(5, 5, 5, 5);
		gb_labelGender.anchor = GridBagConstraints.WEST;
		gb_labelGender.gridx = 0;
		gb_labelGender.gridy = 3;
		contentPane.add(labelGender, gb_labelGender);

		JTextField textGender = new JTextField(20);
		GridBagConstraints gb_textGender = new GridBagConstraints();
		gb_textGender.insets = new Insets(5, 5, 5, 5);
		gb_textGender.anchor = GridBagConstraints.WEST;
		gb_textGender.gridwidth = 2;
		gb_textGender.gridx = 1;
		gb_textGender.gridy = 3;
		contentPane.add(textGender, gb_textGender);

		JLabel labelAddress = new JLabel("Address :");
		GridBagConstraints gb_labelAddress = new GridBagConstraints();
		gb_labelAddress.insets = new Insets(5, 5, 5, 5);
		gb_labelAddress.anchor = GridBagConstraints.WEST;
		gb_labelAddress.gridx = 4;
		gb_labelAddress.gridy = 3;
		contentPane.add(labelAddress, gb_labelAddress);

		JTextArea textAddress = new JTextArea(5, 20);
		GridBagConstraints gb_textAddress = new GridBagConstraints();
		gb_textAddress.insets = new Insets(5, 5, 5, 5);
		gb_textAddress.anchor = GridBagConstraints.WEST;
		gb_textAddress.gridwidth = 2;
		gb_textAddress.gridheight = 3;
		gb_textAddress.gridx = 5;
		gb_textAddress.gridy = 3;
		contentPane.add(textAddress, gb_textAddress);

		JLabel labelCity = new JLabel("City :");
		GridBagConstraints gb_labelCity = new GridBagConstraints();
		gb_labelCity.insets = new Insets(5, 5, 5, 5);
		gb_labelCity.anchor = GridBagConstraints.WEST;
		gb_labelCity.gridx = 0;
		gb_labelCity.gridy = 4;
		contentPane.add(labelCity, gb_labelCity);

		JTextField textCity = new JTextField(20);
		GridBagConstraints gb_textCity = new GridBagConstraints();
		gb_textCity.insets = new Insets(5, 5, 5, 5);
		gb_textCity.anchor = GridBagConstraints.WEST;
		gb_textCity.gridwidth = 2;
		gb_textCity.gridx = 1;
		gb_textCity.gridy = 4;
		contentPane.add(textCity, gb_textCity);

		JLabel labelState = new JLabel("State :");
		GridBagConstraints gb_labelState = new GridBagConstraints();
		gb_labelState.insets = new Insets(5, 5, 5, 5);
		gb_labelState.anchor = GridBagConstraints.WEST;
		gb_labelState.gridx = 0;
		gb_labelState.gridy = 5;
		contentPane.add(labelState, gb_labelState);

		JTextField textState = new JTextField(20);
		GridBagConstraints gb_textState = new GridBagConstraints();
		gb_textState.insets = new Insets(5, 5, 5, 5);
		gb_textState.anchor = GridBagConstraints.WEST;
		gb_textState.gridwidth = 2;
		gb_textState.gridx = 1;
		gb_textState.gridy = 5;
		contentPane.add(textState, gb_textState);

		JButton btnSave = new JButton("Save");
		GridBagConstraints gb_btnSave = new GridBagConstraints();
		gb_btnSave.insets = new Insets(5, 5, 5, 5);
		gb_btnSave.anchor = GridBagConstraints.EAST;
		gb_btnSave.gridx = 6;
		gb_btnSave.gridy = 6;
		contentPane.add(btnSave, gb_btnSave);

		JButton btnCancel = new JButton("Cancel");
		GridBagConstraints gb_btnCancel = new GridBagConstraints();
		gb_btnCancel.insets = new Insets(5, 5, 5, 5);
		gb_btnCancel.anchor = GridBagConstraints.WEST;
		gb_btnCancel.gridwidth = 2;
		gb_btnCancel.gridx = 7;
		gb_btnCancel.gridy = 6;
		contentPane.add(btnCancel, gb_btnCancel);

	}
}

and once you run the code, the output will be as below image.

5