Evenly spacing buttons

[John Morgan]

I have 2 buttons on a button bar that I would like to have evenly spaced on the button bar. For some reason SceneBuilder moves everything to the right and I cannot find a way to space the buttons to they will remain evenly spaced.

Any suggestions?

[John Morgan]

Okay so after some research I found I should be using a HBox, but I still cannot figure out howto center the buttons evenly.

WHat I have:
+--------------------+
|[btn][btn]               |
|                             |
|                             |
+--------------------+

What I need/want
+--------------------+
|                              |
|     [btn]     [btn]     |
|                              |
+--------------------+

[Chris R Olsen]

Hi, John --

 I struggled with this for a long time w/o finding an answer, but then found a clue in one of those XXX for Dummies books (all of which I WORSHIP for their clarity).   Their suggestion is to create nodes whose sole purpose is to add spacein the HBox, and configure them to grow as needed.  They suggest using the Region class for this purpose.  

 I do not know how to do this with SceneBuilder, as I roll my own widgets.  But if you sneak over to your nearest Barnes & Noble and look on p633 of "Java All-inOne for Dummies" I think the answer lies there.  (Or, at least one good answer).

 I have implemented some code to do this, and would be happy to share if you send an email to me.

 -- Chris Olsen
     [e-mail]

[John Morgan]

I finally figured it out by adding a 5 section grid pane and putting my buttons in cell 2 and 4 and then centering them.  It achieves the look I am after but not sure if that is best practices or not.

Thanks for the response

[Prasad Saya]

Here is the code for doing what you wanted to do (I guess you have the same code) using javafx.scene.layout.HBox. The HBox lays out its children in a single horizontal row. Here is a code sample:

// Buttons in a hbox
Button newBtn = new Button("New");
Button updBtn = new Button("Update");
Button delBtn = new Button("Delete");
HBox btnHb = new HBox(10);
btnHb.getChildren().addAll(newBtn, updBtn, delBtn);

The code HBox btnHb = new HBox(10); creates an HBox layout with the specified horizontal spacing of 10 between child buttons.

Link to HBox javadocs: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/HBox.html

[Knute Snortum]

John Morgan wrote:...  It achieves the look I am after but not sure if that is best practices or not.

It seems like a good solution to me.  The only other way I found to do this is the use an HBox with alignment centered and then manually set the spacing to what you want.  But I think you solution will resize better.
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.HBox?> <HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="82.0" prefWidth="600.0" spacing="50.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">   <children>      <Button mnemonicParsing="false" text="Button" />      <Button mnemonicParsing="false" text="Button" />      <Button mnemonicParsing="false" text="Button" />   </children> </HBox>

[Evan King]

I got my buttons to align horizontally doing it this way

      <HBox alignment="CENTER" prefHeight="21.0" prefWidth="270.0" spacing="10.0">
         <children>
            <Button fx:id="skipSongButton" alignment="CENTER" mnemonicParsing="false" onAction="#skipSong" text="Skip" />
            <Button fx:id="pauseSongButton" alignment="CENTER" mnemonicParsing="false" onAction="#pauseSong" text="Pause" />
         </children>
      </HBox>

[Lou Hamers]

It's not often we get a real JFX question here lately. Imagine my disappointment to see this is a 6 year old thread that's already answered! lol (We need to get some new recruits in here...)

Anyway, there's usually a few ways to do this depending on what you're working with (in terms of desired behavior). I didn't bother carefully reading the older posts above but this is my take on it.

Adding a spacing property to your container like you did is one way, but if the container can grow larger, the buttons will stay too close (well, you may actually want that, but let's say you want to evenly space them even if the container grows).

What I often do is add spacer Panes. The Panes can be set to grow with the container's size AND will size themselves relative to the others. You can also use other containers like I did here for the middle spacer, but if I don't need VBox/HBox functionality I usually go with Pane, guessing that it might perform a bit better (I never looked into that).

<HBox alignment="CENTER" prefWidth="444.0" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Pane HBox.hgrow="SOMETIMES" />
      <Button mnemonicParsing="false" text="Button" />
      <VBox HBox.hgrow="SOMETIMES" />
      <Button mnemonicParsing="false" text="Button" />
      <Pane HBox.hgrow="SOMETIMES" />
   </children>
   <padding>
      <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
   </padding>
</HBox>

Padding and other HBox attributes added for fun (it make the preview look better in Scene Builder).

The HBox.hgrow attribute is key here. There's also ALWAYS, NEVER and INHERIT (default). Definitely play with this stuff in Scene Builder, you can get a live view of how it works (and even an interactive preview with the Preview menu), and it'll show you a lot of the different tools you have to "make it do the thing" that you want it to do. It's interesting how much you can do with just a combination of HBox/VBox containers and a few of these settings.