App preview misleading

[parksidecreator]

Hi, when we preview our app the iPhone preview is somewhat correct, same with Android.
And after launching the app to AppStore the layout is somewhat the same as the preview.
But - when opening our app on an Android after downloading from the Google Play Store,
The app is nothing like the preview - so much misalignment, and this from page to page.

How to fix this since we can’t preview it somewhere realistic before launching?

[dilon_perera]

Hi @parksidecreator

These tips will help you.

Layout issues from design to preview

UI layouts can be very tricky to get right. Indeed using a box (rectangle shape) can act very well as a container when used as a group. Some other tips… Try to make elements align as much as possible. By top edge, bottom edge or centered. [image] Make sure components are the same length can help too. [image] Making elements “touch” can also help with alignment issues. [image] Unfortunately there are no strict rules for this to always make it work, sometimes it just takes a bit of trial …

Tutorial about how layouts works

Hi @rkeehan, Welcome to the club There is no comprehensive tutorial for this, as I know. Unfortunately, one needs to find the best working layout with trial and error. There are some hints and observations which I’ve made: to preserve the screen elements’ proportions and locations, you can use rectangles as a “containers”, where you put the other UI elements. Don’t forget to move these rectangles “to the bottom” of the screen (left pane → Screens → Components), so that other elements …

And if you did these tips and not working you can Submit A Support Ticket.

Submit a Support Ticket

Hope it helps!

Thank you