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();
    }
}

Use a [Layout Pane](http://docs.oracle.com/javase/8/javafx/layout-tutorial/builtin_layouts.htm#JFXLY102) that lays the controls out the way you want, instead of hard-coding the positions in an `AnchorPane`. — James_D, Mar 11 '16 at 12:46

score 6 · Accepted Answer · edited Mar 11 '18 at 15:51

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>

@EIltz I tried this:- double orgW = 1000; double orgH = 800; Scene scene = new Scene(rootLayout); rootLayout.scaleXProperty().bind(scene.widthProperty().divide(orgW)); rootLayout.scaleYProperty().bind(scene.heightProperty().divide(orgH)); but UI breaks like it is being compressed when screen is small and is moves out of the screen when screen is maximized. — user3649361, Mar 13 '16 at 06:39
@EIItz thanks, I have edited my question with the way I am implementing it, after using your code also I am seeing the issue which I was facing initially. Can you see where I am wrong ?? — user3649361, Mar 14 '16 at 08:40
Since this question and answer seems to be getting linked quite a lot, I want to point out that the they don't really make much sense. The root node of the scene will always take on the dimensions of the scene: its `min/pref/maxWidth` and `min/pref/maxHeight` are ignored. So it makes no sense at all to bind the `prefWidth` and `prefHeight` of the root of the scene to anything. If you comment those lines out, nothing changes. It's not really clear what the question means anyway: there is no specification of *how* the OP wants the UI to respond, and how it is different to what it's doing anyway. — James_D, Oct 03 '16 at 20:36
_answer..getting linked..lot_ where & where ? **but Thank you very much,** i overlooked, it was an _fxml_ configuration that caused the problem, which i fixed without noting it the answer **Thanks** will make an edit@James_D — Elltz, Oct 05 '16 at 12:06

score 1 · Answer 2 · answered Jul 11 '17 at 15:06

1

Just add this:

 <TableView fx:id="tableView" layoutX="6.0" layoutY="52.0" 
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">

answered Jul 11 '17 at 15:06

cz game

81
1
5

score -3 · Answer 3 · answered Jun 27 '21 at 18:41

-3

you have to set all the constraints to 0. check it out

answered Jun 27 '21 at 18:41

azeem mirza

1
1

How to make responsive design in javafx

3 Answers3

Linked