How to make responsive design in javafx

Question

I am building an app in javaFx but the problem is my app doesn't resize, if I open the app the small window is which is fine but when I maximize the window the app content(table) doesn't resize accordingly. here is my fxml file.

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

<?import java.lang.String?>
<?import javafx.collections.FXCollections?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.Buildsapp.Main.BuildsController">
    <children>
        <ComboBox fx:id="versionCombo" layoutX="6.0" layoutY="14.0" prefWidth="150.0" promptText="7.0 Win">
          <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="Win" />
          <String fx:value="Mac" />
          </FXCollections>
      </items>
            <value>
        <String fx:value="Win" />
    </value>
        </ComboBox>
        <TableView fx:id="tableView" layoutX="6.0" layoutY="52.0">
            <columns>
                <TableColumn fx:id="builds" prefWidth="482.0" text="Builds" />
                <TableColumn fx:id="date" minWidth="0.0" prefWidth="124.0" text="Date" />
                <TableColumn fx:id="release" prefWidth="167.0" text="Release" />
            </columns>
        </TableView>
        <Button fx:id="downloadButton" layoutX="328.0" layoutY="14.0" mnemonicParsing="false" text="Download" />
        <Button fx:id="installButton" layoutX="458.0" layoutY="14.0" mnemonicParsing="false" text="Install" />
      <ComboBox fx:id="locCombo" layoutX="636.0" layoutY="14.0" prefWidth="150.0">
      <items>
        <FXCollections fx:factory="observableArrayList">
          <String fx:value="CJ" />
          <String fx:value="MN" />
          </FXCollections>
      </items>
      <value>
        <String fx:value="CJ" />
    </value>
      </ComboBox>
      <ComboBox fx:id="versionNo" layoutX="177.0" layoutY="14.0" prefHeight="31.0" prefWidth="122.0" promptText="7.0" />

    </children>
</AnchorPane>

here is code for binding.

public void initRootLayout() {
    try {
        // Load root layout from fxml file.
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(MainApp.class.getResource("BuildsView.fxml"));
        rootLayout = (AnchorPane) loader.load();

        Scene scene = new Scene(rootLayout);
        rootLayout.sceneProperty().addListener(new ChangeListener<Scene>() {
                @Override
                public void changed(ObservableValue<? extends Scene> observable,
                        Scene oldValue, Scene newValue) {
                    rootLayout.prefWidthProperty().bind(newValue.widthProperty());
                    rootLayout.prefHeightProperty().bind(newValue.heightProperty());
                }
            });
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Answer 1

2nd Edit

Initial solution had the fix without noting.

Your problem was because you had not really specified how your TableView should be layed out in your AnchorPane. By default children in AnchorPane are layed out Top-Left and they are left to grow wide and long based on their Width and height if they can.

That is why your Tableview was not very much responding the way you wanted it

<TableView fx:id="tableView" layoutX="6.0" layoutY="52.0">//setLayout should not be use here

as you can see you did not specify constraint for your TableView hence they followed the default

however in my solution since I did not copy paste your fxml but tried to lay it out personally i did not really noticed your error and stuck to my untested-offhead solution which was bind but the real solution is

<TableView fx:id="tableView" AnchorPane.bottomAnchor="0.0" 
       AnchorPane.leftAnchor="2.0" AnchorPane.rightAnchor="2.0" AnchorPane.topAnchor="40.0">

as you can see they have constraints and very much different from yours, and my old edit had that.

so sorry for the 6months bs i posted.

1st EDIT

sorry for the delay. but something like this.

fyi: i removed the controller id. so compare and make your adjustment

 import javafx.application.Application;
 import javafx.beans.value.ChangeListener;
 import javafx.beans.value.ObservableValue;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Scene;
 import javafx.scene.layout.AnchorPane;
 import javafx.stage.Stage;


 public class Main extends Application {
 @Override
 public void start(Stage primaryStage) {
    try {
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(Main.class.getResource("pane.fxml"));
        AnchorPane rootLayout = loader.load();

        Scene scene = new Scene(rootLayout);
        //rootLayout.prefWidthProperty().bind(scene.widthProperty()); not needed
        //rootLayout.prefHeightProperty().bind(scene.heightProperty());in these scenario
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch(Exception e) {
        e.printStackTrace();
    }
}

public static void main(String[] args) {

    launch(args);
}
}

THen the fxml, i called mine pane

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.String?>
<?import javafx.collections.FXCollections?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
  <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
<children>
  <HBox alignment="CENTER_LEFT" layoutX="6.0" layoutY="14.0" spacing="20.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
     <children>
          <ComboBox fx:id="versionCombo" prefWidth="150.0" promptText="7.0 Win">
            <items>
          <FXCollections fx:factory="observableArrayList">
            <String fx:value="Win" />
            <String fx:value="Mac" />
            </FXCollections>
        </items>
              <value>
          <String fx:value="Win" />
      </value>
          </ComboBox>
        <ComboBox fx:id="versionNo" prefHeight="31.0" prefWidth="122.0" promptText="7.0" />
          <Button fx:id="downloadButton" minWidth="80.0" mnemonicParsing="false" text="Download" />
          <Button fx:id="installButton" minWidth="80.0" mnemonicParsing="false" text="Install" />
        <ComboBox fx:id="locCombo" prefWidth="150.0">
        <items>
          <FXCollections fx:factory="observableArrayList">
            <String fx:value="CJ" />
            <String fx:value="MN" />
            </FXCollections>
        </items>
        <value>
          <String fx:value="CJ" />
      </value>
        </ComboBox>
     </children>
     <padding>
        <Insets left="10.0" right="3.0" top="5.0" />
     </padding>
  </HBox>
    <TableView fx:id="tableView" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="2.0" AnchorPane.rightAnchor="2.0" AnchorPane.topAnchor="40.0">
        <columns>
            <TableColumn fx:id="builds" prefWidth="482.0" text="Builds" />
            <TableColumn fx:id="date" minWidth="0.0" prefWidth="124.0" text="Date" />
            <TableColumn fx:id="release" prefWidth="167.0" text="Release" />
        </columns>
    </TableView>

 </children>
</AnchorPane>