Javafx GridPane, how to center Node? (Text/Label)

Question

I am trying to learn Javafx for a class I am taking. I am having a lot of difficulty transitioning from HTML + ERB templates to the Javafx framework (I am a Rails dev).

For some reason I am unable to center a Label node in a gridpane. Here is my start method:

@Override
    public void start(Stage stage) throws Exception {
        GridPane root = new GridPane();
        FlowPane leftbanner = new FlowPane();

        leftbanner.setPrefWidth(200);
        String bgStyle = "-fx-background-color: lightblue;"
                         + "-fx-background-radius: 0%;"
                         + "-fx-background-inset: 5px;";
        leftbanner.setStyle(bgStyle);

        root.add(leftbanner, 0, 0, 1, 1);
        root.add(createGridPane(), 1, 0, 1, 1);

        Scene scene = new Scene(root, 700, 500);
        stage.setTitle("Recommendify");
        stage.setScene(scene);
        stage.show();
    }

I am using the createGridPane method to build my app. Here are the contents of that method which includes my attempts to center the label:

public GridPane createGridPane() {
        GridPane grid = new GridPane();
        grid.setPadding(new Insets(10));
        grid.setHgap(10);
        grid.setVgap(10);

        Text txt = new Text("Recommendify");
        txt.setFont(Font.font("Dialog", FontWeight.BOLD, 12));
        GridPane.setHalignment(txt, HPos.CENTER);

        grid.add(txt, 0, 0, 1, 1);
        grid.add(new Separator(), 0, 1, 3, 1);

        return grid;
}

I have also tried these solutions posted here: JavaFX alignment of Label in GridPane

Do I need to throw this Label node into a container in order to center it in the GridPane? Like an HBox or VBox?

Incidentally, your question mentions a `Label` node, but your code is using a `Text` node. The result is going to be the same either way, but you may want to [edit] the question to avoid confusion. — Zephyr, Nov 05 '18 at 04:10
You are using `GridPane` alright. But, Do you know how many columns and/rows are there in the grid (grid means rows and columns, in general). So, figure how many rows/columns, and then where you want your label/text. BTW, `Label` and `Text` have different purposes. A label is used to make a static text and a `Text` is used for creating text which can change during the course of the application - like _a status bar text_. To align a `Label` within a grid pane's cell, use: `GridPane.setHalignment(labelToBeCentered, javafx.geometry.HPos.CENTER);`. — prasad_, Nov 05 '18 at 04:40
Also, it looks like you are creating a grid pane within a grid pane - (1) `GridPane root = new GridPane();` in the `start`, and (2) in the `createGridPane()` adding it to the `root`: `root.add(createGridPane(), 1, 0, 1, 1);` . — prasad_, Nov 05 '18 at 04:58
Here are examples of using various layouts: [JavaFX: Working with Layouts](https://docs.oracle.com/javase/8/javafx/layout-tutorial/index.html). — prasad_, Nov 05 '18 at 05:02
@prasad_ - I believe they actually intend to have 2 GridPanes, one within the other. — Zephyr, Nov 05 '18 at 05:18
@Zephyr I don't see any indication of requiring two grid panes in the code -or- in the requirement (what kind of application is this? What is the intended form?). To me, from the post comments it looks like the OP is trying out JavaFX newly. — prasad_, Nov 05 '18 at 05:28
The `createGridPane()` has a missing `return grid;` statement. — prasad_, Nov 05 '18 at 06:04

Zephyr · Answer 1 · 2018-11-05T04:17:40.053

There is actually nothing wrong with your code. The "Recommendify" text is centered in its cell. However, the cell is no wider than the text itself.

You can see this by turning on the grid lines within your createGridPane() method:

grid.setGridLinesVisible(true);

To test the alignment, you can add ColumnConstraints to the GridPane:

grid.getColumnConstraints().add(new ColumnConstraints(150));

The above statement sets the preferred width of the first column to 150. Here is the new result:

As you can see, the Text node is centered properly.

EDIT: Keep in mind that if you want your Text to be centered over the Separator you've added to the second row, you need to have it span 3 columns as well.

Javafx GridPane, how to center Node? (Text/Label)

1 Answers1