Final Day: Designing screens/A personal app

The video ends, "Take a screen shot with the approximate dimensions of the app inventor screen, find it on your desktop, and name it something you will recognize." We named ours openingScreen.png and included it in the files you will upload to use in this tutorial.

The mockup below shows the layout of the elements (images of the activity, foods, radio station and a quote) in the app you will make in this tutorial. It's a good idea to mockup your app before you get started with your opening screen design. If your app has multiple screens, you might want to draw a mockup of each screen.

Getting Started

• 1. Go to the MIT App Inventor and log in using your Google account

  2. Click on "My Projects" on the top and then press the New button.

  3. Name the new project Final_Day

  4. Click to open it

Connect Your Emulator

• 1. Select Connect from the menu bar at the top of the page and click on Emulator to launch it

  2. Once the Emulator is running go on to the next step.

Let's Start - Designing the opening screen

Download the following files to your computer. Unzip the file and then upload the files individually to the app inventor Media Section under Components by clicking Upload File.

Final Day Files

1. In order to see your design, set Screen1’s BackgroundColor to none and the Align Horizontal to Center. Under BackgroundImage select openingScreen.png. Set the ScreenOrientation to Portrait. Change the Title to My Day. The background for your app should be the colored screen with the text “It’s a ...kind of day”.

• • 1. This app will allow you to share four elements that describe your day: an activity, a food, a radio station and a Quote of the Day. You’ll want to arrange these elements in a visually appealing way with adequate space between them. You’ll also want to include the date on the screen.

1. Drag a Horizontal Arrangement to the top of your screen. If you set the Width to 320 pixels and the height to 420 pixels, the horizontal arrangement fills the screen and you now know the area of the space that you have to work with when designing your screen.

1. You’d like the first horizontal arrangement to surround the top line of text “It’s a…”, and exclude all of the new elements so they don’t overwrite the text. It looks like that would be about one fifth of the screen height. 420 pixels in length divided by 5 is 84, so try setting the height to 70 pixels to allow for some wiggle room and the width to fill parent, set Align Horizontal to Right.

1. 
   

2. We want the date to appear on the opening screen. Drag a Label into HorizontalArrangement1, rename it dateLabel, set the Text to Date, and change the TextColor to white. In order for the dateLabel to work, we need to drag in a Clock component from the User Interface palette.

3. Our mock up shows that we want space for the image of an activity next but it might look better if we left a little space between. You can do this by dragging in a second horizontal arrangement, setting the width to fill parent, the height to automatic and Align Horizontal to Center. Drag a label into Horizontal Arrangement 2, remove the text, set the background color to white, the width to 250, and the height to 1 pixel. This will create a narrow white bar below the first Horizontal Arrangement - it’s a way of drawing a line on your screen. Rename this label whiteLineLabel. When we were designing this screen, we found that it looked better when we had a little space after the white line and before the next Horizontal Arrangement. We inserted an additional Horizontal Arrangement, set the height to 6 pixels and the width to fill parent to provide a little space.

1. Drag in another Horizontal Arrangement for your “Activity” image. Set width: fill parent; change Height to 100 pixels; Align Horizontal to Center. Drag an Image into this Horizontal Arrangement and rename this image “activityImage.” You will be using our selected images when you build this app. At the end of this tutorial, we will include directions for capturing images and resizing them for when you are ready to include your own images.

2. Drag in another Horizontal Arrangement to use as a spacer. Set width to Fill Parent and height to 2 pixels.

3. The next Horizontal Arrangement will contain our final two image elements. Set the Width to Fill Parent, the height to 100 pixels, and Align Horizontal and Vertical to Center. Drag two images into this Horizontal Arrangement. Rename one “foodImage” and the other “radioStationImage.”

4. In this Horizontal Arrangement, you’ll use Labels as vertical spacers. Drag in a Label and drop it on the far left side of the screen in this Horizontal Arrangement. Remove the text and set the width to 12 pixels. Drag in another Label and drop it between the two Images. Remove the text and set the width to 12 pixels. Having these labels as vertical spacers spreads out your images.

It's best to go back to the activity, food, and radioStation images and reset the Picture to None...

Programming the opening screen

This app will require multiple screens in order to select images that describe your day. To store the selections we need a database on each screen. In addition to screens that allow us to select images, we'll need a master screen that sets the opening screen.

• 1. Drag a TinyDB from the Storage Palette.

  2. Open the Blocks Editor and drag out whenScreen1.initialize do block. Drag out the set dateLabel.Text to block and put it in the initialize block. We want today's date on Screen1. Drag out the call Clock1.FormatDate instant block and a call Clock1.Now block and snap them in place. Test it in your Emulator to be sure you see today's date.

  3. Snap a set activityImage.Picture to block into the whenScreen1.initialize do block. Snap a call TinyDB1.GetValue block into the set activityImage.Picture to block. Grab a blank text block, type in "activity", and snap this into the tag slot.

  4. Do the same for the other images, the quote label, and the background image for Screen1 (set Screen1.BackgroundImage to block). When you're done, your initialize block should look like this:

• 1. Finish the blocks for Screen1 by dragging out a when setButton.Click do block. Drag out an open another screen screenName block from the Control blocks and snap it into the when setButton.Click do block. Grab a text block and type "setMoodScreen" (which is what we will call the next screen) and snap it in place.

