Day 8: Music Player / Working with Screens

What We're Going to Learn Today

In today's tutorial, we are going to learn about working with multiple screens. We are going to make an simple music player app.

Note: You cannot test screens. They will own work if you "package your app for your phone" and then run the app on your phone or emulator.

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 Day8
4. Click on Day8 to open it
5. Open an emulator or connect your phone to app inventor using the MIT Companion App

Let's Start

Download the following files. Upload them to the app inventor by clicking Add... under the Media Section of the main window:

• justinbieber.jpg
• justinbieber.mp3
• ladygaga.jpg
• ladygaga.mp3
  1. First start by setting Screen1's AlignHorizontal to Center

Now let's start adding components to the viewer.

1. Drag a TinyDB and Player to the viewer
2. Set the Player1's IsLooping Property to true (check the box)
3. Add, in order, to the viewer: 3 buttons, a label, an image, and finally one more button
4. Rename the first button to "Play_Button" and set its Text Property to "Play"
5. Rename the second button to "Pause_Button" and set its Text Property to "Pause"
6. Rename the third button to "Stop_Button" and set its Text Property to "Stop"
7. Rename Label to "Artist_Label" and delete all its text under its text property
8. Rename Image to "Artist_Image"
9. Rename the last button to "Settings_Button" and set its Text Property to "Settings"

1. Now add a HorizontalArrangement above all of the buttons.
2. Drag the Play, Pause and Stop buttons into this HorizontalArrangement

Second Screen

We are now going to set up a second screen

1. Find the "Add Screen" button toward the top of the page
2. Add a screen and name it "Settings_Screen"
3. You'll notice that all of the components we added to Screen1 are not on Settings_Screen but the Media we uploaded still is
4. Add a TinyDB to Settings_Screen
5. Add a VerticalArrangement
6. Add a Label to VerticalArrangement1 and set its text property to "Pick an Artist"
7. Add two buttons under Label1 and inside the VerticalArrangement1
8. Rename the first button to "Bieber_Button" and set its Text Property to "Bieber"
9. Rename the second button to "Gaga_Button" and set its Text Property to "Gaga"
10. Now add a HorizontalArrangement under VerticalArrangement1. Set HorizontalArrangement1's width to "Fill Parent"
11. Inside of HorizontalArrangement1 add a Label. Set the text property of this label to "Volume:"
12. Add two buttons to the right of Label2 inside of HorizontalArrangement1
13. Rename the first button VolumeDown_Button and set its Text Property to -
14. Rename the Second button VolumeUp_Button and set its Text Property to +
15. Add a label to the right of the VolumeUp_Button and inside the HorizontalArrangement1
16. Rename the label Volume_Label and set its Text Property to 50
17. Below HorizontalArrangement1, add a button
18. Rename this last button to "Return_Button" and set its Text Property to "back"

Blocks Editor

A quick note about Screens and Blocks

1. Go to the Blocks Editor
2. Look at the Screen title in the upper left corner of the blocks editor
3. Now go back to the viewer and change screens
4. Go back to the blocks editor and note that the title in the upper left changed to the screen you switched to
5. Blocks on one screen DO NOT affect blocks on other screens
6. If you need to pass information back and forth between screen you need to use the TinyDB

We are now going to start adding blocks to Screen1

1. Go to the Screen1 board
2. Drag the when click do blocks for the Play, Pause, and Stop buttons to the board
3. Fill them with the corresponding calls for Player1

1. If you test these buttons on your phone you will note that nothing plays. This is because we haven't told Player1 what to play yet. We can do that on the Settings_Screen
2. Go to the Settings_Screen board
3. Drag out when Bieber_Button.Click do and when Gaga_Button.Click do and place them on the board
4. We need to tell Screen1 which button the user clicked last. We do this with TinyDB
5. Add call TinyDB1.StoreValue to each when block
6. Put a text block in each of the tag slots. Name them both "artist." This way, each button will save values under the same tag. Which ever value is under the tag, Screen1 will know it was the button checked last.
7. Now put a text block in each of the valueToStore slots. Name them justinbieber and ladygaga
8. Look at the names of the values we are storing in the TinyDB
9. Look at the names of the mp3 and jpg files we uploaded. Do you see similarity? This was on purpose. It will let us quickly pick the right files on Screen1
10. Finally, add when Return_Button.Click do to the board and fill it with call close screen
1. call close screen can be found under the built in blocks "control." When we click the Return_Button, Settings_Screen will close, returning us to the only open screen: Screen1

Back to Screen1

1. Return to Screen1's blocks board
2. Now that the user has stored what artist he/she wants to listen too on the Settings_Screen, we need Screen1 to get that information from the TinyDB and use it
3. Drag when Screen1.OtherScreenClosed do onto the board
4. We need this block to know "what other screen" was closed. Change the text under its otherScreenName to "Settings_Screen"
5. Now add set Player1.Source to and set Artist_Image.Picture to to when Screen1.OtherScreenClosed do
6. If you remember, we set the TinyDB1 value of "artist" to the same name as the files we uploaded. This is going to come in handy right now.
7. Add join blocks to each set
8. Have the TinyDB1.Value "Artist" for the left half of each join and .mp3 and .jpg for the right side.
9. Remember, join smashes two things together and makes one. So if the TinyDB1.Value is currently set as justinbieber, the join will add justinbieber to .mp3 and .jpg to make justinbieber.mp3 and justinbieber.jpg
10. Finally, remember to have when Settings_Button.Click do open Settings_Screen. Find call open another screen under build it control

Making an App for Your Phone

1. Make sure the blocks editor is still open
2. Make sure your phone or emulator is connected to the blocks editor
3. On the components page, click the Package for Phone button
4. Select Download to Connected Phone (this works for the emulator too)
1. Wait a really long time
   1. When the window pops up, click OK.
   2. Close the Blocks Editor
   3. Look at your phone and open the app drawer.
   4. Search for "Day8" and run it.
   5. Congratulations, you made your eighth app!

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: Make the volume buttons work

Super Hard Challenge: Find a way to make it so the app remembers the users' last choice when the app opens up

Developers Challenge: Create an icon for your app. Add more songs.

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