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.
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.
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..
- click on Screen1 and drag out the “when Screen1.Initialize” block.
- click on the ListPicker1 and drag out the “set ListPicker1.Elements to” block out
- click on the “Lists” (blue box) and drag out a “make a list” block
- click on the “Colors” (gray box) and add the colors you would like to be included in the List block.
- 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…
Now to add the functionality to change the color of the ListPicker button, click on the ListPicker and add the blocks in this diagram…
This will change the ListPicker button color to what was selected after a user selects a color….
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….
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.