Creating Color Selector Using ListPicker Element in AppInventor2 – Not a good idea

The Plan

I was helping a friend with getting started with using AppInventor and he wanted to make a color selection function.  He came up with the idea of using a ListPicker but didn’t know how to use the ListPicker so I thought I would help him out and post a quick demo on how to do it.  It seemed like a good idea but after trying to implement this, there is a major drawback.

The Attempt

This is just a simple example so I am going to keep this simple.  All I am going to include is a sample ListPicker element.  Once the user selects a color, the ListPicker button will change to the color the user selected.

ListPickerExampleLayout

This first step in the code Blocks is to set the ListPicker elements to a list of colors.  This can be done during the screen initialization.  In the Blocks screen..

  1. click on Screen1 and drag out the “when Screen1.Initialize” block.
  2. click on the ListPicker1 and drag out the “set ListPicker1.Elements to” block out
  3. click on the “Lists” (blue box) and drag out a “make a list” block
  4. click on the “Colors” (gray box) and add the colors you would like to be included in the List block.
  5. You can add more color items to the list block by clicking on the darker blue box in the upper left of the list block

Here is a snapshot with some notes…

ListPickerExampleScreenInitBlock

Now to add the functionality to change the color of the ListPicker button, click on the ListPicker and add the blocks in this diagram…

ListPickerExampleAfterSelect

This will change the ListPicker button color to what was selected after a user selects a color….

The Problem

The problem with this approach is that the colors come up as a color code number instead of a list of colors to select.  Here is a screen shot of my phone running the above project….

IMG_20150114_131607

As you can see, this is not really useful to a human.  I tried digging around to see if there was a simple solution but couldn’t find one.  Unfortunately what seemed to be a good simple solution turned out to be a dead end.  I will attempt to create a better but unfortunately more complicated solution in my next post.

Advertisements

One thought on “Creating Color Selector Using ListPicker Element in AppInventor2 – Not a good idea

  1. Pingback: Simple Color Selector in AppInventor – Better Solution | PetesTechProjects

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