JavaFX: supporting different resolutions

Question

I'm trying to understand how to support different resolutions in JavaFX. I'm looking for a sort of a guide about how to achieve this.

I want to create an application which requires a minimum resolution of, for example, 1280×720. And I want that my applications looks fine on any higher resolution too (like 1920×1080). Also, the application should look good at different DPI values. How can I do that?

Lets set as minimum requirements JDK 11.0.2+ and JavaFX 11.0.2+ to be more specific.

What I (seem to) understand now:

1. Minimum width and height of the stage have to be set.
2. I can not bother about DPI support, as it seems to be implemented.

What I still don't understand:

1. How do I set the dimensions of elements, indents, etc.
   • Should I set values in pixels for the minimum supported resolution and then multiply them by the coefficient according to the current resolution?
   • Or should I build up the size as a percentage of the width/height of the screen?
   • Or should I do it all in a very different way?
2. Should I avoid any controls/layouts?

I hope I was clear enough.

I'm new to creating interfaces for real, not toy applications. And I will appreciate any help, be it comments, explanations, code samples or links to articles.

Thank you in advance for your help.

Answer 1

Well that a very good question as JavaFX doesn't support responsive resolution on the fly so you gonna do it by yourself

1. First try to rely on the different layouts to distribute the UI components according to the computed location, width and height like in BorderPane that have 5 sections to set your components at effortlessly
2. After doing the first step and you still have some components that want custom modification in terms of width and height set your desirable width and height and multiply these values by a ratio this ratio you can calculate it by getting the screen resolution so the next time you run the app on a different screen with different resolution it's gonna give a different width or height for that component
3. You can also provide a different FXML file for each supported resolution by your app so you can run the appropriate design and also for landscape and portrait cases
4. Of course you can look for a third party library that can provide responsive component like BootstrapFX which is similar to that for web design and also there is ResponsiveFX too but I didn't try them before

I hope my answer help you or put you on the right track to make some cool apps