JavaFX – Resolution Independent UI

Creating Resolution Independent UI – This is very tricky and complicated topic. The real solution will be to use layout. But sometimes (mostly?) you learn this the hard way!

I was preparing some demos for SiliconIndia Mobile Application Conference. I downloaded a bunch of samples from – samples. Installed it on Sony Ericsson – X1. Cool! The demos launched successfully.. But…!!!

BrickBreaker sample as seen in mobile with [480 x 800] resolution..

Actual Scaled
<img src="; <img src=";

Many of the nice samples are written for [240 x 320] (resolution of default JavaFX emulator skin). So they appear to be so small on [480 x 800] resolution phone. There is no straight forward way to fix all these samples in such short time (have to show it in conference!!). What next?

Hmm.. Just scale the root node so as to fit the screen. It doesn’t look bad at all on mobile (above screenshot may not look good though)… Well this is not an attempt to provide a solution, but just to help you in case you end up in similar situation! Ofcourse the solution is still to avoid hard-coding of coordinates in the application.. This is just a gentle reminder..

Yes! The demos and presentation was successful.. But yeah.. sometimes you have to incorporate such workaround.. Hope you agree!! You may also be interested in new website – Josh On Design with topics related to UI design..

Diff of BrickBreaker Main.fx