Using the Spinner Control for Selecting Items

When your app needs the user to select an item from a list of choices, use the Spinner control.

Suppose we have a really simple restaurant menu that provides a choice of tacos and drinks. Our customer may select a Chicken, Beef or Vegan taco from an interface that looks like this:

Spinner-Screen

Touching the Chicken Taco item on the screen displays a set of options – select a desired item from the list:

SpinnerScreenshotThe Designer View

The item labeled “add items…” is a Spinner control, dragged out of the Palette. There are two Spinner controls in this user interface:

SpinnerMain

 

Select the first Spinner control and then go to the Properties for that control. In the ElementsFromString item, enter Chicken taco, beef taco, vegan taco. These items, separated by commas, become the elements of the Spinner list.

 

Spinner1Properties

 

Do the same for the drinks on the menu:

 

Spinner2Properties

Blocks Code

The code is so simple it hardly needs an explanation!  When the user selects an item, the AfterSelecting event occurs. The selected item is obtained from the local variable selection:

SpinnerBlocks

Key Features Shown

  • Spinner controls are used to select from a list of items
  • Add a spinner control in the Designer and set an initial list of items in Properties
  • Obtain the selected item with an event handler for the Spinner’s AfterSelecting event.

Please Share on Social Media

Please click on the buttons below this post to share with your friends on Facebook or other social media.

If you are not already following this blog, click on the following links to like on Facebook, add to your Google+ circles or follow on Twitter or in your RSS news reader. Thank you for visiting!

Advertisements

8 thoughts on “Using the Spinner Control for Selecting Items

  1. Hello,

    I am wondering if you could share a tip in making a choice’s list. For example:
    Spinner1 contains 5 strings (string1, string2, string3, string4, string5)
    and depending on the string selected by the user, the Spinner2 will display accordingly the strings related to Spinner1.string#

    User selects string2 in Spinner1 and based on that in Spinner2 user will see and choose stringA, stringB, stringC that belong to string2.

    Thank you
    Drini

    Like

    • Drini,
      If I understand the question, yes you can do this!

      In the Spinner1.AfterSelecting event handler, you can add code that does something like this:

      if Spinner1.Selection equals option 1 then

      set Spinner2.Elements to make a list “String A”, “String B”, “String C”

      else
      if Spinner1.Selection equals option 2 then
      set Spinner2.Elements to make a list “Option 2 A”, “Option 2 B”, “Option 2 C”

      If there are more items in the first selection list, then add each possible selection to the if-then-else statements for all possible values.

      Does this sound right to you? Let me know!

      Ed

      Like

  2. Dear Ed,
    Thank you for the tip. It sounded right and with trials I was able to make it work with Spinners. Then I tried successfully with ListPickers by using ElementsFromString instead of Element > Make a List.
    Now when user selects a specific item from ListPicker1, the Listpicker2 gets populated accordingly and then Listpicker2 is called for showing the elements. It works great.

    Thank you again and wishing you a great week ahead.
    Cheers

    Like

  3. Dear Sir
    I am developing my app. I dont have much programming knowledge.
    Any how i am managing with ap inventor.

    I have a web Radio, In that i have 6 Channels, Each channel with 4 sound qualities.

    I have used one spinner for Channel selection, another spinner for sound quality selection.

    They both are working.

    But it is taking a delay not less than 10 to 15 seconds to switch between spinners and lists.

    I will give you the link of my app hosted in Google playsore. Please tell me how can i avoid this delay in spinners and lists.

    Thanks in advance

    Here is the link

    https://play.google.com/store/apps/details?id=appinventor.ai_indianplans.SUN_City_Radio_2

    SA Rahim

    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