Creating a multi-device app that fits on all screens

  

I’m using Delphi 10.2 and creating a multi-device app — both for the first time.

However, I’m having issues making my UI fit on all interfaces. Let’s take Android devices as an example.

I own a Samsung Galaxy J2 Prime device. Delphi 10.2 has a few preset devices, including for 4″ and 5″ screens. However, it seems like the screen size of my device fits none of the preset devices, being somewhere between 4″ and 5″ screens.

As a result, I’m always having issues with UI components behind out-of-screen or out-of-box. Here’s one example.

On my IDE, here’s what I see (picture is align = left; text is align = right):

But here’s what I see on my device:

I have many situations like this. I tried to play with aligns, margins, paddings, anchors and various layout components, but I don’t quite get what is the proper way to use them and what are “hacks”. I understand I could create a new preset device that fit exactly my Samsung Galaxy J2 Prime device, but it feels wrong as it ultimately means I would need to create presets for dozens, if not hundreds of devices.

What would be good starter points?

Comments are closed.