Search code examples
javajavafxsizeresolutionborderpane

Different sizes in JavaFX on different screens

I've been struggling to make my JavaFX application size properly on different devices. I think it happens because of different resolutions on the screens. I'm doing all the development on my Macbook Pro Retina 13, which has a resolution of 2560x1600, while the window looks different on my Windows desktop which runs 1920x1080. I'll illustrate with two pictures.

2560x1600

2560x1600

1920x1080

1920x1080

My first guess was that it was because the BorderPane would increase in size on 1920x1080. So I tried to fix the size with the following code.

<BorderPane maxHeight="304.0" maxWidth="414.0" minHeight="304.0" 
minWidth="414.0" prefHeight="304.0" prefWidth="414.0" 
xmlns="http://javafx.com/javafx/8.0.40" 
xmlns:fx="http://javafx.com/fxml/1" fx:controller="controller.GUIController">

This didn't change anything, though. Any ideas how to address this problem?

EDIT: I want it to look like on 2560x1600 basically.

EDIT: The FXML file looks like the following.

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

<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="controller.GUIController">
   <children>
      <BorderPane>
         <center>
            <ScrollPane BorderPane.alignment="CENTER">
              <content>
                <AnchorPane>
                     <children>
                        <TableView fx:id="itemList" prefHeight="214.0" prefWidth="412.0">
                          <columns>
                            <TableColumn fx:id="nameColumn" editable="false" resizable="false" text="Name" />
                            <TableColumn fx:id="powerColumn" editable="false" resizable="false" text="Power" />
                              <TableColumn fx:id="typeColumn" editable="false" resizable="false" text="Type" />
                          </columns>
                           <columnResizePolicy>
                              <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
                           </columnResizePolicy>
                        </TableView>
                     </children>
                  </AnchorPane>
              </content>
            </ScrollPane>
         </center>
         <bottom>
            <HBox alignment="CENTER_LEFT" BorderPane.alignment="CENTER">
               <children>
                  <HBox prefHeight="40.0" prefWidth="6.0" />
                  <Label prefHeight="17.0" prefWidth="37.0" text="Item: ">
                     <font>
                        <Font name="System Regular" size="12.0" />
                     </font>
                  </Label>
                  <ComboBox fx:id="newCBox" onAction="#addItemClicked" prefHeight="27.0" prefWidth="112.0" promptText="New" />
                  <HBox prefHeight="40.0" prefWidth="40.0" />
                  <Button mnemonicParsing="false" onAction="#importClicked" prefHeight="27.0" prefWidth="64.0" text="Import" />
                  <HBox prefHeight="40.0" prefWidth="5.0" />
                  <Button mnemonicParsing="false" onAction="#removeClicked" prefHeight="27.0" prefWidth="68.0" text="Remove" />
                  <HBox prefHeight="40.0" prefWidth="5.0" />
                  <Button mnemonicParsing="false" onAction="#upgradeClicked" prefHeight="27.0" prefWidth="72.0" text="Upgrade" />
               </children>
            </HBox>
         </bottom>
         <top>
            <VBox alignment="CENTER_RIGHT" prefHeight="58.0" prefWidth="414.0" BorderPane.alignment="CENTER">
               <children>
                  <MenuBar>
                    <menus>
                      <Menu mnemonicParsing="false" text="File">
                        <items>
                          <MenuItem fx:id="savedMenu" mnemonicParsing="false" onAction="#saveClicked" text="Save" />
                              <SeparatorMenuItem mnemonicParsing="false" />
                              <MenuItem fx:id="openMenu" mnemonicParsing="false" onAction="#openClicked" text="Open" />
                        </items>
                      </Menu>
                        <Menu mnemonicParsing="false" text="Item">
                          <items>
                              <MenuItem fx:id="editItemMenu" mnemonicParsing="false" onAction="#editItemClicked" text="Edit" />
                              <SeparatorMenuItem mnemonicParsing="false" />
                            <MenuItem fx:id="importMenu" mnemonicParsing="false" onAction="#importClicked" text="Import" />
                              <SeparatorMenuItem mnemonicParsing="false" />
                              <MenuItem fx:id="removeMenu" mnemonicParsing="false" onAction="#removeClicked" text="Remove" />
                              <SeparatorMenuItem mnemonicParsing="false" />
                              <MenuItem fx:id="upgradeMenu" mnemonicParsing="false" onAction="#upgradeClicked" text="Upgrade" />
                          </items>
                        </Menu>
                      <Menu mnemonicParsing="false" text="Profile">
                        <items>
                          <MenuItem id="editValues" fx:id="editValues" mnemonicParsing="false" onAction="#editValuesClicked" text="Edit &amp; New" />
                              <SeparatorMenuItem mnemonicParsing="false" />
                              <MenuItem mnemonicParsing="false" onAction="#shareProfileClicked" text="Share Profile" />
                              <SeparatorMenuItem mnemonicParsing="false" />
                              <MenuItem mnemonicParsing="false" onAction="#loadProfileClicked" text="Load Profile" />
                              <SeparatorMenuItem mnemonicParsing="false" />
                              <MenuItem mnemonicParsing="false" onAction="#removeProfileClicked" text="Remove" />
                        </items>
                      </Menu>
                      <Menu mnemonicParsing="false" text="Help">
                        <items>
                          <MenuItem mnemonicParsing="false" onAction="#aboutClicked" text="About" />
                              <SeparatorMenuItem mnemonicParsing="false" />
                              <MenuItem mnemonicParsing="false" onAction="#newsClicked" text="News" />
                        </items>
                      </Menu>
                    </menus>
                  </MenuBar>
                  <HBox alignment="CENTER_LEFT">
                     <children>
                        <HBox prefHeight="31.0" prefWidth="5.0" />
                        <Label text="Display: " />
                        <ComboBox fx:id="displayCBox" onAction="#displayChanged" prefHeight="27.0" prefWidth="149.0" promptText="Display type" />
                        <HBox prefHeight="31.0" prefWidth="59.0" />
                        <ComboBox fx:id="profileCBox" onAction="#profileChanged" prefHeight="27.0" prefWidth="143.0" promptText="Choose Profile" />
                     </children>
                  </HBox>
               </children>
            </VBox>
         </top>
      </BorderPane>
   </children>
</AnchorPane>
Solution

  • Like James_D pointed out in comment, there was redudant nodes in my code. I had used Scene Builder and they added unneeded anchors panes by default, so I made the assumption that it was accurate. However, it's not.