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.

Gesundheit

Please show us your attempted code. – Hydraulics

Intuition would say that the HBox simply orders them in the order you add them to the HBox through hbox.getChildren().addall( arg0, arg1, ... argk); – Wore

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

Inopportune

Thank you! Had a similar issue using <VBox> containing an ImageView. My controls were jumping up and down between image changes, using <Region VBox.hgrow="ALWAYS"/> solved my issue. :) – Skyeskyhigh

Thanks. I used the same logic, as : Region filler = new Region(); HBox.setHgrow(filler, Priority.ALWAYS); then hbox.getChildren().addAll(left, filler, right); – Ruin

Thanks. This helped me to save sometime – Torino

Answer 2

I think that the best option could be switching from HBox to BorderPane. It let You make items sticked to any edge of Your window.
Another option is GridPane. You can select column and change its 'Halignment' property to 'RIGHT'.

And, by the way, I recommend using JavaFX Scene Builder while having fun with JavaFX.

Bimestrial

yea, that seems better – Alix

@torina, I'm glad I could help. Thanks. ;) – Bimestrial