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 http://appinventor.mit.edu/explore/ai2/colored-dots.html, 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….

TwoScreenColorSelectorLayout

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

TwoScreenColorSelectorLayout2

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

TwoScreenColorSelectorColorSelectButtonCode

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

TwoScreenColorSelectorColorButtonCode

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.

TwoScreenColorSelectorSetButtonColorCode

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.

QRCodeForAPK

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

QRCodeForAPKExample

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.

Advertisements

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