Make buttons adapt to window resizing (re-position) in JavaFX

Question

I'm still learning about JavaFX, and one of my biggest frustrations is that I can't figure out how to reposition my buttons (or any other element) when I resize the window. Let's say my width is 500px and I have a button at 250px. Now I'm resizing the window to 1500px. The button stays where it was before, however I want it to be at 750 px now since that's half the length.

This is what it looks like:

And this is after I changed the window size to fullscreen mode, and as you can see on my awful drawing, I want the buttons to move as well, but to the "new" middle.

I'm really not sure how to handle this resizing problem, so I hope you guys can help me.

Thanks in advance!

FXML

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

<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.media.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>

<BorderPane maxHeight="1080.0" maxWidth="1920.0" minHeight="720.0" minWidth="1080.0" style="-fx-background-color: #FFFFFF;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <center>
      <MediaView fx:id="mediaV" fitHeight="200.0" fitWidth="200.0" BorderPane.alignment="CENTER" />
   </center>
   <bottom>
      <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #1C1C1C;" BorderPane.alignment="CENTER">
         <children>
            <ImageView fx:id="albumCoverView" fitHeight="204.0" fitWidth="222.0" layoutX="-1.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true" />
            <HBox fx:id="hBoxButtons" layoutX="447.0" layoutY="75.0" prefHeight="64.0" prefWidth="256.0">
               <children>
                  <Button fx:id="previousButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/previous.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
                  <Button fx:id="playPauseButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/play.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
                  <Button fx:id="nextButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/next.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
               </children>
            </HBox>
            <Button fx:id="stopButton" focusTraversable="false" layoutX="374.0" layoutY="76.0" mnemonicParsing="false" onAction="#handleStop" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/stop.png&quot;); -fx-background-size: 64px 64px; -fx-background-color: #1C1C1C;" />
         </children>
      </Pane>
   </bottom>
   <left>
      <Pane prefHeight="520.0" prefWidth="268.0" style="-fx-background-color: #2E2E2E;" BorderPane.alignment="CENTER">
         <children>
            <TextField layoutX="25.0" layoutY="36.0" prefHeight="51.0" prefWidth="220.0" promptText="Search" style="-fx-border-radius: 50; -fx-background-radius: 50;" />
         </children></Pane>
   </left>
</BorderPane>

Answer 1

I believe your use of BorderPane as a root node is correct in this situation, but I personally don't like to use BorderPane . My solution uses VBox as the root node.

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.media.MediaView?>

<VBox maxHeight="1080.0" maxWidth="1920.0" minHeight="720.0" minWidth="1080.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <HBox VBox.vgrow="ALWAYS">
         <children>
            <VBox maxWidth="476.0" prefHeight="520.0" prefWidth="268.0" style="-fx-background-color: #2E2E2E;" HBox.hgrow="ALWAYS">
               <children>
                  <TextField prefHeight="51.0" prefWidth="220.0" promptText="Search" style="-fx-border-radius: 50; -fx-background-radius: 50;">
                     <VBox.margin>
                        <Insets left="20.0" right="20.0" top="40.0" />
                     </VBox.margin>
                  </TextField>
               </children>
            </VBox>
            <StackPane maxWidth="1444.0" prefHeight="520.0" prefWidth="812.0" HBox.hgrow="ALWAYS">
               <children>
                  <MediaView fx:id="mediaV" fitHeight="200.0" fitWidth="200.0" />
               </children>
            </StackPane>
         </children>
      </HBox>
      <HBox prefHeight="200.0" style="-fx-background-color: #1C1C1C;">
         <children>
            <ImageView fx:id="albumCoverView" fitHeight="204.0" fitWidth="222.0" pickOnBounds="true" preserveRatio="true" />
            <StackPane prefHeight="150.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
               <children>
                  <HBox fx:id="hBoxButtons" maxHeight="-Infinity" maxWidth="-Infinity" spacing="1.0">
                     <children>
                        <Button fx:id="stopButton" focusTraversable="false" mnemonicParsing="false" onAction="#handleStop" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/stop.png&quot;); -fx-background-size: 64px 64px;">
                           <HBox.margin>
                              <Insets right="10.0" />
                           </HBox.margin>
                        </Button>
                        <Button fx:id="previousButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/previous.png&quot;); -fx-background-size: 64px 64px;" />
                        <Button fx:id="playPauseButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/play.png&quot;); -fx-background-size: 64px 64px;" />
                        <Button fx:id="nextButton" focusTraversable="false" mnemonicParsing="false" onAction="#handlePlay" prefHeight="64.0" prefWidth="64.0" style="-fx-background-image: url(&quot;sample/buttons/next.png&quot;); -fx-background-size: 64px 64px;" />
                     </children>
                  </HBox>
               </children>
            </StackPane>
         </children>
      </HBox>
   </children>
</VBox>