App Inventor sample project: List Pickers

This sample project using Google's App Inventor demonstrates how to use ListPickers (data lists). Some of the items I'll highlight include:

• Implementing ListPickers
• Introduce ActivityStarter
• Creating and working with list data objects
• Hooking into Google Maps app and Browser app

Let's get started...


1. Click on My Projects, then create a new project. I called mine ConferenceApp because I'm going to create an app that displays keynote speakers and a conference and shows their speaking locations on the map.



2. You will now see the layout screen with Palette, Viewer, Components, Media and Properties boxes. Adding components is easy by dragging objects from the Palette box onto the Viewer.



3. Drag 3 HorizontalArrangement objects from the Palette onto the Viewer. Set all widths to "Fill Parent." The height of the first should by "Automatic" and the height of the other two below should be "20px."



4. Add the logo. Drag (2) VerticalArrangement objects inside the top HorizontalArrangement. Set the widths of each of these to "Fill Parent." Then, drag an image in between the (2) VerticalArrangements. Including the VerticalArrangements on either side of the image allows us to center the logo.



5. Add the first ListPicker. Below the second HorizontalArrangement, drag in a ListPicker object and name it keynoteListPicker. Set the width to "Fill Parent" and text to "View Keynote Speakers."



6. Add the second ListPicker. Below the third HorizontalArrangement, drag in a ListPicker object and name it placeListPicker. Set the width to "Fill Parent" and text to "View Locations."



7. Before we can move on to the Blocks Editor, we must add two additional non-visible components. These components will launch the built-in Google Maps application and Browser based on the input we send to them. In the left-column, expand "Other stuff" and drag two ActivityStarter objects onto your layout. (Note: they will be placed below the screen under the Non-visible components text.) Rename one to MapActivityStarter and the other to BrowserActivityStarter.



8. Set MapActivityStarter properties. In the right-column, Properties, set the following properties, while leaving all other blank:

• Action: android.intent.action.VIEW
• ActivityPackage: com.google.android.apps.maps
• ActivityClass: com.google.android.maps.MapsActivity

9. Set BrowserActivityStarter properties. In the right-column, Properties, set the following properties, while leaving all other blank:

• Action: android.intent.action.VIEW

10. At this point, our basic layout is complete. Your screen should look like this:




11. Now connect your Android phone via usb. On your phone, go to Settings-->Applications-->Development. Enable USB debugging and Stay awake.



12. On the layout screen click the button to Open the Blocks Editor. This will open a Java applet that contains all of the logic blocks/action handlers and interfaces with your phone.



13. First, we will create two list variables that will correspond to the keynoteListPicker: speakerNameList and speakerURLList. When a user selects the keynote speaker's name in the list, the app will launch the Browser to an informational page. To get variables in Blocks Editor, go to Built-In, then Definition and drag "def variable" onto the screen. Select the red text box attached to each variable and delete as these variables will be of type list and not text. To set each of these to type list, go to Built-In, Lists, and attach (by dragging) the make a list block to each of the variables. Now, to add data to our lists, we add text fields from Built-In, Text. (Drag and drop the first box in the list labeled "text.") Once in place, click on the text block to change the value. Notice that after you add one text block to the yellow make a list block another open puzzle piece appears below indicating that you can add another item. Continue adding text blocks to each variable list to match the image below.




14. Next, create two more list variables that correspond to placeListPicker: placeNameList and placeAddressList. When a user selects the place name from the list, the app will launch the Google Maps app to the specified address. Follow the same approach in the previous step, using the data in the image below.




15. Once all of our data is created and added to the lists, we need to inform each ListPicker which data sets they should use. To do that, go to My Blocks-->Screen1 and drag when Screen1.Initialize do onto the palette. This is called when the app starts. Inside of this block, place the set keynoteListPicker.Elements to block, which is found under My Blocks-->keynoteListPicker. Add the speakerNameList variable to the open puzzle piece, which is found under My Blocks-->My Definitions.
Then do the same for placeListPicker and placeNameList as shown below.




16. At this point, our app is setup so that it will run and our data lists will be displayed when the user presses the ListPicker buttons on the main screen. The only piece left is to tell the app what to do when the user chooses one of the items in the list.



17. Starting with the keynoteListPicker, drag when keynoteListPicker.AfterPicking do onto the screen. Since we want this to launch the Browser, we need to first set the URL to send--the one that corresponds to the chosen item in the list. We do that by using My Blocks-->BrowserActivityStarter-->set BrowserActivityStarter.DataUri to. The index, or place in the list, that the user chose is determined by using the position in list block, which is then fed into the index opening of a select list item block of our spearkersURLList list. All of this will set the URL of the browser. Now we just have to launch the browser with BrowserActivityStarter.StartActivity. Blocks shown below.




18. We need to do the same thing to launch the maps. The only difference here, is that we need to prepend some text onto the address text that we send to the map. This is accomplished with the make text block by setting the first text block to "geo:0,0?q=" and setting the second text block in the same was a above (just using the other two lists). Shown below.


So there's the code (layout and blocks) required for building a ListPicker app that implements Browser and Google Maps launching capabilities.


Download this application onto your phone by scanning this code: