App Inventor Classic • App Inventor Classic • FOR APP INVENTOR 2 CLICK HERE• App Inventor Classic • App Inventor Classic
This information pertains to App Inventor 1 (Classic). For tutorials about App Inventor 2, go to the App Inventor 2 Tutorials.
This is a two-part tutorial introduces the ActivityStarter component for launching arbitrary Android Apps and the ListPicker component for allowing a user to choose from a list of items. You'll build MapTour, an app for visiting French vacation destinations with a single click. Users of your app will be able to visit the Eiffel Tower, the Louvre, and Notre Dame in quick succession.
This tutorial assumes you are familiar with the basics of App Inventor-- using the Component Designer to build a user interface, and using the Blocks Editor to specify event-handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.
Once you complete the first part of this tutorial, try part 2.
Connect to the App Inventor web site and start a new project. Name it "MapTour", and also set the screen's Title to "MapTour". Open the Blocks Editor and connect to the phone.
You'll design the app so that a list of destinations appears. When the user chooses one, the Google Maps app is launched to display a map of the destination.
The tutorial introduces the following App Inventor concepts:
The user interface for MapTour is simple: you'll have a single ListPicker component and an ActivityStarter (non-visible) component. The design view should look like this when you're done:
The components listed below were used to create this designer window. Drag each component from the Palette into the Viewer and name it as specified:
|Component Type||Palette Group||What you'll name it||Purpose of Component|
|Image||Basic||Image1||Show a static image of Paris map on screen|
|ListPicker||Basic||ListPicker1||Display the list of destinations|
|ActivityStarter||other stuff||ActivityStarter1||Launches the maps app when a destination is chosen|
Download the file parismap.png onto your computer, then choose Add in the Media section to load it into your project. For it to appear, you'll also need to set this as the Picture property of Image1.
The ListPicker component has an associated button-- when the user clicks it, the choices are listed. Set the text of that button by setting the Text property of ListPicker1 to "Choose Destination".
ActivityStarter is a component that lets you launch any Android app-- the browser, Maps, even another one of your own apps. When another app is launched from your app, the user can click the back button to get back to your app. You'll build MapTour so that the Maps application is launched to show particular maps based on the user's choice. The user can then hit the back button to return to your app and choose a different destination.
ActivityStarter is a relatively low-level component in that you'll need to set some properties of the component with information familiar to a Java Android SDK programmer, but foreign to the rest of the 99.999% people in the world. Not to worry, however. By copying the sample protocol information provided here, you can easily learn how to launch apps like Maps from the apps you are creating.
So, to set-up the ActivityStarter to launch the Maps application, set the following ActivityStarter properties in the Component Designer:
With these values set, you'll be able to launch the Maps application. In the Blocks Editor, you'll set one more property, DataUri , which will allow you to launch Maps with a particular map being displayed. This property must be set in the Blocks Editor because it will change based on whether the user chooses to visit the Louvre, the Eiffel Tower, or the Notre Dame.
Open the blocks editor and create a variable with the list of destinations for the MapTour. You'll need the following blocks:
|def variable ("Destinations")||Definitions||create a list of the destinations|
|make a list||Lists||use to add the items to the list|
|text ("Tour Eiffel")||Text||the first destination|
|text ("Musee du Louvre")||Text||the second destination|
|text ("Cathedrale Notre Dame")||Text||the third destination|
The blocks will look like this:
MapTour has two behaviors:
The ListPicker component displays a list of items when the user clicks a button. ListPicker has a property Elements . If you set Elements to a list, the items in the list will appear in the ListPicker . For this app, you want to set the ListPicker' s Elements property to the destinations list you just created. Because you want this to happen when the app begins, you'll define this behavior in the Screen1.Initialize event. You'll need the following blocks:
|Screen1.Initialize||Screen1||this event is triggered when the app starts|
|set ListPicker1.Elements to||ListPicker1||set this property to the list you want to appear|
|global destinations||My Definitions||the list of destinations|
The blocks should look like this:
Screen1.Initialize is triggered when the app begins. The event-handler just sets the Elements property of ListPicker so that the three destinations will appear.
Test this behavior. On the phone, click the button labeled "Choose Destination". The list picker should appear with the three items.
Next, you'll program the behavior that should occur when the user chooses one of the destinations-- the ActivityStarter should launch Maps and search for the selected destination.
When the user chooses from the ListPicker component, the ListPicker.AfterPicking event is triggered. In the event-handler for AfterPicking you need to set the DataUri of the ActivityStarter component so it knows which map to open, then you need to launch the app using StartActivity.
You'll need the following blocks:
|ListPicker1.AfterPicking||ListPicker1||this event is triggered when the user chooses from ListPicker|
|set ActivityStarter1.DataUri to||ActivityStarter1||the DataUri tells Maps which map to open on launch|
|make text||Text||build the DataUri from two pieces of text|
|text ("geo:0,0?q=")||Text||the first part of the DataUri expected by Maps|
|ListPicker1.Selection||ListPicker1||the item the user chose|
The blocks should look like this:
When the user chooses from the ListPicker, the AfterPicking event is triggered. Whatever item was chosen is in the ListPicker1.Selection property. So if the user chose "Musee du Louvre", that value is in ListPicker1 's Selection property.
In the Component Designer, you already setup the ActivityStarter componenent with properties so that it will launch the Maps application. Here, you just need to tell it which map to show. The DataUri property of ActivityStarter allows you to specify this using a special protocol.
In this case, you want to show the map that would appear if you typed in "Musee du Louvre" in the search box of the Maps application. To do this, the DataUri should be set to:
geo:0,0?q='Musee du Louvre'
The make a text block creates a text exactly like this, only the text after "q=" will be the choice made by the user.
Once the DataUri is set, ActivityStarter1.StartActivity launches the Maps app.
Test this behavior. Restart the app and click the "Choose Destinations" button again. When you choose one of the destinations, does a map of that destination appear? Can you click the back button to return to your app to choose again (you may have to click a couple of times to leave the Maps app).
Here are some of the ideas covered in this tutorial:
Scan the following barcode onto your phone to install and run the sample app.
If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, go to the My Projects page, and choose More Actions | Upload Source.
MIT and Google are grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial. Done with MapTour? Return to the other tutorials here.