• 1. Click Add Screen and type in setMoodScreen as the name. The setMoodScreen is the "master screen" that sets the opening screen (Screen1). Make sure you have typed the screen's name exactly how it is typed in step 5.

Designing and programming the setMoodScreen

• 1. You should be in the Designer for the setMoodScreen. Set the BackgroundColor to Gray and the Title to setMoodScreen.

  2. Drag in a HorizontalArrangement and set the width to Fill parent. Add a Label. Since the background is Gray, change the TextColor to white, set the FontSize to 18 and type "Change your mood by clicking a button. Enter your Quote of the Day". These are the instructions for this screen.

  3. Drag in a second HorizontalArrangement and set the Width to Fill parent. Add a Label, remove the text, set the BackgroundColor to White, the Width to Fill parent, and the Height to 2 pixels. This will be a spacer with a white line.

  4. Drag in a VerticalArrangement because we want to stack 3 components vertically. Set the width to Fill parent. Drag in a TableArrangement and set it to 2 Columns and 3 Rows. Set the Width to Fill parent. Drag in a Label and a TextBox below the TableArrangement.

  5. Drag in 3 Buttons making sure they are aligned to the left side of TableArrangement1. These buttons are in the first column of the table. Drag in 3 Images and drop them in the second column of the table.

  6. Make each Button rounded, rename each Button and set the Text for the Button as follows: activityButton/My activity; foodButton/I'm hungry for...; radioButton/What I'm listening to

  7. Rename each Image as follows: activityImage, foodImage, radioImage

  8. In Label3, set the text to "Enter your Quote of the Day", and set the text color to white.

  9. Rename the TextBox to quoteTextBox and set the Width to Fill parent.

• 1. Drag in another HorizontalArrangement, set the Width to Fill parent, and drag in a TableArrangement. Set the width to Fill parent, the Columns to 2, and Rows to 3.

  2. Drag in 3 CheckBoxes making sure they are aligned to the left side of the TableArrangement. Drag in 3 Images and place them in the second column. Rename the CheckBoxes and set their text as follows: blueCheckBox/for a Cool Blue day, redCheckBox/for a Righteous Red day, and blackCheckBox/for a Chic Black day, and the text color to white.

  3. Select Image1 (the one next to the blueCheckBox) and set the Picture to smallScreenBlue.png. Do the same for the red and black CheckBoxes setting the Pictures to smScreenRed.png and smScreenBlack.png.

  4. Drag in a Label as a spacer, set the Height to 5 pixels, and remove the text.

  5. Drag in a Button and rename it setMoodButton. Set the BackgroundColor to Orange, the FontSize to 18, the Shape to rounded, and the Text to "Set your new mood"

  6. Finally, drag in a TinyDB.

Now on to the programming...

• 1. Open the Blocks Editor. Drag out a when setMoodScreen.Initialize do block. We need to set the Picture for the three Images and the Text for the quoteTextBox. We've already assigned tags for the values of each of these on Screen1.

  2. Drag set activityImage.Picture to block into place and add call TinyDB1.GetValue block. The tag is "activity"

Designing and programming the remaining screens (activityScreen, foodScreen, radioScreen)

• 1. In Designer, click on Add Screen and name it activityScreen. AlignHorizontal to Center and set the BackgroundColor to Gray. Make sure the Title is activityScreen (correctly spelled and using the correct case).

  2. Drag in a TinyDB.

  3. Drag in a button and name it bikeButton. Click on image and select bike.png. Set the Text to "click to set", the TextAlignment to center, and the TextColor to White.

  4. Drag in a label to use as a spacer. Set the height to 6 pixels and remove the text.

  5. Repeat steps 3 and 4 for 2 more buttons and labels. There will be a button for a kayak image and a button for a hiking image. Choose one of the kayak images and one of the hiking images for your buttons. Remember which kayak and hiking png you choose for programming the buttons.

  6. Open the Blocks Editor.Drag in a when bikeButton.Click do block. Add a call TinyDB1.StoreValue block with tag "activity" and valueToStore "bike.png". This is the image for the bike button. Add an open another screen screenName block and plug in a text block "setMoodScreen".

• 1. Do the same for your kayak button and hiking button. This should complete your activityScreen.

  2. Connect the Emulator which should open to your activityScreen. Click to select an activity image which should take you to the setMoodScreen (be patient; it might take several seconds). Click the Set Your New Mood button which should take you to Screen1 which has your selected activity image if everything is working.

  3. You need two more screens, the foodScreen and radioScreen. These are designed to look the same with three buttons (for your food or radio station images) and labels , contain a TinyDB, and, when the button is clicked, will open setMoodScreen. The tag will be "food" or "radio" and valueToStore will be the food or radio station images.

Sharing with your friends & customizing the app

• 1. Follow the instructions in Day 2 to get your app on your Android phone. You can take a screen shot of your mood of the day by holding down the volume down button and the power button at the same time. The image will appear in your Gallery in a file called Screenshot. You can attach the image file to an email to a friend.

  2. If you want your own images in addition to your own opening screen watch the video below to see how we take a screenshot from images on the web, bring them into Preview and resize them to fit our layout. The pictures for activityImages have a height of 100 pixels and the pictures for foodImages and radioStationImages have a height of 80 pixels.

RESIZING IMAGES