Are there any advanced lessons on fine tuning screen layout?

[horsefacec...@gmail.com]

          
MIT APP INVENTOR SUPPORT FORM

Use this form to report problems or to request technical support or programming help.   Also check out the reference material at appinventor.mit.edu and at the App Inventor troubleshooting page.   Please provide ALL of the information requested in blue below BEFORE entering your issue.   We will make every attempt to answer your request or post rapidly.  Please return the courtesy and respond back to the forum promptly to let us know if your issue was resolved.   We might request additional information; we'll close the issue after three days if there has been no reply.  If you would prefer to start a discussion instead, change the drop-down above from "Ask a question" to "Start a discussion" and the form below will disappear.

Thank you - The MIT AI Support Team

MITAIMITAIMITAIMITAIMITAIMITAIMITAIMITAIMITAI

Are you Working Under Windows or a Mac or other?

Windows version:                     Mac OS version:              Other (e.g., GNU/Linux):                  

What Internet Browser are you using?   Firefox version:          Chrome version:          Other Browser:         
(Please note: Currently IE is not supported.)

Which version of AppInventor are you using?    MIT AI 2:         MIT AI Classic:             Other:                     

How are you testing your app?

          Emulator:                                     Tablet/Phone Make, Model & Android Version:                

          Connection type: (WiFi or USB):                

Are you a Teacher or a Student Using App Inventor in Your School?   Teacher:         Student:            

If this is an issue with a specific project, please include the name of your project below:

Name of your project:                            

Please Describe Your Issue Below: (Please be specific.  "My Blocks Disappeared" is not enough for us to go on!)  Give us as much information as possible about what happened, what you were doing at the time, and what you expected to happen.  The more information you provide, the better we can help you. 

My Issue Is (Enter your issue below):

[Scott Ferguson]

None that I know of.

If you have an idea for an app, you could set up an initial screen to get the basic components there.

Making it fancy is secondary.

Then you can ask for help with how to specifically arrange things and you will not have to completely redo everything.

You can easily move things around during testing.

What I can offer from experience are these things that have worked for me:

Uncheck Screen Scrollable (unless you need the screen to scroll)

Set Screen horizontal and vertical alignment to center so any arrangement you come up with will be nicely centered on any device.

 

Combine horizontal and vertical screen arrangements in combinations to get things positioned on the screen:

For example:

Suppose you want a canvas on the left and buttons on the right?

Set screen orientation to landscape.

Start with a horizontal screen arrangement.

set it's width and height to meet your needs.

Inside that put a canvas and a vertical screen arrangement

Set their widths and heights to meet your needs.

Inside the vertical screen arrangement put some buttons.

---

Scott

[SteveJG]

Adding to Scott's comments:

1.) You can add 'spacers' between the controls you place using Vertical and Horizontal layout.  A 'spacer' is a dummy control, it can be a label or an image for example, with out text, only spaces.   Place the control between two buttons for example to get greater separation between the buttons.

2) Most controls have the  feature shown here in the Design mode where you can change an object's width and height.  You can do it from code too, however, you can  see this on the screen immediately:

experiment with Automatic (the default), Fill parent, or use the pixels (however be careful because using a set value may mean your app looks good on a tablet but perhaps not on a smaller phone screen).  Why?  the automatic scaling feature of the layouts is partially disabled.  a good number to start with might be setting pixels to 20 and increase/decrease.   Be sure to click OK.

Be aware, this stuff is not perfect.  Sometimes AI2 misbehaves ..yes there are small bugs in these routines.

3)  Use smaller and larger fonts.. that helps. 14.0 point is the default, you can change the value.  Do not go too small or you may have issues on small phone screens.

..just a few ideas.  When you get some of your own, please return here and share what you discover.

Good luck.

Regards,

Steve

[crispy]

I don't see a choice in "width" to control a button or text box width to a percentage of the parent. Is this not currently possible in AI2?

[Enis]

Select the component on the screen, and in the properties window towards the bottom you have height and width properties...

No, there are no relative layouts yet... You can set to parent, or a specific pixel width.