Android Programming‎ > ‎AppInventor‎ > ‎

Topic 3

Events and properties of different components


Event / Properties /procedure



When the user does a drag from (PrevX1,PrevX2) to another (currentX, currentY)


When the user touch a canvas providing the (x,y) position of the touch.


When the user performs a quick swipe on the screen


Clear anything drawn on this Canvas


Draw a circle at the given coordinates on the given coordinates (x, y), with the given radius (r)


Draw a line between the given coordinates.


Set the name of the file containing the background image for the canvas.


Set the color in which lines are drawn


Take a picture, then raises the AfterPicture Events


Indicates that a photo was taken with the camera and provided the path to the stored picture


Build in blocks


Define a global variable with an initial value. After a global variable is defined, you can set its value by a block in ‘My Building Block’ – ‘My Definition’

Define a procedure that returns a result

Define a procedure that does not returns a result


Practical 3: Paint Pot

Program Requirements:

1.          Create a Canvas with a background Image. The image can be changed by taking photo with a camera.

2.          It will ‘DrawLine’ when you ‘Dragged’ on the Canvas.

3.          It will ‘DrawCircle’ when you ‘Touched’ the Canvas.

4.          Create 3 buttons to change the PaintColor of Canvas to ‘Green’, ‘Blue’ and ‘Yellow’

5.          Create buttons to change the radius of DrawCircle.

6.          Create a button to clear the drawing on the Canvas



A.      Login the web based platform and create a project called PaintPot. (Old Server: )

B.      Design the layout of your apps in App Designer

Ø   Add a HorizontalArrangement with 3 buttons. Rename the 3 buttons as ‘GreenButton’, ‘RedButton’, ‘BlueButton’.

Ø   Add a Canvas and rename it as ‘DrawingCanvas’.

Ø   Add a HorizontalArrangement with 4 buttons. Rename the four buttons as ‘TakePictureButton’, ‘WipeButton’, ‘BigButton’, ‘SmallButton’

Ø   Add a camera.

Ø   Download the file and uploaded to your project. (Click ‘Add’ button and selected the file kitty.png)

Ø   Change the properties of the component as follows:






Change the properties of ‘RedButton’ and ‘BlueButton’ similar to ‘GreenButton’








Fill parent

300 pixels


Take Picture

Change the properties of ‘WipeButton’, ‘BigButton’ and ‘SmallButton’ similar to ‘TakePictureButton’


C.      Build your program with Block Builder

Ø   Change the PaintColor of Canvas (DrawingCanvas.PaintColor) by clicking the Color Buttons.

e.g. When the BlueButton.Clicked, Set the DrawingCanvas.PaintColor to Color Blue. 

Ø   Define a global variable dotsize to 5 (Build-in Block – Definition)

Ø   Adding the Touch Event of Canvas (DrawingCanvas.Touched) to draw a dot (circle) with the following blocks.


My Definitions

Set the Coordinates of the Dot (x, y) and radius (r) as value x, value y and dotsize.

Ø   Adding the Drag Event of Canvas (DrawingCanvas.Dragged) to draw a line with the following blocks.


My Definitions


When DrawingCanvas.Dragged happened, call DrawingCanvas.DrawLine to draw a line from (prevX, prevY) to (currentX, currentY)

Ø   Change the dot size with the following blocks.


My Definitions

Build in – Math

When BigButton is Clicked (BigButton.Clicked), set the dotsize to 8. When SmallButton is Clicked (SmallButton.Clicked), set the dotsize to 2.

Ø   Clear the drawing with the WipeButton using the following blocks. When WipeButton is Clicked (Event WipeButton.Clicked), call DrawingCanvas.Clear to clear the drawing.

Ø   Letting the user take a picture as the background with the following blocks.




My Definitions

When the TakePictureButton is clicked (Event TakePictureButton.Clicked), call Camera1.TakePicture to take a photo. After taking the photo (Event Camera1.AfterPicture), Set the Background of DrawingCanvas (DrawingCanvas.BackgroundImage) to the path of the photo (image)

D.     Test your apps with emulator.

Ø   Start the emulator and unlock the emulated phone.

Ø   Click ‘Connect to device’

E.      Package the phone apps for submission.

Ø   Click ‘Package for phone’ and ‘Downloads to this computer’.

Ø   Submit the Downloaded file in eclass.


Extension Activities

1.          Add labels to show the dotsize.

2.          Add two buttons to increase and decrease the line width.

3.          The Line width must be between 1 and 15.

4.          Disable the corresponding button when the Line width is 1 or 15.




Acknowledge: The above Practical was modified based on


Solution to Practical:


Modified and additional parts for extension activities

Extension Part

Subpages (4): Video 1 Video 2 Video 3 Video 4
T. Chan,
Oct 11, 2012, 1:21 AM