(MAD) The App Inventor Interface Lesson

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.

  1. Palette: contains element such as buttons, labels, textBoxes, sounds, sensors
  2. Viewer: contains a representation of the app screen
  3. Components: user interface elements currently in app.
  4. 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 WebViewerOther UI components: Layout Media Drawing and Animation Sensors Social Storage Connectivity LEGO® MINDSTORMS® Experimental Extension

 

Learn about each of the different User Interface Components by clicking on the links in the sidebar. Then 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: 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. Any component Block: Snap Blocks together to set app behavior. Rename Date Fro 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

Click on the App Inventor Built-In Blocks link in the sidebar to learn more information about the types and purpose for the built-in blocks. Then 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