App Inventor 2 Designer Viewer size

[Facundo Britos]

Hello!

I want to know if there is a way to make app inventor designer's viewer screen size match the size of my target device's screen. 

I'm trying to do an app for a Samsung T580 tablet (which has a screen resolution of 1920x1200) and I have successfully made a protoype of the app (using the companion to live view the changes in real time in the device) but now I'm facing some issues because I need to replace some of the graphical elements I have used (background, button images, etc.) and since I can't see them properly in the designer's viewer it's pretty difficult to work, specially if need to change layouts, buttons placement (there are some buttons I'm not even able to see in the viewer), etc.

I put two pictures to show how the app looks in the tablet and how it does on the viewer. You can see for example that the 3x3 layout with the arrows get lost on the viewer


Thanks!

[Chris Ward]

Hello Facundo

Difficult to recognize the issue when your Viewer and Device Screenshots are clearly not the same article.

If you have any graphics (representing components) in the AI Viewer that are hidden until revealed at runtime, you can select the option:

Currently, setting the Viewer Size to the Target Device size is not available in App Inventor. Most developers do not have a fixed target size to design for, instead they need to define a responsive GUI that sizes itself to whatever size the device may be, out of the hundreds of devices out there.

As a guide, define your component locations as percentages of screen size rather than fixed pixel sizes. Use Layout Arrangements (containers) for every thing.

[Facundo Britos]

Hi Chris, thanks for the answer.

Actually using percentage with the correct size of the items solved partially my issues and I was able to do the app as needed. Still I do have some issues with the viewer not showing the things properly and the app's screen object not being responsive as expected. There must be something I'm doing wrong.

Thanks.

[Chris Ward]

Hi Facundo

Concerning the Design Viewer, there certainly is room for improvement. I think the number 1 culprit is the TextBox, which is not displayed accurately. Also the Slider, which is also not displayed accurately. I have asked for these two to be fixed in a future release. Have you found any others to be a problem? 

[Italo]

It takes some time, but eventually you get used to work with the designer view and its flaws. I made a couple of apps with very complex and busy screen layouts and at some point you find ways to do everything you need, as long as you keep your workplace very organized. 

One thing you should never do is to aim for a fixed screen size. That will make things look right in that screen only, but what happens with all the other users with a different screen size? Even if the app is for yourself only, in the case you change your device to a smaller or larger screen, you will have to reposition everything and recompile your app.