JavaFX HBox Alignment

Question

I've been working on a software using JavaFX and I have a stupid but worrying problem.

In certain part of the code I have a HBox, and, inside of it three items: an image, a label and a VBox.

The issue is that I would like to have the image aligned to the left, that is, next to the left margin of the window, and the VBox aligned to the right, that is, next to the right border of the window and I don't know how to do it.

I've tried to use VBox.setAlignment(Pos.RIGHT_CENTER), but it didn't work.

Answer 1

This is a most common alignment issue when you want to place an item towards the two corners of the Layout.

Let us say you want to have :

HBox
  |
  ImageView (Left)
  Label (Center)
  VBox (Right)

I very simple solution is to use two extra Regions. One in between ImageView & Label. The other in between Label and VBox.

HBox
  |
  ImageView (Left)
  Region
  Label (Center)
  Region
  VBox (Right)

These Regions must have HGrow set as Priority.Always, so that if you resize the HBox, these two will grow, keeping the other elements intact in their location.

FXML example :

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>

<HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="94.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ImageView fitHeight="150.0" fitWidth="140.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="http://www.imaginaformacion.com/wp-content/uploads/2010/06/JavaFx.png" />
         </image>
      </ImageView>
      <Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
      <Label prefHeight="17.0" prefWidth="205.0" text="Label On the Center" />
      <Region prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS" />
      <VBox alignment="CENTER_RIGHT" prefHeight="94.0" prefWidth="200.0">
         <children>
            <Label prefHeight="17.0" prefWidth="200.0" text="Label Inside the VBox" />
         </children>
      </VBox>
   </children>
</HBox>

Please note the HBox.hgrow="ALWAYS" in both the Regions.

Output