What You're Building
This is a two-part tutorial introduces the
component for launching arbitrary Android Apps
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 Activity Starter component for launching Android apps from your app.
The ListPicker component for allowing the user to choose from a list of
Set up the Components
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|
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".
Setting the properties of ActivityStarter
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.
Create a list of destinations
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||
use to add the items to the list
|text ("Tour Eiffel")||Text||the first destination|
|text ("Musee du Louvre")||Text||the second destination|
("Cathedrale Notre Dame")
property before sending
The blocks will look like this:
Add behaviors to the components
MapTour has two behaviors:
1. When the app begins, the app loads the destinations into the ListPicker component so the user can choose.
2. When the user chooses a destination from the ListPicker , the Maps application is launched to show a map of that destination. For Part I, you'll just open Maps and tell it to invoke a search for the chosen destination
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:
How the Blocks Work
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.
Launching Maps with a search for the destination
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||
tells Maps which map to open on
|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:
How the Blocks Work
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.
For help with the Maps application parameters, see this document from mapki.com
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).
Map Tour, Final Program
Here are some of the ideas covered in this tutorial:
component lets the user choose
from a list of items.
property holds the list, the
property holds the selected item, and the
event is triggered when the user chooses.
- The ActivityStarter component allows your app to launch other apps. This tutorial demonstrated its use with the Maps application, but you can launch a browser or any other Android app as well-- even another one of your own.
- See the reference page on Activity Starter for more details.
Learn more sophisticated uses of the
MapTour Part 2
Scan the Sample App to your Phone
Scan the following barcode onto your phone to install and run the sample app.
Download Source CodeIf 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 .
Google is grateful to Professor David Wolber , CS Professor at The University of San Francisco, for developing this tutorial.