How to centralize JavaFX controls

Question

In particular, why are my JavaFX controls not centered? Here are two screenshots, the first immediately after launch (I moved the window to a more prominent place, but have not yet resized it), and the second immediately changed it to show my problem. Bonus points if you help me ensure its correct value (across all DPIs) when it first shows:

Conveniently, the corresponding code is included in these screenshots. If you still need this as text, you are here:

private void initJFXPanel(JFXPanel holder) { { { rootGrid = new GridPane(); rootGrid.setAlignment(Pos.CENTER); rootGrid.setPadding(new Insets(16)); rootGrid.setHgap(16); rootGrid.setVgap(8); } interior = holder.getScene(); if (interior == null) holder.setScene(interior = new Scene(rootGrid)); interior.setRoot(rootGrid); } { statusLabel = new Label("Checking for Updates..."); statusLabel.setAlignment(Pos.CENTER); statusLabel.setTextAlignment(TextAlignment.CENTER); rootGrid.add(statusLabel, 0, 0); } { progressBar = new ProgressBar(); progressBar.setProgress(-1); progressBar.setPrefWidth(Constants.MAX_WIN_BOUNDS.width / 5d); // 1/5 the width of the screen rootGrid.add(progressBar, 0, 1); } { downloadButton = new Button("Get it!"); downloadButton.setAlignment(Pos.CENTER); rootGrid.add(downloadButton, 0, 2); } holder.setMinimumSize(new Dimension((int)(rootGrid.getPrefWidth() + .5), (int)(rootGrid.getPrefHeight() + .5))); setMinimumSize(holder.getMinimumSize()); } 

Answer 1

Decision

Place your controls in a VBox (or other similar root layout panel) and set the alignment of the VBox to the center.

Layout Recommendations

This is my personal advice on getting started with layout in JavaFX (it is just advice and does not apply to everyone, you can take it or leave it):

• Your window and all controls and layouts will be automatically sorted by size.
• Let the built-in layout managers and layout system do as many calculations as possible for you, simply by providing the minimum layout hints needed to get your result.
• Stick to using only JavaFX or Swing code until you are familiar with both styles of code development and really need to mix them.
• Use the SceneBuilder tool to play around with various layouts and familiarize yourself with the JavaFX layout mechanisms.
• Check out the JavaFX build tutorial .
• View the presentation on the JavaFX layout .
• To center the scene on the stage.centerOnScreen () screen.
• Consider using the native Java 8u40 dialog support (when it is released).

Hi-DPI Support

See the answer to:

• JavaFX 8 HiDPI Support

Sample FXML-Based Code for Your Dialog

You can download the following SceneBuilder to easily display it:

 <?xml version="1.0" encoding="UTF-8"?> <?import javafx.geometry.*?> <?import javafx.scene.control.*?> <?import java.lang.*?> <?import javafx.scene.layout.*?> <VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" spacing="8.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> <children> <Label fx:id="updateStatus" text="Checking for Updates..." /> <ProgressBar fx:id="updateProgress" prefWidth="200.0" progress="0.0" /> <Button fx:id="updateAction" mnemonicParsing="false" text="Get it!" /> </children> <padding> <Insets bottom="16.0" left="16.0" right="16.0" top="16.0" /> </padding> </VBox> 

Answer 2

Resize Page

Make sure you add size to JFrame

 frame.setSize(500, 300); 

Center problem

I'm not sure if you are centering your frame or JavaFX controls in GridPane, so I am adding answers for them.

Centering the screen frame

 Dimension dim = Toolkit.getDefaultToolkit().getScreenSize(); frame.setLocation(dim.width/2-frame.getSize().width/2, dim.height/2-frame.getSize().height/2); 

Centralized centering with GridPane

You need to add

 GridPane.setHalignment(child, HPos.CENTER); 

to your code, delete the remaining unnecessary code

I edited your code:

 { Label statusLabel = new Label("Checking for Updates..."); //statusLabel.setAlignment(Pos.CENTER); //statusLabel.setTextAlignment(TextAlignment.CENTER); rootGrid.add(statusLabel, 0, 0); GridPane.setHalignment(statusLabel, HPos.CENTER); } { ProgressBar progressBar = new ProgressBar(); progressBar.setProgress(-1); progressBar.setPrefWidth(400); // 1/5 the width of the screen rootGrid.add(progressBar, 0, 1); } { Button downloadButton = new Button("Get it!"); //downloadButton.setAlignment(Pos.CENTER); rootGrid.add(downloadButton, 0, 2); GridPane.setHalignment(downloadButton, HPos.CENTER); } 

and result