TilePane

TilePane in JavaFX is a layout container that arranges its children in uniform tiles, either horizontally or vertically.

• Each “tile” is a node (Button, Label, ImageView, etc.).
• Tiles automatically wrap to the next row or column if space is insufficient.
• Good for icon grids, photo galleries, dashboards.

Basic Example (Horizontal TilePane)

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;

public class TilePaneExample extends Application {

    @Override
    public void start(Stage stage) {

        TilePane tilePane = new TilePane();
        tilePane.setHgap(10); // horizontal gap
        tilePane.setVgap(10); // vertical gap
        tilePane.setPrefColumns(3); // 3 tiles per row
        tilePane.setOrientation(Orientation.HORIZONTAL); // horizontal wrapping

        // Add buttons as tiles
        for (int i = 1; i <= 9; i++) {
            tilePane.getChildren().add(new Button("Tile " + i));
        }

        Scene scene = new Scene(tilePane, 300, 200);
        stage.setTitle("TilePane Example");
        stage.setScene(scene);
        stage.show();
    }

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

Result:

Tile 1  Tile 2  Tile 3
Tile 4  Tile 5  Tile 6
Tile 7  Tile 8  Tile 9

• Tiles wrap automatically when the row is full.

Key Properties

tilePane.setHgap(10);           // horizontal gap
tilePane.setVgap(10);           // vertical gap
tilePane.setPrefColumns(3);     // number of columns
tilePane.setPrefRows(2);        // number of rows
tilePane.setOrientation(Orientation.HORIZONTAL); // horizontal or vertical

• Orientation.HORIZONTAL → fills rows first, then wraps to next row
• Orientation.VERTICAL → fills columns first, then wraps to next column

Vertical TilePane Example

TilePane tilePane = new TilePane();
tilePane.setOrientation(Orientation.VERTICAL); // fill top-to-bottom
tilePane.setPrefRows(3);
tilePane.setVgap(10);
tilePane.setHgap(10);

FXML Version

<TilePane xmlns:fx="http://javafx.com/fxml" hgap="10" vgap="10" prefColumns="3">
    <children>
        <Button text="Tile 1"/>
        <Button text="Tile 2"/>
        <Button text="Tile 3"/>
        <Button text="Tile 4"/>
        <Button text="Tile 5"/>
        <Button text="Tile 6"/>
    </children>
</TilePane>

Use Cases

• Dashboard with buttons
• Photo gallery / thumbnails
• Icon grids

💡 Tip: Combine TilePane with a ScrollPane to make scrollable grids:

ScrollPane scrollPane = new ScrollPane(tilePane);
scrollPane.setFitToWidth(true);