Week 31

Coding the Multi-App

We will be making a single App that has all the programming for our apps coded and designed on separate screens. We'll re-make Hello Codi (with something other than a bee, please) on a HelloCodi screen in this "Multi-App", but first we'll create a menu structure to manage the app screens. This Multi-App will have a unique name based on your class period and your name: P#_LastName_FirstName, where # is your class period number. Notice the underscores used to separate things instead of spaces - they are not allowed in App Inventor.

Make sure you are using the Expert Toolkit, since a "Beginner" will be missing elements that we need for our apps. Note that there is a Project Properties tab for setting the icon and switching between Toolkit levels.

Design a Menu on Screen1

We are combine all the beginner apps together, with each app on a different screen. There are several reasons for this that will become clear later, but it means creating a "master" app with a menu and an About screen before we even get started on the beginner tutorials.

Coding a Screen Change

Navigating between screens is key; let's start with the About screen. Adding new screens is simple enough - we will name them according to their purpose. There is no renaming of Screen1, and the app always starts there - it's why we is it for our main menu.

Menu and Exit Buttons

Right now, the screens we added are essentially dead ends. Every screen will need button in the upper left-hand corner returning users to the main menu by closing the current screen. We also want users to exit the app gracefully, so add a button on Screen1 that does that.

Scrolling "About" Screen

Our About screen lets users know about the person who made the app. We'll copy and paste our text from our About Me section of our portfolio, because App Inventor is NOT the place to try and write more than a few words. Make the font large (between 40 and  60, more or less) that the scrolling feature of the vertical arrangement we're using is needed to read the whole thing.

230328 Using the PDF for Hello Codi.mp4

Redo "Hello Codi" from PDF

Now we create a version of "Hello Codi" on the HelloCodi screen. Each tutorial has a DATA PDF version. The image and sound files can be downloaded directly from the PDF instructions - upload them to the Media panel so they can be referenced in the Properties panel when needed. Follow the instructions in the Media section above.

DO NOT FOLLOW THE MIT APP INVENTOR INSTRUCTIONS - GO TO THE PAGE WITH ALL THE MODIFIED "DATA" PDF INSTRUCTIONS LINKED BELOW

Appearance

You may have noticed how small the buttons are - right now they are sized automatically based on the font size. You should make the font bold and customize color combinations to improve the appearance of your menu. Make certain you have a high level of contrast between the button and its text - legibility is the MOST important part of any words you display for your user. The Exit button here has a black background, white text and a bold font that's 28 points in size - all set in the Properties panel.

4 Beginner Apps

Continue with the rest of the beginner apps. Make a screen for each of them and a button for each that takes the user to the right screen. Hint: You can save a lot of time if you Copy and Paste from the Component panel and use the Backpack on the Blocks screen. Just slide a coding block into the backpack and pull it out when you are on the new screen.