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.

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);` — ebwb, Apr 17 '15 at 20:16

ItachiUchiha · Answer 1 · 2015-06-14T18:59:58.023

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

enter image description here

Thank you! Had a similar issue using `` containing an ImageView. My controls were jumping up and down between image changes, using `` solved my issue. :) — Robula, Jan 08 '16 at 12:32
Thanks. I used the same logic, as : `Region filler = new Region(); HBox.setHgrow(filler, Priority.ALWAYS);` then `hbox.getChildren().addAll(left, filler, right);` — Satyendra, Nov 02 '17 at 15:25

kcpr · Answer 2 · 2015-06-15T11:59:53.503

10

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.

edited Jun 15 '15 at 11:59

answered Jun 13 '15 at 20:04

kcpr

1,055
1
12
28

yea, that seems better – Roger Jul 07 '18 at 14:19
@torina, I'm glad I could help. Thanks. ;) – kcpr Feb 03 '20 at 09:42

JavaFX HBox Alignment

2 Answers2

Linked