JavaFX Layouts

Organizing and positioning UI components

📐 What are Layouts?

JavaFX Layouts are container classes that automatically arrange and position UI components. They handle sizing, spacing, and alignment, making it easy to create responsive and organized user interfaces. 


// Simple VBox Layout Example
VBox layout = new VBox(10); // 10px spacing
layout.getChildren().addAll(
    new Label("Title"),
    new TextField("Input"),
    new Button("Submit")
);

Output:

Title

Common Layout Types

⬇️

VBox

Vertical arrangement of components 

VBox vbox = new VBox(5);
vbox.getChildren().addAll(btn1, btn2);
➡️

HBox

Horizontal arrangement of components 

HBox hbox = new HBox(10);
hbox.getChildren().addAll(btn1, btn2);
🏗️

BorderPane

Five-region layout (top, bottom, left, right, center) 

BorderPane border = new BorderPane();
border.setTop(menuBar);
🔲

GridPane

Grid-based layout with rows and columns 

GridPane grid = new GridPane();
grid.add(label, 0, 0);

🔹 VBox and HBox Layouts

The most commonly used layouts for simple arrangements: 

// VBox - Vertical Layout
VBox verticalLayout = new VBox();
verticalLayout.setSpacing(10);
verticalLayout.setPadding(new Insets(15));
verticalLayout.setAlignment(Pos.CENTER);
verticalLayout.getChildren().addAll(
    new Label("User Login"),
    new TextField("Username"),
    new PasswordField(),
    new Button("Login")
);

// HBox - Horizontal Layout  
HBox horizontalLayout = new HBox();
horizontalLayout.setSpacing(10);
horizontalLayout.setAlignment(Pos.CENTER);
horizontalLayout.getChildren().addAll(
    new Button("Save"),
    new Button("Cancel"),
    new Button("Help")
);

Output:

User Login

🔹 BorderPane Layout

Perfect for application-style layouts with distinct regions: 

BorderPane borderPane = new BorderPane();

// Create components for each region
MenuBar menuBar = new MenuBar();
Menu fileMenu = new Menu("File");
menuBar.getMenus().add(fileMenu);

ToolBar toolBar = new ToolBar();
toolBar.getItems().addAll(
    new Button("New"), 
    new Button("Open"), 
    new Button("Save")
);

TextArea contentArea = new TextArea();
contentArea.setPromptText("Main content area...");

Label statusBar = new Label("Ready");

// Set regions
borderPane.setTop(new VBox(menuBar, toolBar));
borderPane.setCenter(contentArea);
borderPane.setBottom(statusBar);

Output:

File Edit View
Ready

🔹 GridPane Layout

Flexible grid system for complex forms and layouts: 

GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(20));

// Add components with column, row positions
grid.add(new Label("Name:"), 0, 0);
grid.add(new TextField(), 1, 0);

grid.add(new Label("Email:"), 0, 1);
grid.add(new TextField(), 1, 1);

grid.add(new Label("Phone:"), 0, 2);
grid.add(new TextField(), 1, 2);

// Span multiple columns
Button submitBtn = new Button("Submit Form");
grid.add(submitBtn, 0, 3, 2, 1); // col, row, colspan, rowspan

// Column constraints for responsive design
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(30);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(70);
grid.getColumnConstraints().addAll(col1, col2);

Output:

Name: Email: Phone:

🔹 StackPane and FlowPane

Additional layout options for special use cases: 

// StackPane - Overlapping components
StackPane stack = new StackPane();
Rectangle background = new Rectangle(200, 100, Color.LIGHTBLUE);
Label overlayText = new Label("Overlay Text");
overlayText.setStyle("-fx-font-size: 18px; -fx-text-fill: white;");
stack.getChildren().addAll(background, overlayText);

// FlowPane - Wrapping layout
FlowPane flow = new FlowPane();
flow.setHgap(5);
flow.setVgap(5);
for (int i = 1; i <= 8; i++) {
    Button btn = new Button("Button " + i);
    flow.getChildren().add(btn);
}

Output:

Overlay Text

🧠 Test Your Knowledge

Which layout arranges components in a vertical stack?