Using ListPicker for displaying and selecting from on screen lists

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.)

Screenshot_2014-10-10-12-03-13

 

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:

Screenshot_2014-10-10-12-03-24

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”:

LP-Designer

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:

LP-Properties

 

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:

LP-Properties2

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:

LP-EventBlockListPicker 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:

LP-BlocksAddingThe 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”.

Advertisements

50 thoughts on “Using ListPicker for displaying and selecting from on screen lists

    • Do you mean you cannot buy it from Amazon? It is also available from Apple iBooks, Google Play Books, Kobo and Barnes and Noble NookBooks.

      (Sorry for the delay in responding – I receive an email with each comment posted, but they were getting caught in my spam filter. I hope that is fixed now.)

      Like

  1. Thx for explaining the listpicker.
    But i have one question, if i have a listpicker with some words in my application and some people have installed the app. So can i refresh the list anyhow that the people who has already installed the application instantly get the new words in the list which i have changed? Is it possible and if yes, how?

    Like

    • Yes, it is possible, although may be not easy. There are at least two parts to making this work. The first part is to update the words in the ListPicker by using the set ListPicker.elements or set ListPicker.ElementsFromString blocks. In the set elements block, set this to a list of values; in the ElementsFromString, set this to a text string such as “A,B,C,C”.

      The second part, and the harder part, is how do you get the updated items to the installed apps? To do that in a transparent (to the user way), you would probably need to use a remote web-based databased like TinyWebDB or Fusion Tables. Eventually I intend to write a tutorial on those but for now there is not much out there. By using a remote web-based database, you could have your app read the values from a web database. Then, you could periodically update the web-based database with new values.

      May be there is another way to do this but its not coming immediately to mind.

      Ed

      Like

  2. Thanks for your answers!
    Maybe u can a tutorial for me? I am a beginner and i think its too difficult for me but i’ll try it.
    Thanks!

    Like

  3. Hola,no encuentro como hacer para que al entrar en la screen salga una lista y que cada vez que se entre en la screen salgan los datos de la lista desordenados,como podria hacerlo?

    Like

  4. I noticed on the picture above when you added the listpicker1 and label1, but there is one more item on there that I can’t find on the app inventor site. I’m looking for the “lblTheSelection” where do I find it?

    Like

    • lblTheSelection would be an ordinary text label on the screen. I’ll need to pull up that app, later, to find the specific item, as I need to leave my office in just a moment. But you should be able to create a text label in the Designer, for the screen, and rename it to lblTheSelection, to make that work. Ed

      Like

  5. hallo please hulp me.

    i want do on screen 1 links open with screen 2 how can i do this?
    website open with another screen.

    We can only make 10 screen and i have on screen1 15 links and i want open this links on screen2 but i dont o how can i do it?

    Can you make 1 example foto pls ?

    Thank You Very much
    Anita De boer

    Like

    • Anita,
      If I understand your question – I think you want to use the “open another screen” blocks that are found in the Control components in the Blocks editor.

      From here, a screen can open another screen by specifying the exact name of the other screen to open (upper and lower case letters in the name must match exactly).

      Data can be passed from one screen to another using the “open another screen with start value” block and passing individual values or a list of values.

      Another way to pass data from one screen to another is to store the data in TinyDB where the data can then be accessed directly from any screens.

      I am not sure if this answers your question but hopefully it provides some information. Examples of handling multiple screens are also in volume 1 of my ebook. Much more information (like 300 pages) for using TinyDB, TinyWebDB, Fusion Tables and and files to store data is in volume 3.

      Ed

      Like

  6. I have a question such as with the apple and bananas buttons things in the list picker, am i able to set it up as if i were to click on one of those options in list picker it would set an image of what ever you selected on a canvas?

    Like

  7. I want to include names of the pictures in the list, so when I click the item the proper image becomes visible. I tried many combinations, but i can’t make it work. Please help me.

    Like

    • Use the last example to assign the values to the ListPicker – “set ListPicker.Elements to” that you have read from a database table. You can fill the Elements list with any values you want to use before you display the ListPicker on screen. However, once the list is visible, you cannot then change the values if that is what you are trying to do?

      Ed

      Like

  8. Is there a way to get it pick from a list of installed apps? I don’t want it to run the apps [yet], I just want it to pick one. Or is there a better alternative?

    Like

      • Thank you for your outstanding and helpful tutorials. Would you be kind to make a variation of the ListPicker tutorial that selects from a LIST OF LISTS? AI “How to use the ListPicker in a Quiz with App Inventor 2” video, and the Chapter 19 tutorial, could have done more with this subject. Thank you.

        Like

      • Good ideas – yes, ListPicker – as well as lists – can be challenging.

        There are two ListPicker related tutorials on the web site – you can find them here
        http://appinventor.pevest.com/?s=listpicker

        But I will look into doing more. I hope to resume writing tutorials for the web site in about another week or two – I am busy with some other projects at the moment!

        Ed

        Like

  9. is there a way to have a single selection change multiple things like school schedule so say there is two options ( green,white ) and depending on which one the user picks will change which times are displayed in labels 10 labels green would be the first 4 periods+ one of the 3 lunches and the times those start and end i need help this is quite complex

    Like

    • In terms of what I think you are trying to do, yes, that should be possible. But I’m not sure I fully understand what you are trying to do, in detail. Your event handler can make changes to the properties of multiple user interface components. When I select something, I can write an event handler for that selection, and then reference each of the modified components – labels, buttons, text boxes and so on – and change their properties including colors, text values and so on.

      I was on vacation last week for a few days and did not have Internet (or even cell phone) access.

      Ed

      Like

  10. Hello there,
    I´m trying to let the user picks multiple choices out of the Listpicker…
    I can´t do it… Can you please give me a hint?

    Thank you

    Like

    • I do not see how ListPicker can support multiple item selection because:


      Selection
      The selected item. When directly changed by the programmer, the SelectionIndex property is also changed to the first item in the ListPicker with the given value. If the value does not appear, SelectionIndex will be set to 0.

      SelectionIndex
      The index of the currently selected item, starting at 1. If no item is selected, the value will be 0. If an attempt is made to set this to a number less than 1 or greater than the number of items in the ListPicker, SelectionIndex will be set to 0, and Selection will be set to the empty text.

      As you can see from the ListPicker documentation, the ListPicker only returns an individual Selection item. There is not a way to return multiple selected items from ListPicker.

      Ed

      Like

    • Tony, Try selecting the “Screen1” or the screen name of your app. Then check the “Scrollable” Property for the screen (or programmatically set Screen1.Scrollable to True). I have not tried this but I suspect it may solve the problem for your as it makes the screen scrollable past the bottom.

      Ed

      Like

    • You could create a list with strings “January”, “February”, “March” and so on.
      And then you could create a list containing images.

      When you select a month (say element #3) from the month names, you’d select the image from the image list (element #3).

      There are some tricks that can be done too, but can’t really explain in a comment. If you have an image component, and in the Blocks editor, you click on the image component, you’ll see a pop up of all the methods, properties, and so on, for the image. At the very bottom of the list, you’ll see a small block that says “image1”. This is essentially a block that represents the entire image object. You can store these in a list.

      Scroll down in the Blocks list, at left, and see “Any component”. In there, you’ll find an Any image component. You can then plug in the “image” component you’ve stored in the list, into the appropriate plug in port on the blocks shown for “Any Image”.

      This is hard to explain in text. I do want to write up a tutorial on this idea though.

      Ed

      Like

  11. Ive learnt many thinks , great tutorial!
    and i have question. Is it possible to use the items from arbitrary and assign them to a given buttons respectively. BTW the a items will be given by the user. 6 items need and 6buttons given

    Like

    • Aj, If I understand the question – the user will enter 6 items in a text box? And you would like to assign those 6 items to the ListPicker?

      If that is the idea, yes, this can be done. You would need to assign the values to the .Elements property of the ListPicker. If the user typed on screen,

      X,Y,Z,A,B,C

      you can split that apart and assign as a list to the Elements tag. I might add something to this later … having sporadic Internet connection and I have to leave the computer now, too.

      Ed

      Like

  12. I am trying to make an app where I have a listpicker that lists the location of popular tourist stops. What I am trying to do is when the user clicks on a list item, it gives them more information on the destination.

    However, to do this, I have to define the selection, and I don’t know how to do that. I have tried to use the equals sign from the logic group of blocks to make an if else statement like

    if ListPicker1 Selection = “Geissler’s”
    then
    set image1 visible

    However, this is not working. So, how would I make it so whatever the user picks makes a specific set of components visible?

    Like

    • Nelle, I’ve seen your question – just wanted you to know that its late and I ran out of time to look into this. Perhaps I can look into this on Friday – if anyone else has comments, please jump in!

      Ed

      Like

    • Couple of thoughts on this
      1. Your code is appropriate as .Selection should contain the text of the selected item. As an alternative, you could also refer to .SelectionIndex which is the number of the item that was selected (first one is 1, second one is 2, and so on).

      2. The second thought is to ask what happens in the code after you set the image to visible? Android (and App Inventor) has a quirk that can create frustration where you know you’ve update something on the screen but it does not appear. Basically, when you update a text field or an image filed on the screen within you code, this is sort of a suggestion to App Inventor to update this part of the screen. BUT – it doesn’t do it instantly. Presumably this code is located in the ListPicker.AfterPicking event handler. The screen will not be updated until the .AfterPicking event reaches the end (finishes and exits).

      I ran into this problem where I had an event handler that included a for each loop from 1 to 6. And “event handler” is anything such as .AfterPicking or a Button’s .Click event.

      During each iteration through the loop, it was supposed to write “Item #n completed” but all I ever saw as “Item #6 completed” even though I knew there was a delay between each iteration of the loop. This occurred because the updates I was sending to the screen are never actually copied to the screen until the end of the event handler. So we only saw the last update.

      The solution is to only do one update in an event handler, let it finish, and then do the next update. Unfortunately, this is not easy to program. In my case, I moved the code inside a Clock Timer event handler, where exactly one update to the screen was made in each timer event. How do this is a bit complex and I should write a full tutorial on how to do this.

      Ed

      Like

  13. Hi. I would like to know how do I update a listpicker with data from tninyweb. I have the app on 2 phones. When I create a user I want the other user to appear appear in the listpicker. Any ideas?

    Like

    • I assume you are exchanging data between the two users – on different phones – using TinyWebDB?

      If that is the case, then you can assign values to your ListPicker elements string. You could write
      ListPicker.ElementsFromString gets “A,B,C,D,E” to add the 5 values to the string.
      Or you can use Make a list, like
      ListPicker.Elements = make a list “A”, “B”, “C”, “D”, “E” and so on (substitute App Inventor blocks for the pseudo code I wrote here).

      Ed

      Like

      • Unfortunately, no, you cannot do a multi-selection in the ListPicker list. ListPicker is only able to return a single selection value, or the index number of the item selected.

        Ed

        Like

  14. I want to help
    When the customer does not choose anything
    The application closes and gives an error message
    How can I avoid that problem

    (The index of the currently selected item, starting at 1. If no item is selected, the value will be 0. If an attempt is made to set this to a number less than 1 or greater than the number of items in the ListPicker, SelectionIndex will be set to 0, and Selection will be set to the empty text.)

    Like

  15. Hi, my app show a list of cd from a webdatabase, and if the CD is not in the listpicker it send you to another screen in order to add the new CD in the database. i would like to know if it’s possible to do an action if nothing is select in the listpicker. I tried with if selction = 0 then open an other screen or if selection = ” ” then open an other screen but it’s not working. For the moment i add to the list “CD not found” but it’s not really simple for a user. Any propostions ?

    Like

      • Sorry about that – hours after I got back, I got really sick. Slept 12 1/2 hours with the nasty cold lingering for days.

        I think the selection you have is perhaps the only way to handle this in ListPicker. That is, adding an element that contains “Nothing found” or similar text and having the user select that.

        The only way to exit ListPicker without selecting anything is to press the Android OS “back” arrow, which is a little triangle shaped item on my Nexus 5, or a looping return arrow on my Samsung.

        Within Screen1, you can detect the backpressed with the Screen1.Backpressed event handler. However, this only detects the key being pressed when Screen1 is on the display – not the ListPicker. There does not seem to be a way to detect the back press function when using ListPicker.

        Ed

        Like

    • Mehmet,
      You can change the item text and background colors, but I think this changes the colors for all items in the list. I do not think you can set different colors for each item in the list.

      To change colors, set the properties ItemBackgroundColor and ItemTextColor using the set block that appears when you click on your ListPicker component in the Blocks list at the left hand side of the Blocks Editor view.

      Ed

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s