Skip to content

AWT GridBagLayout GridBagConstraints Weightx, WeightY & Fill

1. Introduction to GridBagLayout & GridBagConstraints

We had seen many Layouts in past examples on Java AWT. The GridBagLayout is the most flexible layout in the Java AWT packages. But this comes with the cost of complexity held in the setup of GridBagLayout. You can imagine GridBagLayout as GridLayout with change in cell sizes. Here, we can add controls in relation with the existing one.

The GridBagLayout makes use of the specific settings for each controls which can be set using the GridBagConstraints class. Before adding the controls to the GridBagLayout class, we need to set these component specific setup rules. The bag layout will make use of these setup factors to arrange the components in the parent container.

2. Default Behavior of GridBagLayout

Let us see the default behaviour of the GridBagLayout manager:

At Line 7, we set GridBagLayout to our Frame Window. Then we add five buttons to it. The below picture shows how this layout arranges these five buttons. You can see GridBagLayout Manager packed all the five buttons towards the center of the AWT Frame.

Default Behavior of GridBagLayout
Default Behavior of GridBagLayout

3. Horizontal Relative Size via GridBagConstraints weightx

The weightx property tells how components need to be placed in the container. In the above screenshot, you can see the layout manager is packing the buttons tightly in a single row. There is no gap between the buttons as all buttons are having the default weightx. In the below code, we use GridBagConstraints to set weightx for each component.

After setting the Java AWT Frame with GridBagLayout, we create GridBagConstraints instance at Line 11 and store its reference in gcon. Note, we pass the same instance of this constraint while adding the components to the container and change only the required properties. Before adding button 1, we set its weightx to 1. Then for button 2, we give weightx of 2. Then; we reset the weightx to 1 again and give it to button 3, button 4 and button 5. The net result is: All buttons have weightx of 1 except button2, which has weightx of 2. Below is the code:

Below is the picture which shows how the GridBagLayout manager arranges all five buttons now:

GridBagConstraints WeightX
GridBagConstraints WeightX

When we specify the weightx, the buttons are not packed tightly. There is some gap between the buttons and Layout Manger while placing the buttons uses the full width of the AWT frame. Also notice the gap marked in the above screen. The gaps for button2 on both sides are higher than the other buttons, as it is having weightx=2 compared with other buttons which are having weightx of 1.

4 Fill Horizontal and weightx of GridBagConstraints

Now let us change the code from the previous section. In the below code, we specified the Fill method as GridBagConstraints.HORIZONTAL. The code is below:

The GridBagLayout now arranges the controls as in the below picture. Since we specified fill as horizontal, the GridBagLayout manager resized all buttons to occupy the entire width of the container and it is in our case is an AWT Frame. Also, we can observe button 2 is two times bigger than other buttons because it has weightx of 2 while other buttons have 1.

Relative Size of Buttons with WeightX & Fill Horizontal
Relative Size of Buttons with WeightX & Fill Horizontal

5. GridBagConstraint.gridwidth – REMINDER

We can set gridwidth to GridBagConstraints.REMAINDER to ask the layout manager to end the current row and start a new one. The component which has this attribute will occupy the remaining empty space in the current row. In the above screen, all five buttons are in the same row. Now will use the gridwidth to arrange these five buttons in three rows. Have a look at the below code:

After adding button 1, we set gridwidth with a constant GridBagConstraints.REMAINDER for button 2. This tells the GridBagLayout manager to end the current row by consuming rest of the space in the current row for button 2. Since, button 2 and button 1 both has same weight set (weightx=1), they take up same space in the first row. The layout manager will add the next component in the next row.

The same way, we keep button 3 and button 4 in the second row using the gridwidth REMINDER. Note, we reset gridwidth as 1 at line 24 to avoid button 3 spawning the entire second row. Moreover, before adding button 4, we end the row by setting gridwidth to REMINDER. Since we add button 5 also with the gridwidth REMINDER; it occupies entire third row. Running the above code snippet produces following result:

GridBagConstraint GridWidth.Reminder Behavior
GridBagConstraints GridWidth.Reminder Behavior

6. GridBagConstraints – weightx, weighty & fill Combination

Till now, we have looked at the horizontal fill. The below picture shows the combination weightx, weighty and Fill:

GridBagLayout WeightX WeightY Fill Combination
GridBagLayout WeightX WeightY Fill Combination

7. GridBagLayout & GridBagConstraints – Watch as YouTube

Do you like this Example? Please comment about it for others!!

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

%d bloggers like this: