Page 83 - CodePilot V5.0 C6

CANVAS RESPONSIVENESS WITH UI COMPONENTS

In MIT App Inventor, the Canvas can work with buttons, labels and text boxes to create interactive
apps that respond to user actions in real time.
Examples:

Buttons: Change something on the Canvas, like colour or position, when clicked.

Labels: Display messages based on Canvas events, like a touch in a specific area.
Text Boxes: Enables inserting text typed by the user.

MIT App Inventor is a free online tool that lets you create your own mobile apps for Android RAPID RECALL Tick ( ) if you know this.
devices. Instead of writing long codes, you use colourful blocks that fit together like a puzzle. It’s
fun, easy to use and helps you turn your ideas into real working apps. 1. The Click event is triggered when the user taps on an element.

TOUCH EVENTS 2. Buttons are used to change something on the Canvas.

Touch events let apps respond to screen interactions like taps, swipes or touches, enabling
interactive elements such as buttons, drawings and gestures, making apps engaging and fun.

TYPES OF TOUCH EVENTS CREATING AN APP USING TOUCH EVENTS

Some of the touch events that help apps respond to how users interact with the screen are:
The Magic_Pad app lets you draw with your finger, change colours and reset the screen like a
Touch Down: This event happens when the user first touches the screen or an element, starting digital drawing book. It helps young learners practice drawing, handwriting and creativity while
an action like drawing or detecting the touch. improving hand control in a safe, educational way.
Touch Up: This event occurs when the user lifts their finger, ending or stopping the action.
To create the Magic_Pad app, follow these steps:
Click: This event is triggered when the user taps on an element, performing actions like opening

a screen or changing elements. Step 1 Create new project in the MIT App Inventor.
Touch Move: This event occurs when the user moves their finger on the screen, used to track Step 2 Change the name of the screen to Magic_Pad in the Title textbox, adjust
actions like dragging or drawing. AlignHorizontal to Center:3 and AlignVertical to Top:1 in the Properties pane.

Step 3 Click on the Layout component.
DRAWING AND ANIMATION Step 4 Drag and drop HorizontalArrangement into the phone screen.

Drawing and Animation tools let you create apps for drawing and moving objects on the screen.

Some of the main tools that you will use are:
Canvas: It is like a blank paper in your app where you can draw with fingers or code and
detect touch events like tap, drag and swipe for interactive visuals.

Ball: This is a round object that you can add to the Canvas. You can make it move, bounce or
roll across the screen. It’s great for games like bouncing balls or ping pong.
ImageSprite: This lets you use pictures, like a cartoon character or a car and make them move
around the Canvas. You can make them go left, right, jump or even spin.

81
Touch to Motion with MIT