The App Inventor Interface

The last lesson focused on generating an idea for an app. Once you have your idea, you will start to design the app. App Inventor makes this process very easy. You can actually see the design layout as you build the app.

The designer view is where you will begin to build the user interface for your app. You will be able to see the "look and feel" of the app as you design it. What you want the app to do will determine the components needed. What input do you need to receive from the user? What output do you need to display to the user? Other necessary components such as sounds or GPS are considered non-visible. These components are needed but do not display on the screen.

App Inventor Designer Interface

The Designer button is slightly grayed out when you are in the Designer mode.

Palette: contains element such as buttons, labels, textBoxes, sounds, sensors
Viewer: contains a representation of the app screen
Components: user interface elements currently in app.
Properties: the specific settings and values associated with the selected element.

screenshot of the designer view with the following denoted: palette, viewer, components, properties

User Interface Components in the Design View

User Interface Components screenshot:
Palette
Button
CheckBox
DatePicker
Image
A Label
ListPicker
ListView
Notifier
PasswordTextBox
Slider
Spinner
TextBox
TimePicker
WebViewer Other UI components:
Layout
Media
Drawing and Animation
Sensors
Social
Storage
Connectivity
LEGO® MINDSTORMS®
Experimental
Extension

Go through the learning object to identify each of the user interface components in the design view.

App Inventor Blocks Interface

Built-in blocks are available regardless of which components are in your project. In addition to these language blocks, each component in your project has its own set of blocks specific to its own events, methods, and properties. We will look at those later.

screenshot of code blocks tab:
view transcript below image.

View a transcript of the above image here.

Built-In Drawers: Find Blocks for general behaviors you may want to add to your app and drag them to the Blocks Viewer.
Blocks Button: Click from any tab to go to the Blocks tab.
Component-Specific Drawers: Find Blocks for behaviors for specific Components and drag them to the Blocks Viewer.
Block: Snap Blocks together to set app behavior.
Viewer: Drag Blocks from the Drawers to the Blocks Viewer to build relationships and behavior.

These are the built-in blocks for programming the components.

Screenshot of other components:
Built-in
Control
Logic
Math
Text
Lists
Colors
Variables
Procedures

Go through the learning object below to match the image block to the correct programming construct where it can found.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION