What is ListPicker?
ListPicker is a user interface component that makes it easy to display a list of items and have the user make a selection from the list. For example, let’s say we’d like to display six things on the screen and then have the user select an item from the list.
For simplicity, here is a sample ListPicker list showing six items labeled “A”, “B”, “C”, “D”, “E” and “F”. Those items are arbitrary – your list could contain “Oranges”, “Bananas”, “Apples”, “Grapes” or whatever other text descriptions you would like to have. (The default color is white text on black but the color properties, as well as the text size, may be changed in the App Inventor Designer.)
When this screen is displayed the user may touch an item in the list to select it.
Use ListPicker whenever you have a set of items from which the user is expected to make a selection. Example applications could include selecting a product from a list of inventory items, select a food item from a menu, select a name from a display of names and addresses and many more.
Learning how to use ListPicker is helpful for new App Inventor programmers as many online tutorials and example programs use ListPicker – but without explaining what it is or how to use it! Becoming familiar with ListPicker will make those other tutorials easier to understand!
Example
When an item is selected an event is created, and your event handler can then identify which item was selected in this list. To illustrate, let’s start with a simple app that displays a list of items when the “Click me to display a short list” is pressed:
ListPicker does all the hard work for us – display the items on screen (as shown in the previous screen snap shot) and processing the selected element.
In the example above, “C” was selected.
How to Build the ListPicker Demonstration Application
Step 1 is to drag a ListPicker component from the Palette to the Viewer. Rename the control if you wish and change the text of the ListPicker control button to something useful 🙂 Here is the app after dragging the ListPicker component and changing the text (in the ListPicker properties) to “Click me to display a short list”:
Step 2 is to place some items into the list. We do that by typing a comma separated list in the ElementsFromString property of ListPicker, as shown here:
We have now added six items – A, B, C, D, E and F. We could enter longer text descriptions if we wished – for example “Oranges, Bananas,Apples” and so on:
Step 3 is to add an event handler for the list to process the list selection – this turns out to be really super hard – not! It is actually super easy! Click on the ListPicker component in the Blocks Editor and then drag the .AfterPicking event into your program:
ListPicker handles all the details of the on screen selection. All that is needed is to fetch the item that was selected, store that in a variable, or, as in this example, display the selection in a label field on the app’s screen.
That’s it for the basic operation of the ListPicker. If you have many elements – too many to fit on one screen – the list automatically handles scrolling. Just use your finger to drag up or down the list. You can also change ListPicker properties such as the color of the list and more.
Of course there are many ListPicker features, but this is intended as a brief introduction.
But one feature we wish to mention is that you can add items to the list to display from within your program by putting your items in a list and assigning them as shown here:
The ListPicker1.Elements property contains a programmatic list of items. If you are not familiar with lists, please see Chapter 8 “Introduction to Lists” in my e-book “Guide to App Inventor 2:Tutorial – The fast and easy way to create Android apps”.
