Layout Managers

So far, everything drawn on PaintApplet has been hand-drawn pixels via Graphics. AWT also has real, clickable UI components - buttons, labels, text fields - and where those land on screen is decided by a layout manager, not by pixel coordinates you pick yourself. Before adding actual buttons to PaintApplet in the next lesson, this page covers the three layout managers you'll run into constantly, using a small standalone demo applet.

Why a Manager at All?

You set a layout manager on a container with setLayout(new SomeLayout(...)) before calling add() for its child components. From then on, the manager - not you - decides each component's exact position and size whenever the container is shown or resized. The same three add() calls produce a completely different look depending on which manager is active.

public class LayoutDemoApplet extends Applet {
    public void init() {
        setLayout(new FlowLayout());  // try swapping this line
        add(new Label("Name:"));
        add(new Button("OK"));
        add(new Button("Cancel"));
    }
}

FlowLayout

new FlowLayout() is the default layout for Applet and Panel. It lays components out left-to-right in the order they were added, wrapping to a new row when it runs out of horizontal space - much like text wrapping in a paragraph. With the code above, setLayout(new FlowLayout()) produces the label and both buttons sitting in a single row, each sized to fit its own content.

BorderLayout

new BorderLayout() is the default for Frame, Window, and Dialog. It divides the container into five fixed regions, and each child must be added with a region constant: BorderLayout.NORTH, SOUTH, EAST, WEST, and CENTER (which stretches to fill whatever space the other four don't use). Reusing the same three components under BorderLayout means changing the add() calls to include a region:

setLayout(new BorderLayout());
add(new Label("Name:"), BorderLayout.NORTH);
add(new Button("OK"), BorderLayout.WEST);
add(new Button("Cancel"), BorderLayout.EAST);

Now the label sticks to the top edge, one button hugs the left edge, and the other hugs the right - each stretched to fill its whole region in the dimension the region doesn't fix.

GridLayout

new GridLayout(rows, cols) arranges components into a fixed grid of equal-size cells, filled in the order they're added, row by row. It has no per-component region names - the manager alone decides based on the fixed row/column count:

setLayout(new GridLayout(2, 2));
add(new Label("Name:"));
add(new Button("OK"));
add(new Button("Cancel"));

With only three components added into a 2x2 grid, the fourth cell is simply left empty - every cell is still the same equal size, whether it holds a component or not.