Positioning components without hardcoding pixel coordinates
Hardcoding an exact x, y position for every button breaks the moment the window resizes. A layout manager positions components using rules instead of fixed numbers.
After this lesson
You should be able to
- Explain why hardcoded pixel positions break when a window is resized.
- Choose an appropriate layout manager (border, grid, or flow) for a simple interface.
- Describe what BorderLayout's five regions are.
Why fixed coordinates are a trap
Placing a button at exact coordinates (50, 100) works only for one specific window size. Resize the window, and the button stays at (50, 100) while everything around it has changed shape — buttons overlapping text, or huge gaps of empty space. This is the GUI equivalent of a CS105ES array with a hardcoded size that silently breaks the moment the real data does not match your assumption.
A layout manager solves this by positioning components using rules — put this in the center, that along the top — that automatically recompute whenever the window changes size, the same way a responsive design adapts instead of assuming one fixed screen.
The five layout managers, by shape
FlowLayout places components left to right, wrapping to a new row when the current one fills up, like text wrapping in a document. BorderLayout divides the container into five named regions — North, South, East, West, and Center — with Center taking whatever space the other four leave behind. GridLayout arranges components into a strict grid of equal-sized cells, specified by rows and columns.
CardLayout stacks components like a deck of cards, showing only one at a time and switching between them — useful for wizard-style screens. GridBagLayout is the most flexible and most complex, letting individual components span multiple rows or columns with fine control; reach for it only when the simpler four genuinely cannot express what you need.
import java.awt.BorderLayout;
import javax.swing.*;
JFrame frame = new JFrame("Layout Demo");
frame.setLayout(new BorderLayout());
frame.add(new JButton("Top"), BorderLayout.NORTH);
frame.add(new JButton("Bottom"), BorderLayout.SOUTH);
frame.add(new JButton("Middle"), BorderLayout.CENTER);
// resizing the frame keeps Top pinned to the top, Bottom to the bottomTry it yourself
Design a simple calculator button panel: describe in words which layout manager you would use for the row of 4x4 number and operator buttons, and which you would use to place that panel below a single text field showing the result.
Need a hint?
A strict, equal-sized grid of buttons is exactly what one layout manager was built for by name.
Check the worked solution
GridLayout(4, 4) is the natural fit for the button grid, since every button should be the same size in a strict rows-and-columns arrangement. BorderLayout then places that button panel in the Center and the result text field in the North, so the overall window stays correctly arranged no matter how it is resized.
Quick check
Why does placing a button at a fixed pixel coordinate like (50, 100) cause problems when the window is resized?
Why this lesson exists
Syllabus mapping
graphics, layout manager – layout manager types – border, grid, flow, card and grid bag.
Maps to course outcome CO4.