GridPane

GridPane is a layout container that arranges elements in rows and columns, like a table.

It is one of the most useful layouts in JavaFX, especially for:

• forms
• settings pages
• login screens
• calculator layouts
• any UI with labels and inputs

Example:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class GridPaneExample extends Application {

    @Override
    public void start(Stage stage) {

        GridPane grid = new GridPane();

        // Space between columns and rows
        grid.setHgap(10);
        grid.setVgap(10);

        // Add elements: node, column, row
        grid.add(new Label("Username:"), 0, 0);
        grid.add(new TextField(),         1, 0);

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

        grid.add(new Button("Login"),    1, 2);

        Scene scene = new Scene(grid, 300, 150);

        stage.setTitle("GridPane Example");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

The layout looks like:

Username: [__________]
Password: [__________]
           [ Login ]

The numbers in grid.add(...) mean:

grid.add(node, column, row);

Example:

grid.add(new Label("Name"), 0, 0);

• column = 0
• row = 0

So the label is placed in the first column and first row.

You can make a control span multiple columns or rows:

Button button = new Button("Submit");
grid.add(button, 0, 2, 2, 1);

Meaning:

grid.add(node, column, row, columnSpan, rowSpan);

So the button starts at column 0, row 2, and spans 2 columns.

Example:

[      Submit      ]

You can also set padding around the whole grid:

grid.setPadding(new Insets(15));

And alignment:

grid.setAlignment(Pos.CENTER);

Full improved example:

GridPane grid = new GridPane();

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

Label nameLabel = new Label("Name:");
TextField nameField = new TextField();

Label emailLabel = new Label("Email:");
TextField emailField = new TextField();

Button saveButton = new Button("Save");

grid.add(nameLabel, 0, 0);
grid.add(nameField, 1, 0);

grid.add(emailLabel, 0, 1);
grid.add(emailField, 1, 1);

grid.add(saveButton, 1, 2);

FXML version:

<GridPane hgap="10" vgap="10"
          xmlns:fx="http://javafx.com/fxml">

    <children>
        <Label text="Username:"
               GridPane.columnIndex="0"
               GridPane.rowIndex="0"/>

        <TextField GridPane.columnIndex="1"
                   GridPane.rowIndex="0"/>

        <Button text="Login"
                GridPane.columnIndex="1"
                GridPane.rowIndex="1"/>
    </children>
</GridPane>

You can control column sizes with ColumnConstraints:

ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(30);

ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(70);

grid.getColumnConstraints().addAll(col1, col2);

This makes:

• first column = 30% width
• second column = 70% width

building forms and settings pages in JavaFX, GridPane is probably one of the best layouts for:

• monitor settings
• wallpaper path + browse button
• configuration forms
• login/settings pages