JavaFX Nested GridPane alignment

Question

I currently have a GridPane as the root of the layout and I have another GridPane inside it that contains 2 Labels. I'm trying to have 1 of these labels left-aligned and the other right-aligned.

I have tried using GridPane.halignment="RIGHT", but that has no effect on the Labels.

This is the layout I currently have:

This is the layout i want:

The code for my layout looks like this:

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

<?import javafx.scene.layout.*?>
<?import javafx.scene.canvas.Canvas?>
<?import javafx.scene.control.Label?>

<GridPane xmlns="http://javafx.com/javafx"
          xmlns:fx="http://javafx.com/fxml"
          fx:controller="com.bbf.layout.MainLayout">

    <GridPane fx:id="stats" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.halignment="RIGHT" style="-fx-background-color: red;">
        <Label fx:id="frame_count_label" text="Frame: 123" GridPane.columnIndex="0" GridPane.rowIndex="0" style="-fx-background-color: blue;"/>
        <Label fx:id="processing_time_label" text="Processed in 45 ms." GridPane.columnIndex="1" GridPane.rowIndex="0" GridPane.halignment="RIGHT" style="-fx-background-color: green;"/>
    </GridPane>

    <Canvas fx:id="video_canvas" GridPane.columnIndex="0" GridPane.rowIndex="1" width="640" height="480"/>

    <GridPane fx:id="kb_shortcuts" GridPane.columnIndex="0" GridPane.rowIndex="2">
        <Label text="[E] Toggle Overlay" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
        <Label text="[S] Previous Frame" GridPane.columnIndex="1" GridPane.rowIndex="0" />
        <Label text="[D] Next Frame" GridPane.columnIndex="2" GridPane.rowIndex="0" />
    </GridPane>

</GridPane>

How can I align these labels the way I want? Is GridPane even ideal for what i'm trying to do? I'm fairly inexperienced in JavaFX, but am familiar with Android's layout managers.

Answer 1

You need to specify alignment property like this:

<Label alignment="CENTER_RIGHT" text="Processed in 45 ms." GridPane.halignment="RIGHT" GridPane.valignment="CENTER" />

• I recommend you to use Scene Builder to learn the basics, than you can try typing your own fxml code if your prefer.

Answer 2

The second column in the nested GridPane was not big enough to make alignment have any effect. Simply adding GridPane.hgrow="ALWAYS" to the label moved it to where I wanted it.