How to Make Apps Using MIT App Inventor
On your browser, go to My Projects., Enter the name of our app in the Project name box., Now drag a Vertical Arrangement component on Screen1 window where we will display our images later., All the components you drag to Screen1 can be seen under...
Step-by-Step Guide
-
Step 1: On your browser
Click the New button to create our Wild LifeShow app.
This will make a new dialog box to open. -
Step 2: go to My Projects.
Press OK. , This will create a vertical arrangement component on our Screen1.
The name of the component will be automatically VerticalArrangement1. , We need to change some properties of the 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. , Note that the name of Image component is Image1 , Take note of the name of our Label component which is automatically set to Label1. , Select Label1 under Components pane and change the following- Check the Font/Bold property.
In the Text property, type Tap On A Button To Hear Them.
You can type anything you like.
Change the Text Alignment to center.
Set Text/Color to Blue.
Change the Width to Fill parent. , Get a Horizontal/Arrangement component and place it below our Label component.
Take note of the name HorizontalArrangement1 ,, Now, select Button2 and change its Text property to Bird, Width to Fill parent, Text/Alignment to Center, and have Font/Bold property checked.
Lastly, select Button3 and change its Text property to Penguin, Width to Fill parent, Text/Alignment to Center, and have Font/Bold property checked. , For us to be able 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. , For us to do that, select Screen1 on Components pane and change the Title property under Properties pane to Wild LifeShow. , For our app, we used the following image and sound files which you should download to your computer.
Elephant.png Bird.png Penguin.png Elephant.wav Bird.wav Penguin.wav ,,, 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 Open the Blocks Editor button. , Locate Button1 and click on it.
Now we can see all the events and different properties of Button1.
Select and drag the Button1.Click event block on the Blocks Editor space as shown below. , This will show the events and properties of Image1.
Get the Image1.Picture and place it inside the Button1.click block.
Once you place it, you should hear a click sound which means the blocks are properly connected to each other. , To do that, click on Built-In tab, then locate and click Text block.
Drag the text block over to the right and connect it to Image1.Picture block. , Click on text of 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. , Connect a text block to Player1.Source block and change the text of text block to Elephant.wav. ,, For Button2, use Bird and for Button3, use Penguin.
Your blocks should look like the snapshot below. , Now it's time to see our app in action.
If your Android device/phone is connected to your computer, you can click on Package for Phone on Designer/Viewer window in your web browser and then choose Download to Connected Phone.
This will install the app on your phone.
If you don't have a phone connected, you can launch an emulator from the Blocks Editor window.
Click on New emulator and it will launch an emulator for you.
After the emulator is launched, click on Connect to Device... button.
You should see the emulator that you just launched.
Click on that and it will load the app on the emulator. -
Step 3: Enter the name of our app in the Project name box.
-
Step 4: Now drag a Vertical Arrangement component on Screen1 window where we will display our images later.
-
Step 5: All the components you drag to Screen1 can be seen under Components pane.
-
Step 6: Drag an Image component and place it inside VerticalArrangement1 component that we placed earlier on Screen1.
-
Step 7: Get a Label component and place it below VerticalArrangement1.
-
Step 8: We need to change some properties of the Label component.
-
Step 9: Now we need a Horizontal/Arrangement component where we will place our three buttons.
-
Step 10: Inside the HorizontalArrangement1
-
Step 11: place three Buttons one after another.
-
Step 12: Now change the properties of the buttons as follows: Select Button1 and change its Text property to Elephant
-
Step 13: Width to Fill parent
-
Step 14: Text/Alignment to Center
-
Step 15: and have Font/Bold property checked.
-
Step 16: We also need to play sound.
-
Step 17: One more tiny thing we should do is change the Title of Screen1 to Wild LifeShow.
-
Step 18: Let's get our picture and sound files added.
-
Step 19: Under Media pane
-
Step 20: click Add and upload the image and sound files one by one.
-
Step 21: You should see now the following under your Media pane.
-
Step 22: Now that we are done with the design portion of our app
-
Step 23: we need to implement the interactions among the components we have.
-
Step 24: On the Blocks Editor window
-
Step 25: click on My Blocks which will display all the components we placed on our app through Designer/Viewer window.
-
Step 26: Now under My Blocks
-
Step 27: locate and click Image1.
-
Step 28: We need to set the source of the picture to our image Elephant.png.
-
Step 29: The text block indicates which picture to display.
-
Step 30: Now locate the Player1 and place the Player1.Source block below Image1.Picture block.
-
Step 31: Grab and place Player1.Start block below Player1.Source block.
-
Step 32: Do the same thing for Button2 and Button3.
-
Step 33: You are done!
Detailed Guide
Click the New button to create our Wild LifeShow app.
This will make a new dialog box to open.
Press OK. , This will create a vertical arrangement component on our Screen1.
The name of the component will be automatically VerticalArrangement1. , We need to change some properties of the 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. , Note that the name of Image component is Image1 , Take note of the name of our Label component which is automatically set to Label1. , Select Label1 under Components pane and change the following- Check the Font/Bold property.
In the Text property, type Tap On A Button To Hear Them.
You can type anything you like.
Change the Text Alignment to center.
Set Text/Color to Blue.
Change the Width to Fill parent. , Get a Horizontal/Arrangement component and place it below our Label component.
Take note of the name HorizontalArrangement1 ,, Now, select Button2 and change its Text property to Bird, Width to Fill parent, Text/Alignment to Center, and have Font/Bold property checked.
Lastly, select Button3 and change its Text property to Penguin, Width to Fill parent, Text/Alignment to Center, and have Font/Bold property checked. , For us to be able 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. , For us to do that, select Screen1 on Components pane and change the Title property under Properties pane to Wild LifeShow. , For our app, we used the following image and sound files which you should download to your computer.
Elephant.png Bird.png Penguin.png Elephant.wav Bird.wav Penguin.wav ,,, 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 Open the Blocks Editor button. , Locate Button1 and click on it.
Now we can see all the events and different properties of Button1.
Select and drag the Button1.Click event block on the Blocks Editor space as shown below. , This will show the events and properties of Image1.
Get the Image1.Picture and place it inside the Button1.click block.
Once you place it, you should hear a click sound which means the blocks are properly connected to each other. , To do that, click on Built-In tab, then locate and click Text block.
Drag the text block over to the right and connect it to Image1.Picture block. , Click on text of 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. , Connect a text block to Player1.Source block and change the text of text block to Elephant.wav. ,, For Button2, use Bird and for Button3, use Penguin.
Your blocks should look like the snapshot below. , Now it's time to see our app in action.
If your Android device/phone is connected to your computer, you can click on Package for Phone on Designer/Viewer window in your web browser and then choose Download to Connected Phone.
This will install the app on your phone.
If you don't have a phone connected, you can launch an emulator from the Blocks Editor window.
Click on New emulator and it will launch an emulator for you.
After the emulator is launched, click on Connect to Device... button.
You should see the emulator that you just launched.
Click on that and it will load the app on the emulator.
About the Author
Andrea Brown
Enthusiastic about teaching home improvement techniques through clear, step-by-step guides.
Rate This Guide
How helpful was this guide? Click to rate: