How to center a node within a pane javafx

Question

How do I create a Pane and have a child Node put at the center?

Lets say the Pane is 500 by 500 and the Node is an ImageView with a 200 by 200 Image

ImageView view = new ImageView();

Image img = new Image("test.png");
view.setImage(img);
Pane pane = new Pane();
pane.setMinWidth(500);
pane.setMinHeight(500);
pane.getChildren().add(view);

Any reason why you can't use a `StackPane`, `HBox`, or `VBox`? They can have their alignment set which will center their children in both dimensions automatically if you use `Pos.CENTER`. — CAG Gonzo, May 10 '14 at 05:14
THe whole idea is that I have an anchor pane and then I want the user to be able to add any layout (VBox, HBox, or Stackpane). However, the size of the anchor pane changes and has no preferred size. How would you then center it with whatever layout you use. — darewreck, May 12 '14 at 10:45
The layout choices you mentioned all solve the issue as I explained above. I am confused. Why do you have to use an `AnchorPane`? — CAG Gonzo, May 12 '14 at 15:29

score 28 · Accepted Answer · edited Jun 29 '18 at 23:32

you have 2 choices :

For example using StackPane instead of Pane (because you can use Pos)

StackPane p = new StackPane();
p.setPrefSize(700,700); //set a default size for your stackpane
Image img = new Image("test.png"); //create an image
ImageView v = new ImageView(img); //create an imageView and pass the image 

p.getChildren().add(v); //add imageView to stackPane
StackPane.setAlignment(v,Pos.CENTER_LEFT); //set it to the Center Left(by default it's on the center)
stage.setScene(new Scene(p));
stage.show();

You can use JavaFx Scene Builder, it's a visual layout tool for JavaFx. For example if I want to create a Hbox layout:

<?xml version="1.0" encoding="UTF-8"?>

    <?import java.lang.*?>
    <?import java.net.*?>
    <?import java.util.*?>
    <?import javafx.geometry.*?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.effect.*?>
    <?import javafx.scene.image.*?>
    <?import javafx.scene.layout.*?>
    <?import javafx.scene.shape.*?>
    <?import javafx.scene.text.*?>

    <HBox alignment="CENTER" prefHeight="369.0" prefWidth="425.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" >
        <children>
            <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" x="0.0" HBox.hgrow="NEVER">
                <image>
                    <Image url="@../yourImg.png" />
                </image>
            </ImageView>
        </children>
    </HBox>

save-it as myLayout.fxml inside your main class and add following to your code:

Hbox root = FXMLLoader.load(getClass().getResource("myLayout.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();

Thanks. What happens if it's an anchorPane without a preferred size. I tried to just add the stackPane to the Anchor Pane. However, without the perferred size set the centering won't work. In my example, the anchor pane can be resized because the left, right, top, and bottom are tabs that can open and can change the size of the center anchor pane. — darewreck, May 12 '14 at 10:42

score 15 · Answer 2 · answered Aug 17 '17 at 07:07

15

I usually use the following approach to center a node/pane:

<VBox alignment="CENTER">
    <HBox alignment="CENTER">
        <!-- your node/pane -->
    </HBox>
</VBox>

answered Aug 17 '17 at 07:07

Eng.Fouad

115,165
71
313
417

How to center a node within a pane javafx

2 Answers2

Linked