My app contains a lot of images and things to align on top of them. For example, my search bar. The bar itself is an image, the search is a box on top of the image. Despite grouping the items in a certain way, when I open the app on a different device, the search bar will be floating off.
I would imagine there’s a general layout to cover most screens. I’m thinking the solution would be to have the “On screen start” block, and a bunch of different blocks underneath it
”if the screen is x height, then…”
”if the screen is x height, then…”
”if the screen is x height, then…”
I’m curious if this is the way that most designers accommodate different sized phones, and if so, what are your x values?
—-
Elaboration…
The pictured example is for a label, but same thing. The label shows entirely on some phones, cuts off on others. “2000” would be the x value to hopefully accommodate a set of different devices, but I wonder if I could put 3 different blocks, or something, to accommodate most instead of some devices.
This is a really common problem, and you’re not alone in running into it.
The main issue with using screen height as a trigger is that on Android it isn’t a reliable measurement. Two phones with very similar screen heights can render text very differently because of system font scaling, OEM display settings, status bars, and safe areas. So you end up with cases where the same “if screen height is X” rule works on one device and fails on another. That’s why this approach usually turns into a long list of edge cases.
Doing lots of if/then logic on individual labels has the same problem, just multiplied. It’s hard to maintain, easy to miss one label, and every time you tweak the design you have to revisit all of those rules again.
A much more scalable approach is to treat text size as a global concern rather than a per-label one.
What works well in practice is:
Pick one baseline design that looks good on your reference device
Introduce a variable like fontSizeMultiplier
Apply that multiplier to all text sizes when the screen opens
Give the user a simple slider in settings to increase or decrease it
So instead of trying to guess the “correct” size for every device, you let the app scale consistently and let the user fine-tune it if needed. This also plays nicely with accessibility, since some users intentionally run larger system fonts.
You can still start everyone at a sensible default, but relying entirely on screen height or lots of conditional logic usually causes more problems than it solves.
