In this tutorial I'll be showing you how to change the color of the paint by clicking a button. If you haven't watched the first tutorial, please go here https://www.instructables.com/id/Android-Developmen... . Enjoy!

Step 1: Adding the Button

First, go to your project which should be named "PaintApp."

Next, drag the "Button" component (which is located under the "User Interface" section) and drop it on the screen right above the "Canvas."

You'll then see the "Button" say "Text for Button1" and you can change the text of the button by going "Properties" and go under "Text" and type in yellow. Then click outside of the box and you'll see that the text inside the button now says yellow.

If you want to make your "Button" look fancier or more professional you could upload an image of the color yellow. These are the steps of how you'd do it:

1. Go to Google Images and search "yellow color"

2. Find the image and click "Save As.." and save it somewhere

3. Go to your project and click on "Button1"

4. Delete the text and then go to "Image" which is above "Text" and import that image.

5. Change the height and width to 30 pixels (this is not required, but recommended)

Now we're ready to start coding!

Step 2: Adding Scripts

So click on "Blocks" and you should see what scripts you put in before.

Click on "Button1" and select the script that says "when Button1.Click" and drag it on to the screen.

Next click on "Canvas1" and scroll down until you see the script "set Canvas1.PaintColor to" and drag that inside the "when Button1.Click" script.

After that, go to "colors" which is under the words "Built-in" and select the yellow color and drag that inside the little hole of the script "set Canvas1.PaintColor to."

Now run your app with either the aiStarter or Ai Companion and you should see that when you click the yellow button, the paint color changes to yellow.

If this doesn't work for you tell me in the comments!

I used this in a class in school. very fun and not to hard either
<p>Nice tutorial.</p>
<p>Thanks! :D</p>

About This Instructable



More by authorhaider:Android Development with App Inventor Erasing Tutorial Android Development with App Inventor Tutorial 2 of 3 : Paint App Android Development with App Inventor Tutorial 1 of 3 : Paint App 
Add instructable to: