Set responsive layout with JavaFX

Question

i started work with javaFX and i want to set layout like this:

I installed the scene builder but there is no options to work with percentage like simple div in html...

so what is the best option to set this layout?

its my simple fxml file: (now its empty)

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

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml/1">
    <!-- TODO Add Nodes -->
</AnchorPane>

tnx a lot

score 8 · Answer 1 · answered Sep 03 '16 at 15:06

You can achieve this kind of layout by using a GridPane with appropriate constraints:

@Override
public void start(Stage primaryStage) throws IOException {
    GridPane root = new GridPane();

    root.getColumnConstraints().addAll(DoubleStream.of(30, 2, 68)
            .mapToObj(width -> {
                ColumnConstraints constraints = new ColumnConstraints();
                constraints.setPercentWidth(width);
                constraints.setFillWidth(true);
                return constraints;
            }).toArray(ColumnConstraints[]::new));

    RowConstraints rowConstraints = new RowConstraints();
    rowConstraints.setVgrow(Priority.ALWAYS);

    root.getRowConstraints().add(rowConstraints);

    root.addRow(0, Stream.of("red", "green", "blue").map(s -> {
        Region region = new Region();
        region.setStyle("-fx-background-color:"+s);
        return region;
    }).toArray(Node[]::new));

    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}

FXML version

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <columnConstraints>
      <ColumnConstraints percentWidth="30.0" />
      <ColumnConstraints percentWidth="2.0" />
      <ColumnConstraints percentWidth="68.0" />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints vgrow="ALWAYS" />
   </rowConstraints>
   <children>
      <Region style="-fx-background-color: red;" />
      <Region style="-fx-background-color: green;" GridPane.columnIndex="1" />
      <Region style="-fx-background-color: blue;" GridPane.columnIndex="2" />
   </children>
</GridPane>

score 0 · Answer 2 · edited May 23 '17 at 11:46

I have created an answer for this in the following topic: How do specify a width percentage in JavaFX 2 using FXML?

Below a copy for the ones too lazy to go there ;-)

In order to start working with percentages in FXML itself you can use the following:

<fx:define>
    <Screen fx:factory="getPrimary" fx:id="screen" />
</fx:define>

This would help you detect the dimensions of the current screen, the application is being displayed on. Now that we have the display dimensions, we can play with it in FXML as follows:

<HBox fx:id="hroot" prefHeight="${screen.visualBounds.height}" prefWidth="${screen.visualBounds.width}"> Your FXML elements inside the root... </HBox>

Note that I use visualBounds, since this would get me the available space on the screen, since I don't want an overlap with the taskbar in Windows for example. For fullscreen applications, you would just use 'bounds'.

Now, to come to your point of using percentages, you can actually play with the value of the prefheight and prefWidth. You can put calculations inside the ${}.

Optionally:

If you want to have all your elements use relative sizes, just refer to them, using their ID and width or height property, and make your calculation.

<VBox fx:id="VBSidebar" prefWidth="${hroot.width*0.15}" prefHeight="${hroot.height}"> more elements.. </VBox>

Set responsive layout with JavaFX

2 Answers2