App looks ugly on phone

MIT App Inventor Help
1

Hello
Please take a look at this...
When I install my apps created with app inventor on my phone it looks different. In the editor i do this:

Screenshot_2020-10-05-05-47-47
Screenshot_2020-10-05-05-47-47480×800 111 KB

But on the phone it becomes this

Screenshot_2020-10-05-05-44-25
Screenshot_2020-10-05-05-44-25480×800 33.4 KB

The widgets positions get messy and it's very ugly
What should i do? The same happens with other phones too

2

Welcome @Ramon_Amorim

You will notice that there are three different sizes of the phone displayed in the companion

Sizes

Phone Size
Tablet Size
Monitor Size

These show the look of your app in 3 different screen sizes.

If you would like your app UI to look exactly the same, be it any screen dimension, then you can try out the following steps -

  1. Setting the Responsive sizing to Fixed sizing
    image

  2. Setting the desired height and width of each visible component to a certain measure instead of leaving it at automatic
    image
    image

  3. Set the alignment of the whole screen as well as the alignment of the content of all components

image
image

  1. Checking the Scrollable property of the screen. (only if your content will not fit in)
    image

5.Specifiying the screen orientation (If it makes your app look 'ugly' when the orientation is changed)
image

Please let us know if these points help you solve your problem

3

This link maybe of some help
http://ai2.appinventor.mit.edu/reference/other/responsiveDesign.html