Java GUI - Creating GridPane Layout in JavaFX

In this Java GUI article we are going to learn about Creating GridPane Layout in JavaFX, so

using Grid we can arrange children components with a flexible row and columns.If a border or

padding is set, then its content will be layed out within those insets.

A child may be placed anywhere within the grid and may span multiple rows/columns. Children

may freely overlap within rows/columns and their stacking order will be defined by the order of

the gridpane’s children list (0th node in back, last node in front).

Also you can check Python GUI Development Tutorials in the below link.

1: PyQt5 GUI Development Tutorials

2: TKinter GUI Development Tutorials

3: Pyside2 GUI Development Tutorials

4: Kivy GUI Development Tutorials

5: wxPython GUI Development Tutorials

You can create GridPane layout or container by creating the object of GridPane class like this.

GridPane grid = new GridPane();

1	GridPane grid = new GridPane();

So now this is the complete code for Java GUI – Creating GridPane Layout in JavaFX

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

public class GridPaneLayout extends Application {

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

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Grid Pane Layout");

        GridPane grid = new GridPane();

        Button btn1 = new Button("Btn 1");
        Button btn2 = new Button("Btn 2");
        Button btn3 = new Button("Btn 3");
        Button btn4 = new Button("Btn 4");
        Button btn5 = new Button("Btn 5");
        Button btn6 = new Button("Btn 6");

        grid.add(btn1, 0,0,1,1);
        grid.add(btn2, 1,0,1,1);
        grid.add(btn3, 2,0,1,1);
        grid.add(btn4, 0,1,1,1);
        grid.add(btn5, 1,1,1,1);
        grid.add(btn6, 2,1,1,1);

        Scene scene = new Scene(grid, 300, 250);
        stage.setScene(scene);
        stage.show();


    }
}

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.GridPane;

import javafx.stage.Stage;

public class GridPaneLayout extends Application {

public static void main(String[] args) {

launch(args);

}

@Override

public void start(Stage stage) {

stage.setTitle("JavaFX Grid Pane Layout");

GridPane grid = new GridPane();

Button btn1 = new Button("Btn 1");

Button btn2 = new Button("Btn 2");

Button btn3 = new Button("Btn 3");

Button btn4 = new Button("Btn 4");

Button btn5 = new Button("Btn 5");

Button btn6 = new Button("Btn 6");

grid.add(btn1, 0,0,1,1);

grid.add(btn2, 1,0,1,1);

grid.add(btn3, 2,0,1,1);

grid.add(btn4, 0,1,1,1);

grid.add(btn5, 1,1,1,1);

grid.add(btn6, 2,1,1,1);

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

stage.setScene(scene);

stage.show();

}

Every JavaFX application should have a container, a container is like layout. as we

have created a GridPane container in the above code.

 GridPane grid = new GridPane();

1	GridPane grid = new GridPane();

We are going to add six buttons in our GridPane Layout in JavaFX, so these are the buttons.

Button btn1 = new Button("Btn 1");
Button btn2 = new Button("Btn 2");
Button btn3 = new Button("Btn 3");
Button btn4 = new Button("Btn 4");
Button btn5 = new Button("Btn 5");
Button btn6 = new Button("Btn 6");

Button btn1 = new Button("Btn 1");

Button btn2 = new Button("Btn 2");

Button btn3 = new Button("Btn 3");

Button btn4 = new Button("Btn 4");

Button btn5 = new Button("Btn 5");

Button btn6 = new Button("Btn 6");

So now it is time to add our these buttons in JavaFX GridPane Layout, you can use add() method

of the GridPane class. you need to add some arguments, the first one is the button object, the second

one is the columnIndex, the third one is the rowIndex and the two other arguments are the colSpan

and rowSpan.

        grid.add(btn1, 0,0,1,1);
        grid.add(btn2, 1,0,1,1);
        grid.add(btn3, 2,0,1,1);
        grid.add(btn4, 0,1,1,1);
        grid.add(btn5, 1,1,1,1);
        grid.add(btn6, 2,1,1,1);

grid.add(btn1, 0,0,1,1);

grid.add(btn2, 1,0,1,1);

grid.add(btn3, 2,0,1,1);

grid.add(btn4, 0,1,1,1);

grid.add(btn5, 1,1,1,1);

grid.add(btn6, 2,1,1,1);

Also for every JavaFX application we need to create a Scene object. in the scene we need

to add our container with the width and height of the window, if you want to colorize your

window, you can do it in here. you can see that we have given 300 width and 250 height for the

window.

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

1	Scene scene = new Scene(grid, 300, 250);

At the end you need to set your scene object to the stage of the window, and show the window.

stage.setScene(scene);
stage.show();

1 2	stage.setScene(scene); stage.show();

Run the complete code and this will be the result.

Java GUI - Creating GridPane Layout in JavaFX — Java GUI – Creating GridPane Layout in JavaFX

Subscribe and Get Free Video Courses & Articles in your Email