Skip to content

Swing Layout Managers

TCSS 305 Programming Practicum

Layout managers are the mechanism Swing uses to position and size components within a container. Rather than hardcoding pixel coordinates, you delegate layout decisions to a layout manager object that automatically arranges components based on rules. This guide covers why layout managers exist, the three most commonly used managers, and the composite pattern that makes complex interfaces possible.

1 What is a Layout Manager?

A layout manager is an object that controls how components (buttons, labels, text fields, panels) are positioned and sized within a container (JPanel, JFrame's content pane, etc.). When you add a component to a container, you don't specify where it goes in pixels. Instead, the container's layout manager decides.

JPanel panel = new JPanel();               // JPanel has FlowLayout by default
panel.add(new JButton("OK"));              // Layout manager decides position
panel.add(new JButton("Cancel"));          // Layout manager decides position

The container delegates all positioning and sizing decisions to its layout manager. When the window resizes, the layout manager recalculates positions. When the font changes, the layout manager adapts. When the application runs on a different platform, the layout manager adjusts.

1.1 Why Layout Managers Exist

Layout managers solve three fundamental problems in GUI development:

Dynamic resizing. Users resize windows. A good GUI adjusts gracefully—buttons reflow, panels expand, content stays readable. Layout managers handle this automatically.

Platform independence. A button rendered on macOS is a different size than the same button on Windows or Linux. Fonts differ. Scroll bar widths differ. Border thicknesses differ. Layout managers account for these differences at runtime.

DPI and scaling. Modern displays range from 72 DPI to 300+ DPI. A layout that looks perfect at 1080p may be unusable on a 4K display with scaling. Layout managers work with logical sizes, not pixel coordinates.

Important

Layout managers embody a core principle: separate what you want (components in a toolbar) from how it's achieved (pixel-perfect positioning). This separation makes your GUI resilient to changes you can't predict at design time.

Related Guide

For the Swing component and container hierarchy that layout managers operate on, see the Swing API Basics guide.

2 Why Not Absolute Positioning?

The alternative to layout managers is absolute positioning: set the layout to null and manually place every component with setBounds().

// Absolute positioning — DON'T do this in production code
panel.setLayout(null);
button.setBounds(10, 10, 80, 30);    // x=10, y=10, width=80, height=30
label.setBounds(100, 10, 200, 30);   // x=100, y=10, width=200, height=30

This might seem simpler—you know exactly where everything goes. But it creates serious problems.

2.1 Breaks on Resize

When the user resizes the window, nothing moves. Components stay at their fixed coordinates. The window grows, but the buttons don't reflow. Blank space appears, or worse, components disappear off-screen.

2.2 Breaks Across Platforms

A button that's 80 pixels wide on your machine may need 95 pixels on another platform where the default font is larger. Your carefully positioned layout overlaps and clips on any machine that isn't yours.

2.3 Breaks with Different Fonts and DPI

High-DPI displays, accessibility settings that increase font size, different system themes—all of these change component dimensions. Absolute positioning ignores all of them.

2.4 Tedious to Maintain

Need to add a button between two existing buttons? You must manually recalculate coordinates for every component that comes after it. With a layout manager, you just add() the new component and the manager handles the rest.

Warning

setLayout(null) is acceptable in quick throwaway prototypes where you need something on screen fast. It is almost never acceptable in production code. In TCSS 305, always use layout managers.

3 FlowLayout

FlowLayout is the simplest layout manager and the default for JPanel.

3.1 How It Works

Components are placed left to right in the order they are added. When a row fills up, components wrap to the next line—like words in a paragraph.

+--------------------------------------------------+
|  [ Button 1 ]  [ Button 2 ]  [ Button 3 ]       |
|  [ Button 4 ]  [ Button 5 ]                      |
+--------------------------------------------------+

Each component keeps its preferred size. FlowLayout does not stretch components to fill available space.

3.2 Code Example

JPanel panel = new JPanel();  // FlowLayout is the default
panel.add(new JButton("New"));
panel.add(new JButton("Open"));
panel.add(new JButton("Save"));
panel.add(new JButton("Close"));

You can also create a FlowLayout explicitly to customize alignment and gaps:

// Left-aligned with 10px horizontal gap, 5px vertical gap
JPanel panel = new JPanel(new FlowLayout(FlowLayout.LEFT, 10, 5));

3.3 Alignment Options

Constant Behavior
FlowLayout.CENTER Components centered in each row (default)
FlowLayout.LEFT Components aligned to the left
FlowLayout.RIGHT Components aligned to the right

3.4 When to Use FlowLayout

  • Toolbars with a row of buttons
  • Button panels (OK/Cancel at the bottom of a dialog)
  • Any row of components that should keep their natural size

Note

FlowLayout respects each component's preferred size. If you add a JButton with text "OK," it will be exactly wide enough for "OK." If you add one with "Submit Application," it will be wider. The layout manager does not force uniform sizing.

4 BorderLayout

BorderLayout is the default for JFrame's content pane and one of the most commonly used layout managers.

4.1 How It Works

BorderLayout divides the container into five regions:

+------------------------------------------+
|                  NORTH                   |
+------+------------------------+----------+
|      |                        |          |
| WEST |        CENTER          |   EAST   |
|      |                        |          |
+------+------------------------+----------+
|                  SOUTH                   |
+------------------------------------------+

Key behaviors:

  • NORTH and SOUTH stretch horizontally to fill the container's width; their height is the component's preferred height.
  • EAST and WEST stretch vertically to fill the remaining height; their width is the component's preferred width.
  • CENTER expands to fill all remaining space.

4.2 Code Example

JFrame frame = new JFrame("BorderLayout Demo");
frame.setLayout(new BorderLayout());  // Already the default for JFrame

frame.add(new JButton("North - Toolbar"), BorderLayout.NORTH);
frame.add(new JButton("South - Status"),  BorderLayout.SOUTH);
frame.add(new JButton("East - Details"),  BorderLayout.EAST);
frame.add(new JButton("West - Navigation"), BorderLayout.WEST);
frame.add(new JButton("Center - Main Content"), BorderLayout.CENTER);

4.3 Only One Component Per Region

Each region holds exactly one component. If you add two components to NORTH, the second replaces the first.

But that one component can be a JPanel containing many components:

// A toolbar panel with multiple buttons placed in the NORTH region
JPanel toolbar = new JPanel();  // FlowLayout by default
toolbar.add(new JButton("New"));
toolbar.add(new JButton("Open"));
toolbar.add(new JButton("Save"));

frame.add(toolbar, BorderLayout.NORTH);

This is the key insight that leads to composite layouts (Section 6).

4.4 Empty Regions Are Fine

You don't need to fill all five regions. If you skip EAST and WEST, CENTER expands to fill the entire width. A common pattern is using just NORTH, CENTER, and SOUTH:

+------------------------------------------+
|             Toolbar (NORTH)              |
+------------------------------------------+
|                                          |
|          Main Content (CENTER)           |
|                                          |
+------------------------------------------+
|           Status Bar (SOUTH)             |
+------------------------------------------+

4.5 When to Use BorderLayout

  • Top-level frame organization (toolbar, content, status bar)
  • Any layout where one component should expand to fill available space (put it in CENTER)
  • Layouts where edge components should stay at their preferred size while the center grows

Tip

BorderLayout is extremely common as the outermost layout manager. It gives you a natural structure: toolbar at top, status bar at bottom, main content in the center. The individual regions then use other layout managers internally.

5 GridLayout

GridLayout divides the container into a grid of equal-sized cells.

5.1 How It Works

You specify rows and columns. Components fill cells left to right, top to bottom. Every cell is exactly the same size.

+----------+----------+----------+
| Button 1 | Button 2 | Button 3 |
+----------+----------+----------+
| Button 4 | Button 5 | Button 6 |
+----------+----------+----------+
| Button 7 | Button 8 | Button 9 |
+----------+----------+----------+

Key behavior: Components stretch to fill their cell completely. Preferred size is ignored—every component becomes the same size as every other component.

5.2 Code Example

// A 3x3 grid with 5px horizontal and vertical gaps
JPanel grid = new JPanel(new GridLayout(3, 3, 5, 5));
for (int i = 1; i <= 9; i++) {
    grid.add(new JButton(String.valueOf(i)));
}

5.3 Rows vs. Columns

The constructor is GridLayout(rows, cols). If you set one to zero, it's computed from the other:

new GridLayout(0, 3)   // Any number of rows, exactly 3 columns
new GridLayout(4, 0)   // Exactly 4 rows, any number of columns

Warning

Do not set both rows and columns to zero—this throws an IllegalArgumentException. At least one must be positive.

5.4 When to Use GridLayout

  • Calculator keypads (uniform button grids)
  • Game boards (checkers, tic-tac-toe)
  • Any interface where components should be uniformly sized
  • Color palettes, icon grids, tile layouts

Note

Because GridLayout forces all components to the same size, it's not suitable for layouts where components have naturally different sizes (e.g., a "Submit" button next to a long text field). Use FlowLayout or BorderLayout for those cases.

6 Composite Layouts: Panels Inside Panels

No single layout manager handles every situation. The real pattern in Swing development is nesting panels, each with its own layout manager. This is the composite layout approach, and it's how professional Swing GUIs are built.

6.1 The Idea

A JPanel is both a container (it holds components) and a component (it can be added to other containers). This means you can:

  1. Create a JPanel with FlowLayout for a toolbar
  2. Create another JPanel with GridLayout for a button grid
  3. Add both panels to a JFrame using BorderLayout

Each panel manages its own children independently. The outer layout manager positions the panels; the inner layout managers position the components within each panel.

6.2 Example: A Complete Application Layout

Let's build a layout with a toolbar at the top, a grid of buttons in the center, and a status bar at the bottom:

+--------------------------------------------------+
|  [ New ] [ Open ] [ Save ]       (FlowLayout)   |
+--------------------------------------------------+
|  +--------+--------+--------+                    |
|  |   1    |   2    |   3    |                    |
|  +--------+--------+--------+   (GridLayout)     |
|  |   4    |   5    |   6    |                    |
|  +--------+--------+--------+                    |
|  |   7    |   8    |   9    |                    |
|  +--------+--------+--------+                    |
+--------------------------------------------------+
|  Status: Ready                   (FlowLayout)    |
+--------------------------------------------------+
        (Outer frame uses BorderLayout)

Here is the code that builds this composite layout:

import javax.swing.*;
import java.awt.*;

public class CompositeLayoutDemo {

    public static void main(String[] args) {
        JFrame frame = new JFrame("Composite Layout Demo");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // The frame's content pane uses BorderLayout by default

        // --- NORTH: Toolbar with FlowLayout ---
        JPanel toolbar = new JPanel(new FlowLayout(FlowLayout.LEFT));
        toolbar.add(new JButton("New"));
        toolbar.add(new JButton("Open"));
        toolbar.add(new JButton("Save"));
        frame.add(toolbar, BorderLayout.NORTH);

        // --- CENTER: Button grid with GridLayout ---
        JPanel buttonGrid = new JPanel(new GridLayout(3, 3, 5, 5));
        for (int i = 1; i <= 9; i++) {
            buttonGrid.add(new JButton(String.valueOf(i)));
        }
        frame.add(buttonGrid, BorderLayout.CENTER);

        // --- SOUTH: Status bar with FlowLayout ---
        JPanel statusBar = new JPanel(new FlowLayout(FlowLayout.LEFT));
        statusBar.add(new JLabel("Status: Ready"));
        frame.add(statusBar, BorderLayout.SOUTH);

        frame.setSize(400, 350);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

6.3 Walking Through the Layout Hierarchy

Let's trace how the layout managers work together:

  1. The JFrame uses BorderLayout. It has three children: toolbar (NORTH), buttonGrid (CENTER), statusBar (SOUTH).

  2. toolbar uses FlowLayout(LEFT). Its three buttons are arranged left to right, each at its preferred size. The toolbar panel itself is stretched horizontally by the frame's BorderLayout but maintains its preferred height.

  3. buttonGrid uses GridLayout(3, 3). Its nine buttons are arranged in a 3x3 grid with equal cell sizes. The panel itself expands to fill the CENTER region—and the grid stretches with it.

  4. statusBar uses FlowLayout(LEFT). Its label is placed at the left. Like the toolbar, the panel stretches horizontally but keeps its preferred height.

When the user resizes the window, here is what happens:

  • The toolbar and status bar maintain their heights but stretch wider.
  • The button grid absorbs all vertical growth, and all nine buttons resize equally.
  • No component overlaps. No component disappears. Everything adapts.

6.4 Connection to the Sketch Pad Assignment

In Assignment 3 (Sketch Pad), you will build a drawing application with a composite layout. The structure follows this same pattern:

  • A toolbar (NORTH or WEST) with drawing tool buttons
  • A drawing canvas (CENTER) that fills the available space
  • Possibly a status bar or color chooser in another region

The toolbar uses a layout manager suited for buttons. The canvas takes CENTER so it expands when the window resizes—exactly the behavior you want for a drawing area. This is the composite layout pattern in action.

Related Guides

Important

The composite layout pattern is not optional or advanced—it's the standard approach for building Swing GUIs. Almost every non-trivial Swing application nests panels inside panels. If you find yourself fighting a single layout manager to achieve a complex arrangement, step back and ask: "Should I use two or three panels here instead?"

7 Other Layout Managers

The three layout managers above cover the majority of Swing layouts. Java includes several more that are worth knowing, even if you won't use them as frequently.

7.1 BoxLayout

Arranges components in a single row or single column. Unlike FlowLayout, it respects component alignment and maximum sizes, giving you finer control over spacing.

JPanel panel = new JPanel();
panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));  // Vertical stack
panel.add(new JButton("First"));
panel.add(Box.createVerticalStrut(10));  // 10px spacer
panel.add(new JButton("Second"));
panel.add(Box.createVerticalGlue());     // Flexible space
panel.add(new JButton("Third"));

BoxLayout is useful when you need a column of components with precise spacing control—for example, a sidebar with buttons and separators.

7.2 GridBagLayout

The most flexible built-in layout manager. Components can span multiple rows and columns, have different sizes, and be anchored or padded individually.

The trade-off is complexity. GridBagLayout requires configuring a GridBagConstraints object for every component, specifying grid position, weight, fill, anchor, insets, and span. This is powerful but verbose.

JPanel panel = new JPanel(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
c.gridx = 0;
c.gridy = 0;
c.weightx = 1.0;
c.fill = GridBagConstraints.HORIZONTAL;
panel.add(new JTextField(), c);

Tip

In most cases, composite layouts with BorderLayout, FlowLayout, and GridLayout are easier to write, read, and maintain than a single GridBagLayout. Reserve GridBagLayout for situations where nested panels genuinely can't achieve the layout you need.

7.3 CardLayout

Stacks multiple panels on top of each other and shows one at a time. Useful for wizard-style interfaces, tabbed views without a tab bar, or any UI where you switch between different "pages."

JPanel cards = new JPanel(new CardLayout());
cards.add(createPageOne(), "page1");
cards.add(createPageTwo(), "page2");

// Switch to page 2
CardLayout cl = (CardLayout) cards.getLayout();
cl.show(cards, "page2");

7.4 GroupLayout

Designed for use by GUI builder tools like the NetBeans visual designer. GroupLayout defines horizontal and vertical groups of components separately, then the layout engine resolves them into a 2D arrangement. It is rarely hand-coded.

Oracle Layout Manager Visual Guide

8 Choosing the Right Layout Manager

The following table summarizes the key characteristics of the three primary layout managers:

Layout Manager           Default For Sizing Behavior Best For
FlowLayout JPanel Components keep preferred size; wraps to next row Toolbars, button rows, any "left-to-right flow"
BorderLayout JFrame content pane NORTH/SOUTH stretch wide; EAST/WEST stretch tall; CENTER fills remaining space Top-level frame structure, any layout with a dominant center area
GridLayout (none) All cells equal size; components stretch to fill cell Calculators, game boards, uniform grids
BoxLayout (none) Single row or column; respects preferred/max sizes Vertical stacks, spacing-controlled lists
GridBagLayout (none) Fully configurable per-component Complex forms, when composite layouts aren't enough
CardLayout (none) Shows one child at a time, all same size Page switching, wizard interfaces

Decision guide:

  • Need components in a row at their natural size? Use FlowLayout.
  • Need a main content area that expands with edge panels? Use BorderLayout.
  • Need uniform cells in a grid? Use GridLayout.
  • Need a complex layout? Nest panels with different layout managers (composite pattern).

Gen AI & Learning: Describing Layouts to AI

Layout code is an area where AI coding assistants are notably weaker than with other programming tasks. The spatial reasoning required to map a visual design to the right combination of nested panels, layout managers, and constraints is genuinely difficult for LLMs. You will often get results that compile and run but look wrong -- components in the wrong region, panels that don't resize as expected, or layouts that fall apart at different window sizes. AI tools are improving here, but layout remains a weak spot.

That said, you can get better results by describing your layout in terms of regions and nesting rather than pixel coordinates. For example: "Create a JFrame with a FlowLayout toolbar in NORTH containing three buttons, a drawing panel in CENTER, and a FlowLayout status bar in SOUTH." This maps directly to layout manager concepts and gives the AI a fighting chance. If you ask for pixel-perfect placement, the AI will generate setLayout(null) code that breaks on resize. The more you understand layout managers yourself, the better you can direct, evaluate, and fix AI-generated layout code.

Summary

Concept Key Point
Layout Manager Object that controls component positioning and sizing within a container
Why Not Absolute Positioning Breaks on resize, across platforms, and with different fonts/DPI
FlowLayout Left-to-right flow, wraps on overflow; components keep preferred size
BorderLayout Five regions (N/S/E/W/CENTER); CENTER expands to fill space
GridLayout Equal-sized cells in a grid; components stretch to fill cells
Composite Layouts Nest panels with different layout managers for complex arrangements
One Component Per Region BorderLayout regions hold one component, but that component can be a JPanel

Layout managers are not just a Swing API detail—they represent a broader design philosophy of declaring what you want and letting the framework figure out how to achieve it. Master the big three (FlowLayout, BorderLayout, GridLayout) and the composite pattern, and you can build any Swing GUI.

Further Reading

External Resources

References

Primary Texts:

  • Horstmann, C. S. (2022). Core Java, Volume I: Fundamentals (12th ed.). Oracle Press. Chapter 12: User Interface Components with Swing — Layout Management.
  • Reges, S., & Stepp, M. (2020). Building Java Programs (5th ed.). Pearson. Chapter 14: Graphical User Interfaces — Layout Managers.

Language Documentation:

Additional Resources:

This guide is part of TCSS 305 Programming Practicum, School of Engineering and Technology, University of Washington Tacoma.