Coloring App Using MIT App Inventor (Canvas Drawing App Tutorial)

on


Create a simple and interactive Coloring App using MIT App Inventor where users can draw, paint, and change brush sizes and colors easily. This beginner-friendly project is perfect for students learning block coding and mobile app development.

Built using MIT App Inventor, this project demonstrates how to use the Canvas component to create a simple paint program.

 Project Overview

This Coloring App allows users to:

  • Draw freely on a canvas

  • Change brush colors

  • Adjust brush size using a slider

  • Create interactive digital artwork

  • Run completely offline

This is a great student project using MIT App Inventor Canvas.

 1. Set Up the Screen (Designer View)

🔹 Add a Canvas Component

Drag a Canvas component onto the screen.

Set the following properties:

  • BackgroundImage → Choose your coloring picture (outline drawing)

  • Width → Fill Parent

  • Height → Fill Parent (or fixed height like 400 px)

  • PaintColor → Black (default color)

  • LineWidth → 5 (default brush size)

The Canvas acts as the drawing board where users will color.

2. Add Brush Size Slider

Drag a Slider component below the Canvas.

Set:

  • MinValue = 1

  • MaxValue = 50

  • ThumbPosition = 5

(Optional) Add a Label to display the current brush size.

This allows users to control the thickness of the brush dynamically.

 3. Add Color Buttons

Add 5–8 Button components for selecting colors:

  • ButtonRed

  • ButtonBlue

  • ButtonGreen

  • ButtonYellow

  • ButtonBlack

  • (Optional) Pink, Orange, Purple, etc.

Set each button’s:

  • BackgroundColor → Match the actual color

  • Text → Blank (" ") or color name

These buttons will change the Canvas PaintColor when clicked.

Blocks Coding (Logic Part)

Now switch to Blocks View.

 1. Drawing on Canvas

Use this block:

When Canvas1.Dragged

  • Call Canvas1.DrawLine

    • x1 = previousX

    • y1 = previousY

    • x2 = currentX

    • y2 = currentY

This allows smooth drawing while dragging your finger.

2. Changing Brush Size

When Slider1.PositionChanged

  • Set Canvas1.LineWidth to Slider1.ThumbPosition

(Optional)
Set Label.Text to Slider1.ThumbPosition

 3. Changing Colors

For each color button:

Example:

When ButtonRed.Click

  • Set Canvas1.PaintColor to Red

When ButtonBlue.Click

  • Set Canvas1.PaintColor to Blue

Repeat for other colors.

 Features of This Coloring App

✅ Interactive Canvas drawing
✅ Adjustable brush size
✅ Multiple color options
✅ Works offline
✅ Beginner-friendly block coding
✅ Great classroom project

 Educational Benefits

This project helps students learn:

  • Event-driven programming

  • User interface design

  • Canvas component usage

  • Variable control (brush size)

  • Creative digital interaction

It is ideal for:

  • School coding labs

  • STEM activities

  • Beginner Android app development

  • Offline coloring app creation




Comments

Post a Comment