Our First App Using App Inventor

App Inventor lets you create Android apps without any knowledge in programming. How cool is that! You design your apps on a web page, assemble pieces of logic blocks together on the same page, test your app on an emulator or on your phone while you are designing; cool, huh? Your projects are hosted by Google. All you have to do is design and join the pieces together like a puzzle game. Check the official Setup section to get started. If you are looking for Tips/Tutorials, go to the Tutorials page.

Our First App: WildLifeShow

Now that you are all setup, let's make our first app. We will call it WildLifeShow. The concept is, we will have three buttons on the app. Upon a button click, we will display a corresponding image and fire up a specific sound. Here's a snapshot of the app we are about to make-

If you encounter any problem during development, visit the official Troubleshooting page.

Let's get started. I know you are excited! On your browser, go to Projects. Click the New button to create WildLifeShow app. This will make a new dialog box to open. Enter the name of our app in the Project name box. Press OK.

Now drag a VerticalArrangement component on Screen1 window where we will display our images later. This will create a vertical arrangement component on ourScreen1. The name of the component will be automatically VerticalArrangement1. You can change the name by selecting the component under Components pane and then selecting Rename button below the pane.

All the components you drag to Screen1 can be seen under Components pane. We need to change some properties of VerticalArrangement1. Select VerticalArrangement1 under Components pane. On Properties pane you will see the properties of the component you selected. Change VerticalArrangement1's Width to Fill parent and Height to 350 pixels.

Drag an Image component and place it inside VerticalArrangement1 component that we placed earlier on Screen1. Note that the name of Image component is Image1.

Get a Label component and place it below VerticalArrangement1. Take note of the name of our Label component which is automatically set to Label1.

We need to change some properties of the Label component. Select Label1 under Components pane and change some of its properties as stated below-

Check the FontBold property.
In the Text property, type Tap On A Button To Hear Them. You can type anything you like.
Change the TextAlignment to center if not already set by default.
Set TextColor to Blue.
Change the Width to Fill parent.

Now we need a HorizontalArrangement component where we will place our three buttons. Get a HorizontalArrangement component and place it below our Label component. Take note of the name HorizontalArrangement1.

Inside the HorizontalArrangement1, place three Buttons one after another.

Now change the properties of the buttons as follows:

Select Button1 and change its Text property to Elephant, Width to Fill parent, and have FontBold property checked.

Now, select Button2 and change its Text property to Bird, Width to Fill parent, and have FontBold property checked.

Lastly, select Button3 and change its Text property to Penguin, Width to Fill parent, and have FontBold property checked.

This is how a button property should look like-

We also need to play sound. In order to do that, drag a Player component and place it anywhere on Screen1. Since Player is a non-visible component, this will appear underneath Screen1 window.

We need to change some Screen1 properties. First we want our app to be on Portrait mode. Second, it should not be scrollable. And lastly, we need to change the title to WildLifeShow. Select Screen1 and change it accordingly to match the settings in the image below.

Let's get our picture and sound files added. For our app, we used the following image and sound files which you should download to your computer.

Under Media pane, click Upload File... and upload the image and sound files that you saved in your computer one by one.

You should see now the following under your Media pane.

Now that we are done with the design portion of our app, we need to implement the interactions among the components we have. For instance, we want the Elephant picture to be displayed and Elephant sound file to be played once Button1 is clicked. In order to do that, we got to open the Blocks editor window. Click on the Blocks button located on top right of the web page. You will also notice Designer button there. You can switch back and forth between the windows.

On the Blocks editor window, click on the tiny '+' symbol beside Screen1 to expand. Locate Button1 and click on it. Now we can see all the events and different properties of Button1. Select and drag the Button1.Click block to Viewer window as shown below.

Now under Screen1, locate and click Image1. This will show the events and properties of Image1. Get the "set Image1.Picture to" block and place it inside theButton1.click block. Once you place it, you should hear a click sound which means the blocks are properly connected to each other.

We need to set the source of the picture to our image Elephant.png. To do that, click on Built-In tab, then locate and click Text block. Drag the empty text block over to the right and connect it to Image1.Picture block as shown below.

The text block indicates which picture to display. Click on double quoted empty space of the text block and change it to Elephant.png. Careful with the casing. If you have saved the Elephant.png file as elephant.png, then type elephant.png.

Now locate the Player1 and place the Player1.Source block below Image1.Picture block. Connect a text block to Player1.Source block and change the text of textblock to Elephant.wav. After that drag "call Player1.Start" block below it as shown below.

Do the same thing for Button2 and Button3. For Button2, use Bird and for Button3, use Penguin. Your blocks should look like the snapshot below.

You are DONE. Yey! Now it's time to see our app in action. You can run the app you just made in an Emulator to test or in an actual android device if you have. Details instructions on setting up an emulator or a device can be found in the Setup page.

After you have setup to run on an emulator, you can go to Connect and then click on Emulator.