Doodle App Guide

Note: This is my first Guide :writing_hand:t2:

Introduction :eyes:

Today we’ll create a doodle app with this step by step guide. A basic doodle app must have the following features :
1) Canvas: Screen On which user can doodle using the pen. :scroll:
2) Pens: Device to doodle having properties like width and color :pen:
3) Eraser: To erase doodle created by pens :anger:

Set Up :hammer_and_wrench:

  1. Canvas Component (width = fill parent / 100% , height = fill parent)

know more about canvas: Canvas - Kodular Docs

  1. Horizontal arrangement, card view, and image(or buttons) to make tools pallet containing colors and eraser

Here’s how it would look like :

1. Doodling :paintbrush:

  1. So we start by creating curves on the canvas when the user drags his/her finger across the screen. In order to do so, we’ll use the Canvas.Dragged function
    When the user does drag from one point (prevX, prevY) to another (x, y). The pair (startX, startY) indicates where the user first touched the screen.

  2. Create a line from initial to the final position
    blocks (8)

  3. The major problem that arises is that our collection/series of lines are not continuous but breaks at its ends. Here is a highly magnified view (illustration in ms paint xD)


We need to add curves at the ends.

Can you tell me a 2d shape having curves all around it?

Ya it’s a circle. We’ll add circles to the end. But what will be the dimensions of the circle or should I ask :

What should be a diameter of a circle if we want it to completely coincide with a rectangle(line) of with x

Yes, it will be = x and thus radius will be= x/2

blocks (7)


  1. so let’s do it. ASSEMBLE This is how your blocks will look like. Have a close look
    blocks (5)

2. Property Variations :face_with_monocle:

  1. You can easily change the colors of strokes. Here’s an example :
  2. You can even change width of lines to make strokes bolder. Do remember to change the circle radius according to line width simultaneously. I suggest you to use a slider for input.

3. Eraser :beverage_box:

  1. Adding an eraser is a simple concept. You just have to change the stroke color to transparent.
    blocks (9)

4. Rest :tropical_drink:

Get rest for a few minutes and drink water/cold drink/tea etc. You have now created your basic doodle app. Try playing with blocks to add more complementary features and canvas backgrounds (you can add an option to change canvas background color and image. images can be of a graph, margins, etc.)
:space_invader: Now test your newly made app . :+1:t2:


An apk to try I guess :grin:

1 Like

It is from my open-source app - Glass Board

Ah I was thinking that I have seen that last drawing somewhere but couldn’t find it.

Now got it where it was :laughing:


when i saw topic i got it it was posted in my
paint app tutorial

well more over i was not that expert but my friend @Ansh_Anand made it

good wooooork
take this
:dizzy_face: :heart:
i got hypnotized when i saw then amazing
when is the next update?

1 Like

pls add color picker
pls add

got it divide by 2

@Ansh_Anand Well Done Buddy :thumbsup: :thumbsup:

1 Like

also pls provide tensions used
also pls provide extensions used

Nice guide.
But there’s a couple of things that are not completely correct though:

The lines are connected in their middle line, no matter the width.
And there’s not 2 circles to join the segments. It’s only one.


idk :thinking:?

rrrr run time errror !!!

on bluestacks on apk download
well it has llive time of india

Also, you don’t need to set the line.width everytime you change the paint.color:


1 Like

Thanks @italo for pointing out this blunder.

That is intentional because the line width changes to 50 when eraser is used to make it bigger. So if pen is used after the eraser then we have to again set the width to default value.

1 Like

why not use sliders. i think it will be perfect . u can create another screen and link them from tiny db

Should I add line size selector and background change option

  • Yes
  • No , We’ll do it ourselves

0 voters