Java GUI layout

Creating a graphical user interface and elements for it alone is not enough, you have to know where and how to place these graphical elements such as textboxes and buttons. For this purpose, there are classes called layout managers. These layout managers decide where and how components will be placed. Layout manager classes are located in the java.awt package.

This lesson focuses on:

The FlowLayout class
The GridLayout class

The FlowLayout class

The FlowLayout class is used to arrange components from left to right. If there is no more room, the next component will be wrapped onto a new line.

FlowLayout class constructors:

FlowLayout()
Creates a new instance of FlowLayout.
FlowLayout(int alignment)
Creates a new instance of FlowLayout with the specified alignment. Possible values for the alignment include FlowLayout.LEFT, FlowLayout.CENTER, FlowLayout.RIGHT, FlowLayout.LEADING, FlowLayout.TRAILING.

You can set a frame to use FlowLayout by using the setLayout() method:

aFrame.setLayout(aFlowLayout);

Example:

import java.awt.*;

class FrameWithFlowLayout{

    public static void main(String[] args){

    //create a new frame whose 
    //title is "Frame with components"
    Frame AFrame = new Frame("Frame with flowlayout");

    //create a label, a button, a textbox, and a textarea
    Label lblOne = new Label("This is a label");
    Button btn1 = new Button("This is a button");
    TextField tf1 = new TextField();
    TextArea ta1 = new TextArea();

    //set the text of the
    //textfield to "This is a textbox
    tf1.setText("This is a textbox");

    //append to the textarea the text
    //"Number of columns in this textarea: "
    //+ the number of columns in the textarea
    ta1.append("Number of columns in this textarea: " 
                + ta1.getColumns());

    //add the components to the frame
    AFrame.add(lblOne);
    AFrame.add(btn1);
    AFrame.add(tf1);
    AFrame.add(ta1);

    //set the size of
    //the frame to 450 by 300
    AFrame.setSize(450, 300);

    //set the layout of
    //the frame to FlowLayout
    AFrame.setLayout(new FlowLayout());

    //set the frame to be initially visible
    AFrame.setVisible(true);

    }

}

Output:

In the above example, a class named FrameWithFlowLayout is created. Within the main() method of this class, a frame is created, as well as a label, a button, a textbox, and a textarea. The text that will appear on the label and the button is set in their initialization. The text that will appear in the textbox is set through the setText() method. The text that will appear in the textarea is set through the append() method. Another method used with the textarea is getColumns, which is used to return the number of columns in the textarea.

The size of the frame is set to 450 by 300 with the setSize method. The layout of the frame is set to FlowLayout with the setLayout() method. The frame is set to be initially visible with the setVisible() method.

The GridLayout class

The GridLayout class is used to arrange components in a grid of equally sized rectangular cells.

GridLayout class constructors:

GridLayout()
Creates a new GridLayout which has one row by default.
GridLayout(int rows, int columns)
Creates a new GridLayout with the specified number of rows and columns.

You can set a frame to use GridLayout by using the setLayout() method:

aFrame.setLayout(aGridLayout);

Example:

import java.awt.*;

class FrameWithGridLayout{

    public static void main(String[] args){

    //create a new frame whose 
    //title is "Frame with components"
    Frame AFrame = new Frame("Frame with gridlayout");

    //create a label, a button, a textbox, and a textarea
    Label lblOne = new Label("This is a label");
    Button btn1 = new Button("This is a button");
    TextField tf1 = new TextField();
    TextArea ta1 = new TextArea();

    //set the text of the
    //textfield to "This is a textbox
    tf1.setText("This is a textbox");

    //append to the textarea the text
    //"Number of columns in this textarea: "
    //+ the number of columns in the textarea
    ta1.append("Number of columns in this textarea: " 
                + ta1.getColumns());

    //add the components to the frame
    AFrame.add(lblOne);
    AFrame.add(btn1);
    AFrame.add(tf1);
    AFrame.add(ta1);

    //set the size of
    //the frame to 450 by 300
    AFrame.setSize(450, 300);

    //set the layout of
    //the frame to GridLayout
    //specify the layout to have 2 rows and 2 columns
    AFrame.setLayout(new GridLayout(2, 2));

    //set the frame to be initially visible
    AFrame.setVisible(true);

    }

}

Output:

In the above example, a class named FrameWithGridLayout is created. Within the main() method of this class, a frame is created, as well as a label, a button, a textbox, and a textarea. The text that will appear on the label and the button is set in their initialization. The text that will appear in the textbox is set through the setText() method. The text that will appear in the textarea is set through the append() method. Another method used with the textarea is getColumns, which is used to return the number of columns in the textarea.

The size of the frame is set to 450 by 300 with the setSize method. The layout of the frame is set to GridLayout (having 2 rows and 2 columns) with the setLayout() method. The frame is set to be initially visible with the setVisible() method.