GridBagLayout tutorial and example

GridBagLayout Tutorial


In follwing GridBagLayout tutorial we will see some of the important aspects of GridBagLayout with GridBagLayout Example. Though GridBagLayout is some how complex lets see how we can use its feature to placing the components at right place in this GridBagLayout Tutorial .
Most striking feature of a Gridbaglayout is we can place the component which can span multiple rows and columns. We need to set the rectangular cell grid settings and placing the components inside the cells. For these settings we need to use GridBagConstraints class which provides set of constants which provides the constraint on how the component is placed.

Now in this GridBagLayout tutorial lets see how we can create a gridbaglayout and use it.

GridBagLayout Example


To start with GridBagLayout tutorial first lets see
Simple GridBagLayout Example
 
    //GridBagLayout Tutorial
    JFrame gridBagDemo = new JFrame("GridBagLayout Demo");
    JPanel testPanel = new JPanel();
    GridBagLayout gridbagLayoutSettings = new GridBagLayout();
    
    testPanel.setLayout(gridbagLayoutSettings); //Setting grid bag layout to panel
    Label centerLabel = new Label(" Component at center ");
    testPanel.add(new JButton("Grid"));
    testPanel.add(new JButton("Bag"));
    testPanel.add(new JButton("Layout"));
    gridBagDemo.add(testPanel);
    gridBagDemo.setSize(300,300);
    gridBagDemo.setVisible(true);






Gridx and gridy GridBagLayout example



gridx and gridy represent the x and y coordinate. i.e. position where the component is placed. Following GridBagLayout example demonstrates how we can use gridx and gridy properties to place the components at right places.
GridBagLayout example 2 : gridx and gridy
 
//GridBagLayout Tutorial
    Label centerLabel = new Label(" GRID X demo ");
    GridBagConstraints gc = new GridBagConstraints();
    gc.gridx = 0;
    gc.gridy = 0;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    
    testPanel.add(new JButton("Grid"), gc);
    gc.gridx = 1;
    gc.gridy = 0;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    
    testPanel.add(new JButton("Bag"), gc);
    gc.gridx = 0;
    gc.gridy = 1;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    
    testPanel.add(new JButton("Layout"), gc);





Fill options and weightx and weighty settings
When component size is less than the container size fill option comes very handy. Basically this option is to specify how much distribution of component we want in display area. We can have options such as NONE, VERTICAL, HORIZONTAL or BOTH as a fill options. By default value of the fill option is set to NONE.

The fields weight option is for distributing the extra horizontal and vertical spaces without resizing the container. The weights can be set to any double value from 0.0 to 1.0. A component with 0.0 as weight then it doesnt occupy any extra space. By default both weightx and weighty are set to 0. In following GridBagLayout example we can see the use of weightx and weighty.
GridBagLayout example 3 : Fill options and weightx and weighty
 
    //GridBagLayout Tutorial
    Label centerLabel = new Label(" Component at center ");
    GridBagConstraints gc = new GridBagConstraints();
    gc.gridx = 0;
    gc.gridy = 0;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    gc.fill = GridBagConstraints.VERTICAL;
    testPanel.add(new JButton("Grid"), gc);
    gc.gridx = 1;
    gc.gridy = 0;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    gc.fill = GridBagConstraints.BOTH;
    testPanel.add(new JButton("Bag"), gc);
    gc.gridx = 0;
    gc.gridy = 1;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    gc.fill = GridBagConstraints.HORIZONTAL;
    testPanel.add(new JButton("Layout"), gc);




anchor settings

This setting specifies the position where component should be anchored when the component is smaller than its display area. This field is denoted by the geographical directions such as NORTH, NORTHWEST, EAST, SOUTHEAST, CENTER and many more. By default the position is at the center.
GridBagLayout example 4 : anchor settings
    //GridBagLayout Tutorial
    GridBagConstraints gc = new GridBagConstraints();
    gc.gridx = 0;
    gc.gridy = 0;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    gc.anchor = GridBagConstraints.NORTHWEST; // anchor setting
    testPanel.add(new JButton("Grid"), gc);
    gc.gridx = 1;
    gc.gridy = 0;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    gc.anchor = GridBagConstraints.NORTHEAST;
    testPanel.add(new JButton("Bag"), gc);
    gc.gridx = 0;
    gc.gridy = 1;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    gc.anchor = GridBagConstraints.SOUTHEAST;




Inset Settings
insets are used to provide external padding to the components and one of the most important part of this GridBagLayout Tutorial. i.e. space between the component and boundaries of its display area. Using constructor of Insets we can specify top, left, bottom, right space settings. By default the insets field provides no external padding. i.e. Insets(0,0,0,0 ); Following gridbaglayout example shows use of Inset.

 
    GridBagConstraints gc = new GridBagConstraints();
    Insets insets = new Insets(5,10,15,5); // Creating insets
    gc.gridx = 0;
    gc.gridy = 0;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    gc.insets = insets; //Assigning the insets
    gc.fill = GridBagConstraints.BOTH;
    testPanel.add(new JButton("Grid"), gc);
    gc.gridx = 1;
    gc.gridy = 0;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    gc.insets = insets;
    gc.fill = GridBagConstraints.BOTH;
    testPanel.add(new JButton("Bag"), gc);
    gc.gridx = 0;
    gc.gridy = 1;
    gc.weighty = 1.0;
    gc.weightx = 1.0;
    gc.insets = insets;
    gc.fill = GridBagConstraints.BOTH;
    testPanel.add(new JButton("Layout"), gc);




In this GridBagLayout we have covered some GridBagLayout example for each constraint but you also need to do some practical coding to understand how GridBagLayout works. You can also check BorderLayout Tutorial like GridbagLayout Tutorial here.
Share on Google Plus

About Pranav

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

1 comments:

  1. Very nice and easy to understand examples!

    ReplyDelete