Hey there lovely people,

I am going to demonstrate how to make a simple yet effective drawing app in this blog. We will be using the library DrawingCanvas which is made by yours truly.

This library is completely made in Kotlin, however you can use both java and kotlin in your app. In this tutorial I will be using Kotlin.

So your first step would be to start an empty project in android studio. Then

You can refer to this Video:

OR Follow these steps:

Step 1. Add this maven dependency to your build.gradle (project) file

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Step 2. Add the dependency to your build.gradle (app) file

 dependencies {
            implementation 'com.github.Miihir79:DrawingCanvas:1.1.2'
    }

Step 3. Add the XML code

  <com.mihir.drawingcanvas.drawingView
        android:id="@+id/drawing_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </com.mihir.drawingcanvas.drawingView>

Step 4. Refrence the canvas in XML to use it's functions

    drawing_view.setBrushAlpha(120)// values from 0-255
    drawing_view.setBrushColor(R.color.white) 
    drawing_view.setSizeForBrush(12) // takes value from 0-200
    drawing_view.undo() 
    drawing_view.redo()
    drawing_view.erase(Color.WHITE) // give the color same as the background color
    drawing_view.clearDrawingBoard()

    //getter methods
    val alpha = drawing_view.getBrushAlpha() // returns INT
    val brushSize = drawing_view.getBrushSize() // returns INT
    val brushColor = drawing_view.getBrushColor() // returns INT

    val drawing = drawing_view.getDrawing() // returns ArrayList<CustomPath>(); where CustomPath(var color:Int , var brushThickness:Int, var alpha:Int)

Demo of all the functions

setBrushAlpha

This function takes the value from 0-255. You can check it's implementation here:

setBrushColor

This function takes any color as an input. You can check it's implementation here:

Link for the color picker: github.com/Dhaval2404/ColorPicker

setSizeForBrush

This function takes any value from 0-200 as an input. You can check it's implementation here:

undo and redo

These functions can undo and redo your strokes. You can check it's implementation here:

clearDrawingBoard

This function clears all the strokes and clear the drawing board. But carefully you wont be able to undo this change! You can check it's implementation here:

erase

This function will simply take in the background color and draw a line of that color in top of the existing canvas.

getter functions

These functions simply return the values of the property and also the entire drawing canvas. So technically it can be used to create a scribble.io clone.

That is what is required to make a app like this. You can thus make playstore ready apps using this simple library.

Thank you for sticking till the end, Have a wonderful day.