JavaFX screen resolution scaling

Question

I have been searching for a method to do this, but I only found This question without answers.

I am developing in a 1366x768 laptop, I use JavaFX to create a GUI (I am sorry, but I can't post the code, it's basically an AnchorPane containing a couple GridPanes, which contain more GridPanes, which contain Labels, TextFields and a couple Charts).

The problem comes when I load the project on another resolution (1920x1080 or 1600x900).

I am using stage.setMaximized(true);, but this only Scales the background, the stage itself, so all the elements and containers (Panels, Labels, TextFields.....) remain the same size as with the 1366x768 resolution, making the GUI "not fit" at resolutions that are not exactly 1366x768.

I hope I explained my problem well enough, my english is far from perfect.

Does anyone have any suggestion on how to make elements scale with stage resolution?

(I need the software to be maximised or full screen in every monitor, so making a fixed resolution (1366x768, for example) doesn't seem like a good solution).

Thank you all.

Update:

I just created a little example. It's a 2x1 GridPane inside the default JavaFX AnchorPane, I added two example Buttons to the grid pane.

<AnchorPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="300.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" >
<children>
    <GridPane prefHeight="300.0" prefWidth="400.0">
        <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
        <children>
            <Button fx:id="example1" mnemonicParsing="false" text="Example 2" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
            <Button fx:id="example2" mnemonicParsing="false" text="Example 2" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
        </children>
    </GridPane>
</children>

This code looks nice in a 400x300 screen (Too little, I know, it's just an example), when I scale it to 1366x768 (Not real full screen, just stage.setMaximized(true);), the GridPane does not scale, only the Stage itself, so I have a full screen background, with a 400x300 Pane (With its tiny Buttons) on the top-left corner of my screen.

TL;DR: The example code the buttons stay in the top-left corner of the screen, and the rest is just an empty space when I scale up resolution.

Update 2; Forgot the Java Code.

Parent root = FXMLLoader.load(getClass().getResource("UI.fxml"));
Scene scene = new Scene(root, java.awt.Toolkit.getDefaultToolkit().getScreenSize().width,
            java.awt.Toolkit.getDefaultToolkit().getScreenSize().height);
stage = new Stage();
stage.setMaximized(false);
stage.setScene(scene);
stage.setTitle("Example Menu");
stage.show();

I'm afraid it's impossible to help without seeing some code. Sounds like a layout problem, maybe hard-coded positions or sizes. Did you read the comments on the linked question? Seems to be a similar problem. — Modus Tollens, Apr 07 '16 at 08:05
I hard coded nothing. I did everything with `JavaFX SceneBuilder 2`, and when looking at size, everything (Min, pref and max) says `USE_COMPUTED_SIZE`. I understand it is hard to help without seeing the code, but if I put the code online I might get fired, and I don't want that, sorry. Thank you for trying to help :) — Mayuso, Apr 07 '16 at 08:10
I see, but maybe you can code a small, self-contained example that is not related to your work? Just a simple screen with one or two components to simulate the problem? — Modus Tollens, Apr 07 '16 at 08:14
http://stackoverflow.com/a/34487258/1288408 <- Take a look at this answer for a way to set preferred width and height in an fxml file based on screen resolution. Maybe it helps. — Modus Tollens, Apr 07 '16 at 09:58

Tomas Bisciak · Accepted Answer · 2016-04-07T09:58:47.290

3

You need to set anchor pane constraints on child. in your case gridpane

AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"

This will go after your

 GridPane prefHeight="300.0" prefWidth="400.0" **HERE**

This will maximize Child component within container , hence 0 0 0 0 pixels from each side .

edited Apr 07 '16 at 09:58

answered Apr 07 '16 at 09:53

Tomas Bisciak

2,801
5
33
57

1

You can't even imagine how much I love you right now :) This worked perfectly for the little example. – Mayuso Apr 07 '16 at 10:06
I am guessing I need to add this code to every panel in the actual project to have all the elements be scaled, right? For example, if I have a button inside a GridPane, I would add GridPane.leftAnchor="0,0 "...and the rest to the Button element. Is that ok? – Mayuso Apr 07 '16 at 10:07
1

Well anchor pane works like anchor , when you put children in there , its hardcoded poisition .If you maximize window for instance on higher resolution then you prepared for , in yoru scenebuidler where it looked alright , it doesnt know anything else just that hardcoded position , so it looks wierd if you scale it it iwll just stay static at that pixel within parent. – Tomas Bisciak Apr 07 '16 at 10:08
2

I rarely use AnchorPane , thing is you use it for osmething its really not designed to , jsut use Borderpane , me myself im addicted to borderpanes , hboxes,vboxes . pick container that scales controls. – Tomas Bisciak Apr 07 '16 at 10:09
And yes , if you will use anchorpanes , you have to set this property to make sure your control scales , in scenebuilder click on children of Anchorpane you wanna scale , and in Layout option you have nice UI Anchor Pane Constraints. Set 0 to all sides or other value if needed – Tomas Bisciak Apr 07 '16 at 10:12

JavaFX screen resolution scaling

1 Answers1

Linked