Introduction: Digital Doodle: Drawing App Using MIT App Inventor

By
About: www.krivanja.dev

This tutorial will show you how to create an app using MIT App Inventor.

  • The app draws a line on the screen as the user drags a finger around.

Supplies

MIT App Inventor

Step 1: Start a New Project

Go to Projects > Start new Project

Step 2: Name the Project

Give a suitable name for your Project

Step 3: Set the Screen So That It Does Not Scroll

  • Select Screen1 under Components pane.
  • From the Properties pane of Screen1, uncheck the box next to "Scrollable" setting.

Step 4: Add a Canvas

From the Drawing and Animation Palette, drag out a Canvas component on to Screen1.

Step 5: Change the Height and Width of the Canvas to Fill Parent

  • Under Components pane, select Canvas1
  • Under Properties of Canvas1, set both Height and Width properties to Fill parent.

Step 6: That's All for the Designer! Go Over to the Blocks.

This basic app only needs a Canvas.

Step 7: Switch to Blocks Editor to Program the App.

Switch to Blocks editor to program the app.

Step 8: Get a Canvas.Dragged Event Block

  • from the Blocks, click on Canvas1.
  • from the drawer, pull out when Canvas1.Dragged event.

Step 9: Get a Canvas.DrawLine Call Block

In the Canvas1 drawer, pull out call Canvas1.DrawLine method block.

Step 10: Use the Get and Set Blocks From the Dragged Block to Fill in the Values for the Draw Line Block.

Mouse over the parameters of the Canvas1.Dragged block to pull out the get blocks (prevX, prevY) and (currentX, currentY)that you need.

(Mouse over them, don't click on them.)

Step 11: Test It Out!

Under Connect, click on AI Companion

Scan/Enter the code to live test the app.

Step 12: Now Extend This App

Here are some ideas for extending this app.

You can think of many more!

  • Change the color of the ink (and let the user pick from a selection of colors).
  • Add a button to clear the screen.
  • Clear the Screen when phone is shaking.
  • Change the background to a photograph or picture.
  • Let the user draw dots as well as lines (hint: Use DrawCircle block).
  • Add a button that turns on the camera and lets the user take a picture and then doodle on it.