JavaFX GridPane Object Alignment

Question

I am trying to use JavaFX to create a scene with the program's title positioned at the top-center, and buttons in a vertical line along the left side of the scene. However, both of these elements are displayed clustered up in the top-right of the scene, instead of where I want them to be.

How can I get these elements to be displayed where I want them to?

Here is how I try to set the program title's position:

  grid.add(gameTitle, 0, 0);
  GridPane.setHalignment(gameTitle, HPos.CENTER);
  GridPane.setValignment(gameTitle, VPos.TOP);

I try to set the VBox object similarly:

  grid.getChildren().add(buttonBox);
  GridPane.setHalignment(buttonBox, HPos.LEFT);
  GridPane.setValignment(buttonBox, VPos.CENTER);

This is what is displayed:

My entire MainMenu class. (This class is called in my Main class to construct the scene):

package scenes;

import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.application.Platform;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class MainMenu {
   public Pane getMainMenuPane() {
      // Create the scene grid
      GridPane grid = new GridPane();
      grid.setHgap(10);
      grid.setVgap(10);

      // Set the game title to the top center  
      Text gameTitle = new Text("Bandit King");
      Font titleFont = new Font(75);
      gameTitle.setFont(titleFont);
      //
      grid.add(gameTitle, 0, 0);
      GridPane.setHalignment(gameTitle, HPos.CENTER);
      GridPane.setValignment(gameTitle, VPos.TOP);

      // Create Button objects and put in VBox
      Button[] buttArr = makeButtons();
      VBox buttonBox = new VBox();
      buttonBox.getChildren().addAll(buttArr);
      buttonBox.setSpacing(10);

      // add Button VBox to GridPane
      grid.getChildren().add(buttonBox);
      GridPane.setHalignment(buttonBox, HPos.LEFT);
      GridPane.setValignment(buttonBox, VPos.CENTER);

      return (Pane) grid;
   }

   private Button[] makeButtons() {
      // Create buttons
      Button start = new Button("Start a New Game");
      Button load = new Button("Load a Saved Game");
      Button exit = new Button("Exit the Game");

      // set Button actions
      start.setOnAction( a -> {
         System.out.println("WIP- start game.");
      });
      load.setOnAction( a -> {
         System.out.println("WIP- load game");
      });
      exit.setOnAction( a -> {
         Platform.exit();
         System.exit(0);
      });

      // return Button[] array
      Button[] buttArr = {start, load, exit};
      return buttArr;
   }


}

My Main class (Displays the scene):

package central;

import javafx.stage.Stage;
import scenes.*;
import controllers.*;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;

public class Main  extends Application {

   // Get scene panes
   private static Pane mainMenu = new MainMenu().getMainMenuPane();

   // Create SceneController object.
   private static Scene scene = new Scene(mainMenu, 1600, 900);
   public static SceneController SceneControl = new SceneController(scene);

   @Override
   public void start(Stage stage) {
      stage.setTitle("Bandit King");
      stage.setScene(scene);
      stage.show();
   }

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


}

Answer 1

The default cell you add the children of a GridPane to is (0, 0) which is what you do in this line:

grid.getChildren().add(buttonBox);

you need to change this to

grid.add(buttonBox, 0, 1);

to set the row index to 1. (There are alternatives to assigning the row index this way, but this is the most convenient option in this case.)

This won't result in the first column taking the full width of the GridPane though. If you also want the first column to take all the width available, you need to specify this by adding ColumnConstraints:

ColumnConstraints constraints = new ColumnConstraints();
constraints.setHgrow(Priority.ALWAYS);

grid.getColumnConstraints().add(constraints);

Answer 2

As far as what I noticed, you added all the nodes in a column and set there positions, but you did not specify how much the column needs to be stretched. GridPane column will not stretch automatically by itself unless specified.

You can debug your program, by enabling the gridLinesVisible of GridPane property to true.

grid.setGridLinesVisible(true);

You need to specify the columnConstraints, to let the GridPane column stretch to the available width.

ColumnConstraints constraint = new ColumnConstraints();
constraint.setHgrow(Priority.ALWAYS);
grid.getColumnConstraints().add(constraint);