If you are migrating from Java Swing GUI builder to JavaFX, you might be wondering how you can enable components auto size in JavaFX FXML scene builder. This tutorial will demonstrate how you can create a responsive design in JavaFX using Scene builder. Responsive design in JavaFX makes components size to be directly proportional to the size of the Stage(Window).
Most users expect every software to respond to the size of the window. No one would take an unresponsive design seriously. A good professional Software must respond to various width and height sizes of a window.
We have done several useful tutorials on JavaFX, be sure to check them out.
Autosize/Responsive Design in JavaFX
To Create a responsive design or a dynamically resizable screen in JavaFX, we will use AnchorPane. AnchorPane is one of the best containers you can use to create a responsive design in JavaFX, it’s quite simple and straight forward.
I usually use Eclipse IDE along with Scene Builder to create JavaFX Software. Whatever IDE you use, go ahead and right-click on any of FXML files, then open with Scene Builder or just create a new file from the Scene Builder (File > New)
To demonstrate this behavior, we are going to create a login screen on our stage. So go ahead and drag a TextField and Password file along with Button as shown in the image below:
When our Software is maximized, it will look like this:
From the maximized screen, you can see it’s a bit messy and shaggy. We want to make the size of TextFields to auto-size with the size of the window, while the email and password label with the button to remain at left.
To achieve the responsive design. Select both TextFields(Email and Password), yeah, select them simultaneously, then navigate to layout on Scene Builder. The layout can be found on the right panel of the scene builder. See the image below
From the image above, you can see a boxed section, it’s known as Anchor Pane Constraints. That’s what we will use to achieve a responsive design on our software.
Now with your TextFields selected, go ahead and click on the left and right side of the boxed section as shown in the image below
This will give our TextFields Constraint width with respect to the AnchorPane window.
To make everything look professional, select the button from the scene builder and give it a constraint of 80 px from the left to make sure it goes hand in hand with the TextFields but do not give it a right Constraint unless you want to also auto-size the button
Also, give Email and Password Labels a Constraint from the left. Play around with this feature of AnchorPane, you can also auto-size vertically, to make sure the size of components responds to the verticle size of the window.
Now the image below shows our final output after everything, We will show you when it’s full size: