1. Cells of GridBagLayout & GridBagLayoutConstraints

The GridBagLayout packs controls in a grid of cells just like GridLayout. The change is, in GridLayout all the cells take up an equal amount of space and one cell can hold only one control in it. But in GridBagLayout, we can add a component to hold more cells. We can do this via the GridBagConstraints. Now look at the below picture:

Here, the GridBagLayout comprises of 16 cells. In x axis, we have 4 slots and in y axis we have 4 slots. These together form a grid of 16 cells. The gridx and gridy properties of GridBagConstraints represents these slots. In the above picture you can also see placement of the 9 buttons and how they vary in size.

The properties gridheight & gridwidth tell how many cells a control must cover. The gridwidth property spawns a control horizontally and gridheight property spawns it vertically. In this example, we will create 9 buttons and add it to the AWT Frame window, which is managed by GridBagLayout. Along the way, we will learn about the gridx, gridy, gridwidth and gridheight properties of the GridBagConstraints.

2. Button 1 and 2 – Learn gridx, gridwidth of GridBagConstraints

First, we create all the nine buttons. Then set GridBagLayout to the AWT Frame. Below is the code:

In this section, we want to add button 1 and 2 in the first row of the GridBagLayout. Also, we want to give equal weight for both the buttons and hence we set the weightx and weighty as 1 in the GridBagConstraints. We set the fill method as BOTH and this tells the GridBagLayout to expand the buttons to coverup the full space of the Frame.

Before adding button 1, we set its location on the GridBagLayout by setting the gridx & gridy properties of the GridBagConstraints. Next, we set gridwidth as 2 and gridheight as 1. This means button 1 will occupy two slots in the first row and one slot in the height. You can refer the first picture again. 

We use same GridBagConstraints object and make some change in its properties. We like to add button 2 in the same row after button 1. So we change only gridx from 0 to 2 before adding button 2. From the GridBagConstraints, the GridBagLayout knows that the location of the button 2 is starting in the third slot of the first row.

Now, if we run the code, it produces the following output:

At this stage, the GridBagLayout knows it has four cells in x direction. But it treats there is only one cell in the y direction.

3. Add Button 3 …6 – Learn gridy of GridBagConstraints

We want to add the next set of buttons in the second row and hence we need to set gridy = 2. In this second row; we want to add four buttons. In the previous row, we have two buttons: those occupy the full width of the Frame with gridwidth=2. Now, we need to set gridwidth as 1 for next four buttons so that each button in this second will occupy one cell space.

Before adding these 4 buttons, we keep on changing the gridx value to position them in the second row, one after another. Also note, we fix the gridy=2; for all these four buttons. This tells the GridBagLayout to keep all these 4 buttons in the second row. By this time, the layout manager knows it contains 4 cells in X direction and 2 cells in Y direction. Have a look at the below code:

By running the above code, we can get the following result:

The above screen shows how six buttons are placed in the Frame. You can notice, no change in the AWT Frame size to provide room for additional 4 buttons. The GridBagLayout manager reduced the button 1 and button 2 size and gave room for these 4 buttons. Button 1 and 2 have gridwidth of 2 while all four buttons in the second row are having gridwidth of 1.

4. Add Button 7 & 8 – Learn gridx, gridy & gridwidth

For button 7, we set following GridBagConstraints:

1. gridx=0: Tells to start button 7 at very first cell location in the x direction.
2. gridy=2: Tells to start button7 in the third cell location in the y direction. Now, GridBagLayout knows the demand for the third row.
3. gridwidth=3: GridBagLayout allocates three cells for button 7.

For button 8, we provide gridy as 3 to indicate the existence of the fourth row in the vertical cell stack and other GridBagConstraints are same for button 8. Note, in the below code, the line numbers 11 and 9 are not required as we again set same property values for button 8.

At this stage running the code will produce the following result. Note down the empty, unoccupied space in the AWT Frame. We will fill this space with button 9 in the next section.

After adding button 7:

After adding button 8:

5. Add Button 9 – Learn gridheight of GridBagConstraints

The below code adds Button 9 in the empty unused space of the GridBagLayout. Below are the properties set for the GridBagConstraints:

1. gridx=3: Start button 9 in the 4th cell location because, first three cells are occupied by button 7.
2. gridy=2: Start button 9 in the third row.
3. gridwidth=1: Occupy one cell width horizontally.
4. gridheight=2: Occupy two cells height vertically (i.e.) third and fourth row.

The code is below:

Running the above code will produce the following result:

6. Complete Code Example

7. Watch Example as YouTube Video

• AWT GridBagLayout GridBagConstraints Weightx, WeightY & Fill
• AWT Choice Control Explained

Categories: AWT

Tags: GridBagConstraints, GridBagConstraints.gridheight, GridBagConstraints.gridwidth, GridBagConstraints.gridx, GridBagConstraints.gridy, GridBagLayout

This site uses Akismet to reduce spam. Learn how your comment data is processed.