Nirav Raval's Blog For Java Developer: GridBag Layout Tutorial

GridBag Layout Tutorial

Hello Friends,
Nice to meet you again.

Today we will learn GridBag Layout.
GridBag Layout is one of the most complex layout of Java Swing.
But here I am giving simple example that will help you to learn to apply basic GridBag Layout.

The output will be:

Now create one class GridBagDemo.java and pate the below code in it and run it.
-------------------------------------------------------------------------------------------------------------

import java.awt.Insets;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.*;
import javax.swing.border.EmptyBorder;

public class GridBagDemo extends JFrame{

public GridBagDemo()
{
super("GridBag Layout");
new EmptyBorder(15, 15, 15, 15);
Dimension labSize=new Dimension(80, 20);

JPanel panel=new JPanel();
panel.setLayout(new GridBagLayout());
GridBagConstraints cn=new GridBagConstraints();
panel.setBackground(Color.pink);

cn.insets=new Insets(5, 5, 5, 5);
cn.gridx=0;
cn.gridy=0;

JLabel labName=new JLabel("Name");
labName.setPreferredSize(labSize);
panel.add(labName);

cn.gridx=1;
cn.gridy=0;
cn.gridwidth=2;
cn.anchor=GridBagConstraints.WEST;
JTextField textName=new JTextField();
textName.setPreferredSize(new Dimension(240, 20));
panel.add(textName,cn);

cn.gridx=0;
cn.gridy=1;
cn.gridwidth=1;
cn.anchor=GridBagConstraints.NORTH;
JLabel labAddress=new JLabel("Address");
labAddress.setPreferredSize(labSize);
panel.add(labAddress,cn);

cn.gridx=1;
cn.gridy=1;
cn.gridwidth=2;
JTextArea textAddress=new JTextArea();
textAddress.setPreferredSize(new Dimension(240,80));
panel.add(textAddress,cn);

cn.gridx=1;
cn.gridy=2;
cn.gridwidth=1;
JButton butOK=new JButton("Submit");
panel.add(butOK,cn);

cn.gridx=2;
cn.gridy=2;
JButton butCANCEL=new JButton("CANCEL");
panel.add(butCANCEL,cn);
add(panel);
pack();

butOK.addActionListener(new ActionListener() {

@Override
public void actionPerformed(ActionEvent arg0) {
// TODO Auto-generated method stub
JOptionPane.showMessageDialog(null, "This is the simple Gridbag " +
"Layout Demo.","Helloooo!",JOptionPane.INFORMATION_MESSAGE);
}
});

setResizable(false);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}

public static void main(String s[])
{
new GridBagDemo();
}
}
-------------------------------------------------------------------------------------------------------------

So here we have used some strange words like GridBagConstraints, gridx, gridy, gridwidth etc.
Ok so lets first understand these words and its use in GridBag Layout.

1) GridBagConstraints:

Normally if do not use this GridBagConstraints than by default in Grid Bag Layout the components will be placed in a single row from left to right .Try after removing cn from panel.add line for each components and you will see all components are placed in a row from left to right. So GridBagConstraints is used to make changes in position of a component in a Grid Bag Layout. For this we have to use different methods of GridBagConstraints like gridx, gridy, gridwidth etc. So this GridBagConstraints will binds and packs all components in a way we want.

2) insets (top, left, bottom, right):

insets is a method of GridBag Layout to leave empty spaces around the components. By default insets value is ( 0, 0, 0, 0 ). But we can set it as per our needs. insets has 4 parameters ( top, left, bottom, right ). All are in int. So if For Example you write insets ( 5,5,5,5 ) that means 5 pixels from Top, Left, Bottom And Right will be left and then the components will be placed.

3) gridx:

gridx is refers to the column in the GridBagLayout. By default it is zero. i.e. the first column. You can set it as per your need to place the component in particular column.

4) gridy:

gridy is refers to the row in the GridBagLayout. By default it is zero. i.e. the first row. You can set it as per your need to place the component in particular row.

5) gridwidth:

gridwidth is refers to the width of a cell in a GridBagLayout. By default it is zero. the component will have width of 1 cell..

You can set it as per your need to place the component in particular row. For example, If you want to place a component which should cover two cell than set gridwidth=2.

-------------------------------------------------------------------------------------------------------------
At first glance, you will find this very complex to use.
But after some playing with this code you will find that it is very comfortable and a good layout to use.
This is the only Layout which gives us the full freedom to place Swing Components anywhere as we want.
Because we can put any components at any place through this GridBag Layout.

Try this code and feel free to ask any dought or giving any suggession.
I always invite your valuable suggessions.

Thank you.
Nirav Raval

----------------------------------------------------------------------------------

Follow Other Java Swing Tricks....