JavaFX TilePane Layout Tutorial with Examples

TilePane Layout
TilePane example
Design TitlePane on Scene Builder

1. TilePane Layout

TilePane is a container which is so similar to FlowPane. It arranges the consecutive subcomponents on a row, and automatically pushes the subcomponents down to next line if the current line is filled up. However, it differs from FlowPane because the subcomponents lie on the same size cell.

The subcomponents lie on the same size grid cells

2. TilePane example

TilePaneDemo.java

package org.o7planning.javafx.tilepane;

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

public class TilePaneDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        TilePane root = new TilePane();
        
        root.setPadding(new Insets(10,10,10,10));        
        root.setHgap(20);
        root.setVgap(30);
        
        Button button = new Button("Java");
        root.getChildren().add(button);
        
        // Short Button
        Button button1 = new Button("C/C++");
        button1.setPrefSize(70, 50);
        root.getChildren().add(button1);
        
        // Short Button
        Button button2 = new Button("C#");
        
        root.getChildren().add(button2);
        
        // Button
        Button longButton3 = new Button("Objective C");
        root.getChildren().add(longButton3);
        
        // Button
        Button button4 = new Button("Swift");
        root.getChildren().add(button4);

        Scene scene = new Scene(root, 500, 300);
        primaryStage.setTitle("TilePanel Layout Demo (o7planning.org)");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

Running the example:

3. Design TitlePane on Scene Builder

It is easy for you to design the interface by using JavaFX Scane Builder. This below illustration shows the TilePane design with Scane Builder.