Components Misalignment Between Preview and In-App

[greco1899]

Hi there.

I’m starting to update the UI of my app and I noticed that the alignment of components in the Preview doesn’t match what I see on my mobile app. In the screenshots below the buttons aren’t centred in-app and there is a lot of whitespace in the bottom half of the screen.

What is the best way to go about addressing this to ensure that the layout in the preview is representative of what most users see on their phones?

I’ve read that I should set the screen’s size (width and height) as large as possible (3200 x 1440 for example) and design around that. Is there a best practice for this?

Screenshot of Welcome screen in Preview.

Screenshot of Welcome screen in the app on my One Plus 7 pro.

[charleshope]

The workaround is to group elements.

For example:

1. Have an invisible rectangle that goes from side to side and surrounds both buttons.
2. This rectangle is behind the buttons (and it’s invisible).
3. Ensure the buttons are centred in this rectangle.
4. Group the rectangle and the buttons.

That should do the trick.

[JL_LJ]

Like @charleshope says, I always put an invisible thick line on both sides to align the items in the center, or group them, also use elements to make the position pixel perfect.

[greco1899]

@charleshope @JL_LJ

Thanks for the suggestions, adding an invisible rectangle works for center alignment.

But how do you address the extra whitespace due to the screen size? It seems the components are anchored to the top of the screen.

Example screen shot of the difference between the In-App and Preview screen.

[greco1899]

For anyone wondering how to anchor components to the bottom of the page, you have to group the components, and from there you can ‘Edit Styles’ and change the ‘Fixed’ to ‘Bottom’.

However, there’s still the whitespace will still exist but it’s now between the component group that is ‘Fixed’ to ‘Bottom’ and the component above it.

I never noticed the extra screen real estate before on a screen with smaller DPI on my phone and the only way seems to be simply designing around it.