The Designer

When you open a project or start a new project, App Inventor will take you to the Designer. This window is a graphical editor where you can create the look and feel of your mobile app by choosing components (buttons, labels, images, and so on), layouts (horizontal/vertical alignments), colors, fonts, and more. The next screenshot is a layout of the Designer (with some helpful navigation hints):

The name of the open project is displayed in the upper-left corner. In the upper-right corner, you will see toggle buttons for the Designer and Blocks Editor (the Designer button is disabled at the moment, since we are currently in the Designer view). The Designer consists of five panels, which are explained as follows.

Palette

The Palette (found in the left-hand column of the previous Designer image) contains drawers that hold sets of tools called Components. Drawers group Components by type such as User Interface, Layout, Media, Drawing and Animation, Sensors, Social, Storage, Connectivity, and LEGO MINDSTORMS. It will take a little bit of time to remember which drawer houses which Components and what functions they have. More on Components later!

Viewer

The Viewer (found in the middle of the preceding Designer image) is the white workspace in the middle of the Designer window. When you first create a project, the default workspace name is Screen1. You cannot change the name of Screen1, although you can change the title of the screen name. This can be done in the Properties panel (as follows). The new screen name will be displayed in the Viewer and be seen by app users. Later, you may want to add more screens to your app and you can rename the subsequent screens. To build your app, you will drag Components from the Palette drawers onto the Viewer. We will be using visual components in our Fling app, so these will remain visible when dragged into the Viewer. In the subsequent chapters, we will demonstrate the use of non-visible components, which will not remain in the Viewer when added. Instead, they will be housed underneath the Viewer.

Components

Components are the tools located in the Palette drawers on the left-hand side of the Designer window (we will demonstrate what different components do once we start building apps). Once Components are dragged into the Viewer, they will also appear in the Components panel (found in the middle right of the Designer image). The Components panel lists Components and organizes them by screens. You can collapse and expand the screen Component contents for convenience. Components are listed in columns so that it is easy to see whether they exist on their own or within other Components.

To illustrate that some Components are inside other Components, the Components panel will display them in a nested (indented) list. Note that when you click on a Component in the Viewer, it will be highlighted in both the Viewer and the Components panel and display editable options in the Properties panel (described in the following section). And conversely, if you click on a Component in the Components panel, it will also be highlighted in the Viewer. Once a Component is clicked and it becomes active, you can either rename or delete it by clicking the Rename or Delete button or you can view or edit its settings in the Properties panel.

Properties

The Properties panel (found in the right-hand side column of the preceding Designer image) displays a set of configurable settings (such as size, color, and alignments) for each Screen and Component added to the Viewer. In the subsequent chapters, you will be adding more and more Components (and Screens), so make certain that the correct item is highlighted before you change its settings. The name of the active Component (or Screen) appears at the top of the Properties pane (in the earlier Designer screenshot, the active Property is Screen1 as indicated at the top of the Properties panel).

Media

The Media panel is located underneath the Components panel (see the Designer screenshot). This feature enables you to upload images, sound files, or other media files from your computer to your project. If you find a creative commons (freely shared, uncopyrighted) photo online that you'd like to use in your app, you must first download it and then click on the Upload File button in the media panel (you cannot download an image from the Internet directly into the App Inventor). Once the file is uploaded, it will be listed in both the Media panel and the Properties panel (to delete media files, click on the media file name and a popup will appear to delete the file). Note that even though the media files can also be added to the Properties panel, they cannot be deleted from the Properties panel. How to use an image, sound, or video file in your app will be explained in the future chapters.