Changing the color of a button (or other components) in App Inventor

This tutorial covers the simple changing of the color of a button, while the app is running. You may also set a component’s color by changing the color properties on the Properties list in the Designer.

A second tutorial will show how to implement the continuously changing color demonstrated in the video example. That will be posted next!

The Designer View

To demonstrate the “simple” version, create an app with this user interface:

ButtonChangeColor-Designer

That’s simple!

Each time the button is pressed, the color of the button will change.

Blocks Code

To implement this feature, we set up a variable named SelectedColor. Each time the button is pressed, the value of SelectedColor is incremented by one.

Then, our blocks code uses a sequence of if-then-else statements to check the value of SelectedColor, and change the button color. As you can see, below, if SelectedColor is 1, then the button color is set to red, and if 2, the color is set to yellow, and so on. The color values are selected from the Colors blocks in the Blocks editor.

ButtonChangeColor1-blocks

Many components have a BackgroundColor property and they too can have their colors change, programmatically, with code blocks similar to those used above.

Key Feature Shown

  • Color swatches!

Downloads

  • Source code App Inventor “.aia” source file (App Inventor source code files have the filename extension .aia)
  • Download the source code to your computer. Then, in App Inventor, go to the Projects menu and select “Import project (.aia) from my computer…”

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

One thought on “Changing the color of a button (or other components) in App Inventor

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