Day 8: Music Player / Working with Screens

What We're Going to Learn Today

In today's tutorial, we are going to learn how to work with multiple screens. We are going to make a music player app.

Note: You cannot test screens. They will only work if you "package your app for your phone" and then run the app on your phone or emulator. Instructions for how to get your app onto an Android device are at the end of the Day2 tutorial.

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

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

Download the following files to your computer. Upload them to the app inventor Media Section under Components by clicking Upload File.

• justinbieber.jpg

• justinbieber.mp3

• ladygaga.jpg

• ladygaga.mp3

  1. First start by setting Screen1's AlignHorizontal to Center

  2. Drag a TinyDB and Player to the viewer

  3. Set the Player1's IsLooping Property to true (check the box, Loop)

  4. Add, in order, to the viewer: 3 buttons, a label, an image, and finally one more button

  5. Rename the first button to "Play_Button" and set its Text Property to "Play"

  6. Rename the second button to "Pause_Button" and set its Text Property to "Pause"

  7. Rename the third button to "Stop_Button" and set its Text Property to "Stop"

  8. Rename Label to "Artist_Label" and delete all its text under its text property

  9. Rename Image to "Artist_Image"

  10. Rename the last button to "Settings_Button" and set its Text Property to "Settings"

  11. Now add a HorizontalArrangement above all of the buttons.

  12. 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". You'll notice that all of the components you added to Screen1 are not on Settings_Screen but the Media you uploaded still is. You can toggle back and forth between your two screens by clicking the button that currently says Settings_Screen.

  3. Add a TinyDB to Settings_Screen.

  4. Add a TableArrangement and change it's Properties to 2 columns and 3 rows.

  5. Add a Label to TableArrangement1 in the upper right corner and set its text property to "Pick an Artist".

  6. Add two buttons under Label1 and inside the TableArrangement1.

  7. Rename the first button to "Bieber_Button" and set its Text Property to "Bieber".

  8. Rename the second button to "Gaga_Button" and set its Text Property to "Gaga".

  9. Add two Images, one next to the Bieber_Button and one next the Gaga_Button and set the width and height to 30 pixels.

  10. Then add the images for each artist by selecting them from the uploads.

  11. Below TableArrangement1, add a button.

  12. Rename this last button to "Return_Button" and set its Text Property to "Back".

Blocks Editor

A quick note about Screens and Blocks. Just like in the Designer, you can toggle between the blocks for each screen. Changing the blocks on one screen doesn't alter the blocks on the other screen. If you need to pass information back and forth between screens you need to use the TinyDB

We are now going to start adding blocks to program Screen1.

• 1. Go to Screen1.

  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 the Emulator you will note that nothing plays. This is because you haven't told Player1 what to play yet. You will do that on the Settings_Screen.

  2. Go to the Settings_Screen.

  3. Drag out when Bieber_Button.Click do and when Gaga_Button.Click do

  4. You need to tell Screen1 which button the user clicked last. You 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. Whichever value is under the tag, Screen1 will know it was the button clicked 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 you are storing in the TinyDB.

  9. Look at the names of the mp3 and jpg files you uploaded. Do you see similarity? This was on purpose. It will let you quickly pick the right files on Screen1.

  10. Finally, add when Return_Button.Click do to the board and fill it with close screen which is found in "Control" blocks. When you click the Return_Button, the Settings_Screen will close, returning you to the only open screen: Screen1.

Back to Screen1

• 1. Return to Screen1 blocks.

  2. Now that the user has stored what artist he/she wants to listen to on the Settings_Screen, you need Screen1 to get that information from the TinyDB and use it.

  3. Drag out when Screen1.OtherScreenClosed do

  4. Because there are only two screens in this app the otherScreenName variable does not need to be specified.

  5. Now add a set Player1.Source to block and a set Artist_Image.Picture to block to when Screen1.OtherScreenClosed do

  6. If you remember, you 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 block.

  8. Plug callTinyDB1.GetValue blocks into the top slot of each join . Add the "artist" tag and .mp3 and .jpg in the bottom join slots.

  9. Remember, join smashes two things together and makes one. So if the callTinyDB1.GetValue 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 open another screen screenName under Control and plug in a text block. Type Settings_Screen into the text block.

Now your Music Player should be working in your Emulator. Here is how to check it by installing the .apk on the Emulator (just like you would on a real Android phone.

Getting the App on the Emulator

• 1. In the top menu click Build and select to build the app and save to your computer as a file called somefilename.apk where "somefilename" is the name of your App Inventor project (Day8.apk for this project)

• 1. The file will appear in your Downloads folder.

  2. Use your gmail account to attach this file to an email that you send to yourself (that is your gmail account) which you will open in the Emulator.

  3. Start the Emulator which will open the ai2 Companion. Click the home button on the Emulator and then choose the web browser. Type in the url mail.google.com and sign in to your account. Open the email you sent and click on the attached .apk. This will download the .apk to the Emulator. You'll see an icon in the upper left corner of the Emulator screen that is the download notifier. Click on the icon and drag to the bottom of the window to open the notification.

• 1. Double click on the .apk to install the app on the Emulator. Ignore the warnings, click the Install button, and open the app. It should just like it would on a phone.

But there is a problem if you are running this on an Android device. If you install this app on a device it plays, AT FIRST. But when the screen goes to sleep the music stops. This is a problem with app inventor apps. They have to be in the foreground to play. Here is a way to get around this by keeping the device from going to sleep. It involves using a "blank" Notifier.

• 1. Return to the Designer and add a Clock and a Notifier.

  2. Set Clock1 to 10000 milliseconds in TimerInterval and be sure the TimerAlwaysFires and TimerEnabled checkboxes are checked.

  3. Set the Notifier1 BackgroundColor to "None", NotifierLength to "Short" and TextColor to "White"

  4. Open the Blocks editor and drag out a when Clock1.Timer do block, add call Notifier1.ShowAlert notice block and add an empty text block to "notice". When the clock fires (every 10 seconds) it calls a notifier which has no color and no text - so you don't see it - but the app is aware of it and thus never sleeps! Here is what these blocks should look like:

Now your Music Player should play until you stop it if you install it on a device.

Challenge Stuff

Here are some other things to try:

Regular Challenge: Find a way to make it so the app remembers the user's last choice when the app opens up

Developer's Challenge: Create an icon for your app. Add more songs.