Simple Color Selector in AppInventor – Better Solution

The Background

In my last post, I detailed the attempt to use a ListPicker element to make a quick color selector.  It dead ended when the selector brought up only color code numbers instead of a human friendly color blocks to select from (see Creating Color Selector Using ListPicker Element in AppInventor2 – Not a good idea).

The Plan

I am now going to attempt another method to make a more elegant color selector using a second screen.  There is a great tutorial that shows a similar type function at, but that is quite complex and covers several other concepts.  I am going to GREATLY simplify it here.

The Screen Layouts

I am going to leave the ListPicker element and functionality from my previous post (link to the post above) to compare the 2 methods.  First I added another Button element to link my new functionality to.  I then added a second screen by clicking the “Add Screen…” button (circled in the next screen shot) and naming the new screen “ColorSelector” in the dialog box that popped up….


Next I chose “ColorSelector” that I just created in the screen selector pull down.  On that screen layout, I added 3 buttons and set the default color to some example colors….


This sets up both screens.  Now I added the code Blocks…

The Code Blocks

First was to bring up the ColorSelector screen when the button is clicked on Screen1….

  1. Select “Screen1” to work on in the screen selector menu.
  2. Pull out the “when Button1.Click” block.
  3. Add the block to “open another screen”  (under the “Control” group).
  4. Add a text block set to the name of the second screen as the screenName parameter.

Here is a snapshot of my code block….


Next is the functionality for the color buttons on the ColorSelector screen.

  1. Select the “ColorSelector” in the screen selector pull down.
  2. For each of the buttons, add the block to “close screen with value”.  This block is under the “Control” group.
  3. Attach the corresponding button’s background color to be sent back as the result back to Screen1 and close ColorSelector screen.  The result will be used later in Screen1 to set the color of the button.

Here is a snapshot of my code block….


The final step is to set the button background color in Screen1 to the result that was sent back from the “ColorSelector” screen.

  1. Select “Screen1” to work on in the screen selector menu.
  2. Pull out the “when Screen1.OtherScreenClosed” block from the Control group.
  3. Pull out the “set Button1.BackgroundColor to” and attach the “get result” from that block as the color to be set.


The Testing – Round 1

I was trying to test this while my phone was connected to the AppInventor environment mode but found out a limitation in this testing mode.  You can’t move from one screen to another using code when running on the phone in this mode.  The phone will just display the screen that is selected in the screen selector pull down.  I couldn’t test the most important features of my new app.

The Multi-Screen Testing Solution

Unfortunately, testing of multi-screen functionality can only be done if the app is fully installed on the testing device.  Luckily AppInventor has an easy method to allow users to quickly build and install the full Android app you are developing to your phone/tablet.  Under the build menu, select “App (provide QR code for .apk)”.  It will build the code and bring up a QR code that you can scan using the camera while in the AI2 Companion app on the device you are using for test.


Once done building, a QR code will pop up like this….


As the note says, the code is only valid for 2 hours so don’t expect to be able to reuse it later.

The Testing – Round 2

Once I installed this test app on my phone, everything worked as expected.  When I clicked the “SecondScreenChooser” the other screen with 3 color buttons came up.  Once I clicked one of the colors, the first screen came back up and the “SecondScreenChooser” color changed to match what I clicked.


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s