In this codelab, you will create an app that plays speeches by Michelle Obama and Hillary Clinton.

What you'll learn

• Use Arrangement components to organize other components like buttons and labels on the screen.
• Play media using the Player component.
• Use if-else blocks to control what your app does in different situations.
• Check a component's properties using code.

You will use an App Inventor starter app to begin this app. The starter app has no code, just the image and sound files you will need.

Go to ai2.appinventor.mit.edu/?galleryId=6442217004335104 and click Open the app.

Name the new project LeadingWomen.

Set the Screen's AlignHorizontal property to "Center".

Drag a Button component into the workspace.

Challenges

1. Make the Button show a picture of Michelle Obama (use michelle.jpg).
2. Remove the text from the Button.

Drag two Label components onto the screen, one above the Button and one below.

Change the text of the labels as shown. For the top label, check the FontBold property and change the FontSize to 20.

Open the Media drawer and drag a Player component into the app.

Challenges

1. Set the source of the Player component to a sound clip of Obama's speech (use Michelle.mp3).

Go to Blocks View. Drag a when Button1.Click event handler into the workspace.

Now, you will modify your app to include Hillary Clinton.

Drag another Button component onto your screen, and set it to a picture of Clinton (use hillary.jpg).

From the Layout drawer, drag a HorizontalArrangment into the workspace, and add the two buttons so that they appear side-by-side.

Drag an Image component above the two buttons. Set the image to one of both Clinton and Obama (use hillary_and_michelle.png).

Add a second Player component and set it to a sound clip of Clinton's speech (use Hillary.mp3).

Challenges

1. Rename the Button and Player components as "ObamaButton", "ClintonButton", "ObamaPlayer", and "ClintonPlayer".
2. Make the user interface of your app look like this:

Go to Blocks View. Let's add the ability to pause the speech if it is already playing. To do this, we will use an if-else block.

First, drag a when ObamaButton.Click block. Then, drag an if block from the Control drawer. Click the blue modifier icon, and drag an else block into the picture of the if block. This modifies your if block to have two branches.

Place the if-else block into the when ObamaButton.Click event handler. Fill in the if-else block with the following blocks as shown.

Now, we want to ensure that both speeches will never play at the same time. If the Clinton speech is playing, and we click on the Obama button, we want Clinton to pause.

To do this, all we need to do is add a call ClintonPlayer.Pause block to the event handler as shown.

Challenges

1. Make the Clinton button play/pause Clinton's speech. Make sure the Obama speech pauses if Clinton's speech begins playing.

Hint: You can copy-paste blocks, as well as change the blocks to refer to different components using the arrow next to the component name.

You have used App Inventor to create an app that can play two different speeches!

What we've covered

• Use Arrangement components to organize other components like buttons and labels on the screen.
• Play media using the Player component.
• Use if-else blocks to control what your app does in different situations.
• Check a component's properties using code.

If you finish early, implement one or more of the following features for a bonus checkoff.