Day 4 : HelloPurr / Media

What We're Going to Learn Today

In today's tutorial, we are going learn how to upload media (pictures and sounds) to use in an app. We are going to make an app that is a picture of a kitty that meows when you pet it.

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 Day4

  4. Click on Day4 to open it

  5. Open an emulator or connect your phone to app inventor using the MIT Companion App

Let's Start

• 1. Download this picture of a cat and this sound file.

1. Drag and drop the Button component to Screen1. The Button component is located in the Basic section of the Palette.

2. In the list of properties, under Image, click on "none..."

3. Click "Add…"

4. Click "Upload File ..."

5. Click "Choose File"

6. Select the the kitty.png file you downloaded earlier and click "OK."

7. Click OK once again.

8. Delete "Text for Button1" listed under the Text property using the Backspace key.

Add a Label

Under Palette:

• 1. Drag and drop the Label component to the Viewer, placing it below the kitty. It will appear under your list of components as Label1.

Under Properties:

• 1. Change the Text property of Label1 to read "Pet the Kitty". You'll see the text change in the Designer and on your device.

  2. Change the BackgroundColor of Label1 by clicking on the box

  3. Change the TextColor of Label1

  4. Change the FontSize of Label1 to 30

Add a Sound

Under Palette:

• 1. Click on the header marked Media to expand the Media section of the palette of components.

  2. Drag out a Sound component and place it in the Viewer. Wherever you drop it, it will appear in the area at the bottom of the Viewer marked Non-visible components.

Under Media:

• 1. Click Add...

  2. Upload the meow.mp3 file to this project.

Under Properties:

• 1. For the Sound1 component, set its Source to meow.mp3.

Making the Sound Play

Navigate to the Blocks Editor. It may be covered up by the web browser.

• 1. Click the My Blocks tab at the top left hand side.

  2. Click Button1.

  3. Drag and drop the when Button1.Click do block onto the editor.

  4. Click Sound1.

  5. Drag the call Sound1.Play block onto the editor and drop it into the when Button1.Click do block.

  6. Click the kitty picture on your device. You should hear the kitty meow.

Challenge Stuff

Here are some hard things to try to do. If you don't want to try any of these, or are finished:

Regular Challenge: Swap the picture of the cat with a picture of your cat or a cat you like on the internet.

Super Hard Challenge: Download this sound file and make it play when you shake the phone.

Developers Challenge: Set the app's icon to the same picture as the kitty. Center the picture of the kitty and the text.

This tutorial was modified for middle school students from one of the original app inventor tutorials

Middle School Android App Inventor Tutorials by Richard Incorvia is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.