Horizontal and Vertical gap of components in Flow Layout.

AWT FlowLayout Explained With Example

1. Introduction to Flow Layout Manager

In Java, Layout Managers regulates how Controls are laid out in a Container. In this example, we will study about AWT FlowLayout.

The Flow Layout Manager arranges the controls in a row. When there is no room in a row, it moves remaining controls to the next row. Simply speaking, it works like a notepad. The note pad accommodates the words in a line and when there is no room in the current line, it moves the next word to next line.

2. Horizontal Gap and Vertical Gap of FlowLayout

The Horizontal and Vertical gap between the components are represented as hgap and vgap. This also applies to container edge and the component which lives in the container. Have a look at the below picture:

Horizontal and Vertical gap of components in FlowLayout.
Horizontal and Vertical gap of components in FlowLayout.

The above picture shows vgap and hgap between the components. The FlowLayout class provides get and set methods which deals with these horizontal and vertical gaps. In addition to these set and get methods, one can set these gaps through the constructor also.

3. FlowLayout Component Alignment

Flow Layout supports five types of alignments. They are listed below:

  1. RIGHT
  2. LEFT

The alignment tells the container how it should align the components regarding its edge. For example, in LEFT alignment the container places the components towards its left edge. The LEADING and TRAILING alignment types are useful when orientation of the container comes into a picture. However, these two alignments are not frequently used. The below depiction shows the component alignments:

LEFT, RIGHT and CENTER Alignment in Flow Layout
LEFT, RIGHT and CENTER Alignment in Flow Layout

Note, in the above picture, we see three components in three rows. The Flow Layout will try to accommodate the components in a single row. When there is no room in the current row, it will move the next control to next row based on the alignment.

4. FlowLayout Code Example

Now let us add three label and three text fields to AWT Frame Window and see how FlowLayout arranges them.

1) First let us import required classes to our example.

2) Next, we create three labels and three text fields and then add it to the Frame Window. Note, in the text field constructor, we set a 15 character length so that the text field occupies a considerable amount of space in the Frame Window.

3) Finally, we create FlowLayout manager and then hand over it to the Frame Window by calling the setLayout() method. In the first parameter, we set right alignment. In the second and third parameter we pass horizontal and vertical gap between components.

The below screen-shot shows output of executing the example:

Output Of FlowLayout Example
Output Of FlowLayout Example

The below video shows how flow layout works when we resize the Frame Window.

5. Complete Source Code



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.