{"id":378,"date":"2014-11-18T20:07:31","date_gmt":"2014-11-19T04:07:31","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=378"},"modified":"2014-11-18T20:07:31","modified_gmt":"2014-11-19T04:07:31","slug":"changing-the-color-of-a-button-or-other-components-in-app-inventor","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/11\/18\/changing-the-color-of-a-button-or-other-components-in-app-inventor\/","title":{"rendered":"Changing the color of a button (or other components) in App Inventor"},"content":{"rendered":"

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

A second tutorial will show how to implement the continuously changing color demonstrated in the video example<\/a>. That will be posted next!<\/p>\n

The Designer View<\/strong><\/p>\n

To demonstrate the “simple” version, create an app with this user interface:<\/p>\n

\"ButtonChangeColor-Designer\"<\/a><\/p>\n

That’s simple!<\/p>\n

Each time the button is pressed, the color of the button will change.<\/p>\n

Blocks Code<\/strong><\/p>\n

<\/p>\n

To implement this feature, we set up a variable named SelectedColor<\/em>. Each time the button is pressed, the value of SelectedColor<\/em> is incremented by one.<\/p>\n

Then, our blocks code uses a sequence of if-then-else<\/em> statements to check the value of SelectedColor<\/em>, and change the button color. As you can see, below, if SelectedColor<\/em> 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<\/em> blocks in the Blocks editor.<\/p>\n

\"ButtonChangeColor1-blocks\"<\/a><\/p>\n

Many components have a BackgroundColor<\/em> property and they too can have their colors change, programmatically, with code blocks similar to those used above.<\/p>\n

Key Feature Shown<\/strong><\/p>\n