CODEWITHSUNDEEP
buttonjavafx
BjornS
BjornS

Reputation: 33

JavaFX center two buttons below each other

I am new to JavaFX. Does anyone know how I can position two buttons vertically (below each other) in the middle of the screen.

This is my code so far: 

public class StartMenu {
private StackPane gridStartMenu;
private Button createNewTournamentbtn;
private Button viewTournamentbtn;
private Scene startMenuScene;
private VBox vboxStartMenu;

public StartMenu() {
    gridStartMenu = new StackPane();
    vboxStartMenu = new VBox();

    //BUTTON 1
    createNewTournamentbtn = new Button("Create new tournament");
    createNewTournamentbtn.setStyle("-fx-font: 22 arial; -fx-base: #b6e7c9;");
    createNewTournamentbtn.setPrefSize(300, 50);

    //BUTTON 2
    viewTournamentbtn = new Button("View tournaments");
    viewTournamentbtn.setStyle("-fx-font: 22 arial; -fx-base: #b6e7c9;");
    viewTournamentbtn.setPrefSize(300, 50);

    gridStartMenu.setAlignment(createNewTournamentbtn, Pos.CENTER);
    gridStartMenu.setAlignment(viewTournamentbtn, Pos.CENTER);


    gridStartMenu.getChildren().addAll(createNewTournamentbtn,
            viewTournamentbtn);

    startMenuScene = new Scene(gridStartMenu, 600, 600);
    MainApp.getWindow().setScene(startMenuScene);
    MainApp.getWindow().show();

Upvotes: 3

Views: 8045

Answers (2)

Mazen Embaby
Mazen Embaby

Reputation: 1361

First , I'd like to mention some of advantages of FXML :

check the link Why use FXML

Implementation by using FXML : 

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0" spacing="30.0">
         <children>
            <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="300.0" style="-fx-base: #b6e7c9;;" text="Create new tournament">
               <font>
                  <Font name="Arial" size="22.0" />
               </font>
            </Button>
            <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="300.0" style="-fx-base: #b6e7c9;" text="View tournaments">
               <font>
                  <Font name="Arial" size="22.0" />
               </font>
            </Button>
         </children>
      </VBox>
   </children>
</StackPane>

snapshot

Upvotes: 2

Ugurcan Yildirim
Ugurcan Yildirim

Reputation: 6132

A kind advice: Do not rely on Scenebuilder or such stuff too much. If you really want to learn JavaFX, code entirely by yourself.

And this is how you can do what you want to do:

First, add two buttons into VBox:

VBox vbox = new VBox(5); // 5 is the spacing between elements in the VBox
vbox.getChildren().addAll(new Button("Button 1"), new Button("Button 2"));

Afterwards, center the VBox using the following code:

stackPane.getChildren().add(vbox);
StackPane.setAlignment(vbox, Pos.CENTER);
stage.setScene(new Scene(stackPane));
stage.show();

Upvotes: 3

Related Questions