Grid and Child Node Alignment in JavaFX

In JavaFX, there is a UI component named GridPane. Through this UI component, all child nodes are arranged in the form of a grid of columns and rows.

The required package for this component is javafx.scene.layout.

In this article, we will discuss the alignment and explain an example regarding this topic for better understanding.

Grid and Child Node Alignment in JavaFX

In the below example, we created a grid pane with a label. The code for our example is given below.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.geometry.Pos;
import javafx.geometry.HPos;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
import javafx.scene.control.Label;

public class FxGrid extends Application {
   @Override
   public void start(Stage stage) {
      Label lbl = new Label ("Simple grid example ..."); // Creating a label with text
      GridPane gridPane = new GridPane(); //Creating a Grid Pane

      gridPane.setPadding(new Insets(10, 10, 10, 10)); //Set the padding of the gridpane

      //Set the vertical and horizontal gaps between the columns
      gridPane.setVgap(15);
      gridPane.setHgap(15);

      gridPane.add(lbl, 0, 1); // Adding the label to the grid pane
      gridPane.setAlignment(Pos.CENTER); // Align the grid pane
      GridPane.setHalignment(lbl, HPos.RIGHT); //Setting the alignment for the child node of grid pane

      Scene scene = new Scene(gridPane, 300, 300); //Creating a scene  with necessary size

      stage.setTitle("Grid Alignment Example"); //Setting title to the Application

      stage.setScene(scene); //Adding scene to the stage

      stage.show(); //Displaying the contents of the stage
   }
   public static void main(String args[]){
      launch(args);  // Launching the application
   }
}

We have already commented above on the purpose of each line of code. Now, we will discuss the major parts of the topic here.

Through the line gridPane.setVgap(15); gridPane.setHgap(15);, we created the vertical and horizontal gap for each column. We also added padding through the line gridPane.setPadding(new Insets(10, 10, 10, 10));.

The most important part is aligning the grid pane and the child nodes separately. In the code, through the line gridPane.setAlignment(Pos.CENTER);, we aligned the grid pane, and through the line GridPane.setHalignment(lbl, HPos.RIGHT);, we aligned the child nodes of the grid.

In our case, only a child node has the label. After compiling the above example code and running it in your environment, you will get the below output.

Output:

Available Hbox Alignments

Listed below are all the available alignments for the children of the Grid Pane. You need to set them inside the setHalignment() method.

The general format of this method is setHalignment( ChildNode, Alignment).

Remember, if your IDE doesn’t support the automatic inclusion of libraries and packages. Then, you may need to manually include these necessary libraries and packages before compiling.