DML 2012

MTR: Teaching with App Inventor

Magic Eight Ball

1. Create a new project named MagicBall
2. Drag in a Button and an AccelerometerSensor
3. Download the 8-ball picture from:
4. Back in App Inventor's component designer, set the button's Image property to the picture you downloaded.
5. Drag in a Label below the ball and set its Text property to "Your answer is...."
6. Open blocks editor (if it isn't already open)
7. From the built-in drawer, go to the Definitions drawer and drag out a variable block.
8. Change the variable's name to answers.
9. From the Lists drawer, drag out the make-a-list block and plug it into the answers variable. Add some texts to the list (e.g., yes, no, maybe)
10. From the AccelerometerSensor drawer in My Blocks, drag out a Shaking event handler
11. In the Shaking handler, set Label1.Text to be a random item from the answers list. Use the pick-random-item block from the Lists drawer.
12. Package and try the app

Packaging an app to the phone/emulator
There are a few ways to get an App Inventor app to the phone:

1. If your computer is setup with the App Inventor software:

Live Test: Plug in your phone to your computer with a USB cable. Then choose Connect to Device from the Blocks Editor menu, and choose the code that appears (if your phone is connected you'll see a code like HT9CVP323425354). If you don't, there is a problem. For now go to 2.

Package app onto the phone. If you live test and disconnect your phone from computer, the app you built will not be on the phone. Reconnect, then choose Package for Phone | Download to Connected Phone. This will get the app onto your phone.

Run on the emulator. If your computer is setup, but you don't have a phone handy, you can test using the Android emulator. In the blocks editor, click New Emulator. When it loads completely, choose Connect to Device and choose emulator-xyz. For some apps, e.g., ones that use the Accelerometer, you'll need to change how the UI works (e.g., button click instead of shaking triggers activity).

2. If your computer is NOT setup with the App Inventor software ((see setup) or you're having problems connecting, you can generate a barcode and scan the app on your phone:

Show Barcode. From the App Inventor component designer, choose Package for Phone | Show Barcode. Then use ZXing or another barcode scanner app on your phone to scan and install the app.


1. In the component designer, drag in a TextToSpeech component from the "Other Stuff" drawer
2. In the blocks editor, drag in a TextToSpeech.Speak block and put it in the Shaking event. Set its parameter to Label1.Text.


What would you like to change/add? Here are some ideas:
  • Beautify the user interface: Label font size, Button text color, Button font size
  • Use TextToSpeech to say “What would you like to know?” when button is clicked
  • Add more answers: definitely, postively, unlikelythe answer is fuzzy try again, I don’t think you want to know, etc.
  • Change the eight-ball to a different image (e.g. a genie)
David Wolber,
Feb 29, 2012, 8:56 AM