Application Interface
Before writing any logic, a mobile application needs a well-designed user interface (UI). In MIT App Inventor, you design the UI in the Designer view — arranging visual components (buttons, labels, text boxes) on the screen. Good UI design follows principles of clarity, consistency, and usability. This lesson covers the App Inventor workspace, essential components, layout options, and UI/UX design principles.
Learning Objectives
- 11.2.2.3 Present information using various types of visual representation
- 11.5.4.1 Develop the interface for a mobile application
- 11.5.4.2 Use components and their properties for mobile app UI design
Conceptual Anchor
The LEGO Analogy
Building a mobile app interface in App Inventor is like building with LEGO blocks. Each component (button, label, text box) is a block. You snap them together on a baseplate (the screen). Layouts are like LEGO frames that keep blocks organized in rows or columns. Just as you don't write code to build LEGO — you arrange pieces visually — in App Inventor, you design the UI by dragging and dropping components.
Getting Started with MIT App Inventor
- Open ai2.appinventor.mit.edu in your browser (Chrome recommended)
- Sign in with your Google account
- Click "Start new project" and give it a name
- You'll see the Designer view — this is where you build the interface
- To test: install MIT AI2 Companion app on your Android device, or use the built-in emulator
The App Inventor Workspace
| Panel | Purpose | Location |
|---|---|---|
| Palette | All available components organized by category | Left side |
| Viewer | Visual preview of the phone screen — drag components here | Center |
| Components | Tree view of all components on the current screen | Right side (top) |
| Properties | Settings for the selected component (text, size, colour, etc.) | Right side (bottom) |
| Designer / Blocks | Toggle between visual design and block-based programming | Top right buttons |
Essential UI Components
User Interface Components
| Component | Purpose | Key Properties |
|---|---|---|
| Label | Display static or dynamic text | Text, FontSize, FontBold, TextColor, BackgroundColor |
| Button | Trigger an action when clicked | Text, Image, Shape, BackgroundColor, Enabled |
| TextBox | Accept text input from user | Hint, NumbersOnly, MultiLine, Text |
| PasswordTextBox | Masked text input | Hint, PasswordVisible |
| CheckBox | Toggle option (on/off) | Checked, Text |
| Spinner | Dropdown menu for selecting from a list | Elements (comma-separated), Selection |
| Slider | Select a value by sliding | MinValue, MaxValue, ThumbPosition |
| Image | Display an image | Picture (upload file), Width, Height, ScalePictureToFit |
| ListView | Display a scrollable list of items | Elements, Selection, TextSize |
| Notifier | Show alerts, confirmations, and input dialogs | BackgroundColor, TextColor (non-visible) |
Layout Components
Layouts are invisible containers that organize components on the screen. Without layouts, components just stack vertically.
| Layout | Behaviour | Use Case |
|---|---|---|
| HorizontalArrangement | Places components side by side (left to right) | Row of buttons, label + text box on same line |
| VerticalArrangement | Stacks components top to bottom | Form fields, grouped sections |
| TableArrangement | Grid layout with rows and columns | Calculator buttons, data forms |
| HorizontalScrollArrangement | Scrollable row | Image gallery |
| VerticalScrollArrangement | Scrollable column | Long lists, content that exceeds screen |
Screen Properties
| Property | Purpose | Common Values |
|---|---|---|
| Title | Text shown in the title bar | "My App", "Login" |
| BackgroundColor | Screen background colour | White, #2196F3 |
| BackgroundImage | Background image file | Upload a .png or .jpg |
| ScreenOrientation | Lock orientation | Portrait, Landscape, Unspecified |
| AlignHorizontal | Horizontal alignment of content | Left, Center, Right |
| AlignVertical | Vertical alignment of content | Top, Center, Bottom |
| Scrollable | Allow screen to scroll vertically | True/False |
UI/UX Design Principles
Worked Example — Login Screen
1 Design a Login Screen
Components needed:
| Component | Name | Properties to Set |
|---|---|---|
| Label | LabelTitle | Text: "Welcome", FontSize: 28, FontBold: true, TextAlignment: Center |
| Image | ImageLogo | Picture: logo.png, Width: 150px, Height: 150px |
| Label | LabelUsername | Text: "Username" |
| TextBox | TextBoxUsername | Hint: "Enter username", Width: Fill parent |
| Label | LabelPassword | Text: "Password" |
| PasswordTextBox | PasswordTextBox1 | Hint: "Enter password", Width: Fill parent |
| Button | ButtonLogin | Text: "LOG IN", BackgroundColor: blue, TextColor: white, Width: Fill parent, Shape: rounded |
| Label | LabelError | Text: "", TextColor: red, Visible: false |
Layout structure:
- Screen → AlignHorizontal: Center, AlignVertical: Center
- VerticalArrangement (contains all components, centered)
- Set Width of VerticalArrangement to 90% to add side padding
- Set spacing between components using Height property of empty Labels (spacers)
Pitfalls & Common Errors
Not Naming Components
App Inventor names components automatically (Button1, Button2...). Always rename them
descriptively: ButtonLogin, TextBoxEmail. This makes the Blocks editor
much easier to use.
Fixed Pixel Sizes
Don't use fixed pixel widths for text boxes and buttons. Use "Fill parent" or percentage so the layout adapts to different screen sizes.
Forgetting Image Upload
Images must be uploaded to the project via the Media panel (bottom of Properties). You can't use external URLs directly — upload the file first.
Too Many Components on One Screen
If a screen has too many elements, consider splitting across multiple screens or using a VerticalScrollArrangement to allow scrolling.
Pro-Tips for Exams
Exam Answer Format for UI Design
- List each component with its type, name, and key properties
- Describe the layout structure (which arrangement contains which components)
- Mention at least 2 UI/UX principles and how they are applied
- Draw a sketch of the screen layout if possible — examiners love diagrams
Graded Tasks
Name 5 UI components in App Inventor and describe what each one does. Name 3 layout types.
Explain the difference between HorizontalArrangement and VerticalArrangement. When would you use each?
Design a calculator app interface in App Inventor. List all components, their names, properties, and the layout structure used.
Create a two-screen app: Screen1 is a welcome page with a "Start" button; Screen2 has a form with text boxes, a spinner, and a submit button.
A student designs an app with white text on a light yellow background, tiny buttons, and no labels on input fields. Identify at least 4 UI/UX problems and suggest fixes.
Design a complete mobile app interface for a "To-Do List" application. Include: a title, text input for new tasks, an "Add" button, a list display, and a "Clear All" button. Apply at least 3 UI/UX principles.