Introduction: Android Development With App Inventor Erasing Tutorial

By

In this tutorial I'll show you how to erase paint that is on the screen and how to erase everything by clicking a button or by shaking the Android.

This tutorial goes with..

Android Development with App Inventor Tutorial 1 of 3 : Paint App

https://www.instructables.com/id/Android-Developmen...

Android Development with App Inventor Tutorial 2 of 3 : Paint App

https://www.instructables.com/id/Android-Developmen...

So please read those tutorials before you start this one.

Step 1: The Eraser

First we're going to need to download an image of an eraser and the following link is the one I used in the project:

https://www.google.com/search?q=eraser+clipart&esp...

When you click the link:

1. Right click and press "Save As"

2. Go to your project which should be called "Paint App"

3. Add in a new button and delete the text from it by going to the area that says "Text" under "Properties"

3. Upload the image that you saved

4. Make the height and width both 50 pixels

5. Go under "Components" and make sure the word "Button2" is highlighted in green and then go to the bottom of the "Components" section and click "Rename" and call it "Eraser"

..........................................................................................................................................................................................

Now drag in another button and go under "Properties" and to the area that says "Text" and type in "Erase All"

Then rename "Button3" as "EraseAll" and you MUST NOT have any spaces!

Then drag in a "HorizontalArrangement" (which is under "Layout") and put it on the very top of the screen. Then drag the "Eraser" button and the "EraseAll" button into the "HorizontalArrangement" and you should see that they are now next to each other! This saves more room for people to draw on the phone so you'll be using the "HorizontalArrangement" a lot or the "VerticalArrangement."

...........................................................................................................................................................................................

After you're done with that drag the "AccelerometerSensor" (under the "Sensors" section).

You should see that when you plop it on the screen it goes down to the bottom of the screen. This is perfectly normal so there is no need to worry about that.

The Accelerometer Sensor will make all the paint disappear from the screen if you shake your phone.

...........................................................................................................................................................................................

Now we're ready to start coding!

Step 2: Coding

First click on "EraseAll" then click the "when EraseAll.Click" script and drag it down to the screen. Next click on "Canvas1" and find the "call Canvas1.Clear" and drag that inside the "when EraseAll.Click" script.

Next click the "AccelerometerSensor" and drag the "when AccelerometerSensor.Shaking" script to the screen. Then click on "Canvas1" and find the "call Canvas1.Clear" and drag that inside the "when AccelerometerSensor.Shaking" script.

Afterwards go to "Eraser" and drag the "when Eraser.Click" script to the screen. Then click on "Canvas1" and scroll down until you see "set Canvas1.PaintColor" script and drag that into the "when Eraser.Click" script . Click on "Canvas1" again and scroll down until you see the "Canvas1.BackgroundColor" script and drag that into the little hole in the "set Canvas1.PaintColor" script.

Now you can test out your erasers!

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