Explore the Designer Page - INTRO TO APP INVENTOR - AGTECH

1. You are now on the “Designer” page of App Inventor. This is where we determine the app appearance.
2. The "Designer" page is comprised of 4 main sections: “Palette”, “Viewer”, “Components”, and “Properties”.
3. The “Palette” has multiple sections, each with its own components that can be dragged onto the screen to create an app. This is where buttons and other components are located.
4. The “Viewer” gives you an opportunity to view how your app will appear on a mobile device. When you drag components from the palette to the viewer, they will be added to your app. The view here simulates what you will see on your Android device.
5. The “Components” section lists all the components used in your app. Right now, you only see “Screen 1” because you have not added any additional components. Once you start adding more components to your app (buttons, for example) they will be listed here.
6. The “Properties” section is where you can edit the properties of each component. Right now, you can only edit the screen properties because it is the only component. Once you add more components, you will be able to edit the properties (text, color, etc.) for each component.

Understanding each section of App Inventor will make it easier as you progress in creating your app by adding more components and changing their properties. Remember, the more you use App Inventor, the more familiar you become with where to find components and how to change their properties.

For students working in pairs (recommended), assign one student to complete the "Designer" page and the other to complete the "Blocks" page of the app.

If you are using the Thinkabit Lab Notebook:

Display the App Inventor Designer and use it to highlight the different sections and their use. Below is a script example to share what to say and write when presenting the App Inventor "Designer" page.

1.  “This is the Designer page of App Inventor” (Draw an arrow to Designer in the top right corner)
2. “The palette is where you find all of the components that could be added to your app.” (Draw a box around Palette)
3. “The user interface (Draw an arrow to User Interface) is where we find items to add to our app: buttons (Underline button), images (Underline image) and labels (Underline label).
4. “You may want to use the layout options to arrange components within your app” (Draw an arrow to Layout)
5.  “When you create your Bluetooth app, you will find the Bluetooth component in the Connectivity drop-down (Draw an arrow to connectivity and write Bluetooth)”
6. “The next section is the Viewer (box viewer). This is what your app will look like on your Android device (Write ‘what your app looks like’ on the screen)”
7.  “Any non-visible components, like Bluetooth, will appear below the screen” (Write ‘non-visible components’ below the screen)
8. “The next section is the Components (Draw a box around components). This is where you will see a list of everything in your app (Write ‘list of everything in your app’ in the components section)”
9. “This is also where you can rename the component (Draw an arrow to rename) to be able to tell similar components apart, for example, if you have multiple buttons, you want to name each one appropriately.”
10.  “The last section is the Properties (Draw a box around Properties). This is where you can change the text and the design of each component (Write change text and design in the Properties section). If you want to change colors, shape, font, or anything design related, you will find it here.”

Don’t see the 4 sections mentioned on the screen

1. Make sure you are in a new project. Go to “Projects” (from the top navigation, on the left side of the screen) and click “Start new project”.
2. Make sure you are on the "Designer" page and not the "Blocks" Page. On the top right corner of the screen, you should see “Designer” and “Blocks” tabs. Click “Designer” to confirm that you are on the right page.
3. Your view might be zoomed in. Zoom your view out.