How to Create a Paint Application in Android?
We all have once used the MS-Paint in our childhood, and when the system was shifted from desks to our palms, we started doodling on Instagram Stories, Hike, WhatsApp, and many more such apps. But have you ever thought about how these functionalities were brought to life? So, In this article, we will be discussing the basic approach used by such apps and will create a basic replica of such apps. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
- In day-to-day life, if we want to create a drawing we firstly require a Canvas to work upon. So, in our app, we will firstly create a canvas where the user can draw his drawings. And for that, we need to create a custom view where the user could simply drag the finger to draw the strokes. In order to achieve this, we create a DrawView class which extends the View class from the standard Android SDK.
- Then we will require a brush that acts as a tool to help us draw on the canvas. Now since we need different brushes for different colors and different widths of the stroke, we will create a blueprint i.e. a class named Stroke with attributes like the color of the stroke, the width of the stroke, visibility of stroke, etc. Each object of this class will represent a distinct brush that draws a unique stroke on the canvas.
- In order to keep a record of each and every stroke the user has drawn on the Canvas, we will create an ArrayList of type Stroke. This ArrayList will help us in undoing the Stroke which the user has drawn mistakenly on the Canvas.
- Now, at the end when the user is done with the drawing, he might want to save that painting for any further use. So, we provide the Save option, which will allow the user to save the current canvas in form of a PNG or JPEG.
List of Methods
Before jumping to the code here are a few of the methods which we will be using in building our app:
Dithering affects the down-sampling of colors that are of
higher precision than the device’s accuracy.
|void||setAntiAlias (boolean aa)|
AntiAliasing smooths out the edges of what is drawn but
has little effect on the shape’s interior.
|void||setStyle(Paint.Style style)||This method controls the|
|void||setStrokeCap (Paint.Cap cap)|
This method changes the geometry of the endpoint of the
line as per the argument For example, ROUND, SQUARE, BUTT.
|void||void setStrokeJoin (Paint.Join join)||This method sets the paint to join to either ROUND, BEVEL, MITER|
|void||setAlpha (int a)|
It is a helper method that only assigns the color’s
alpha value, leaving its r,g,b values unchanged.
Results are undefined if the alpha value is outside of the range [0..255]
This method calls the overridden onDraw() method.
Whenever we want to update the screen, in our case the Canvas,
we call invalidate() which further internally calls the onDraw() method.
This method saves the current state of the Canvas
so that we can go back to it later
This method reverts the Canvas’s adjustments back to
the last time the was canvas.save() called.
|void||Path.quadTo (float x1,float y1, float x2, float y2)|
This method smoothens the curves using a quadratic line.
(x1,y1) is the control point on a quadratic curve and (x2,y2)
are the endpoint on a quadratic curve.
Now, let us start building the app. This app doesn’t require any special permissions. So leave the AndroidManifest.xml as default.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Adding the dependency in gradle.build
This library is used to add a color palette to our app so that the user can select any color of his choice
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
Step 4: Create the Stroke class
Refer to the How to Create Classes in Android Studio. And name the class as Stroke. Below is the code for the Stroke.java file.
Step 5: Create the DrawView class
Similarly, create a new java class and name the class as DrawView. Below is the code for the DrawView.java file.
Step 6: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
For drawable resource files, you may find them in the following GitHub link.
Github Project Link: https://github.com/raghavtilak/Paint
There are plenty of things you can add to this project like:-
- Adding a mask to the painted object, i.e. creating a blur or emboss effect on the stroke.
- Adding animations to the app.
- Adding a color selector for canvas, i.e. changing the color of canvas from the default White color as per the user requirement.
- Adding a sharing button, to directly share the drawing on various apps.
- Adding an eraser functionality that clears the specific path/stroke on which the eraser is dragged.
- Adding a shape picker, by which a user can directly select any particular shape from the list and can drag on the screen to create that shape.
- Enhancing UI, by adding a BottomSheet, vectors, etc.
“Anyone can put paint on a canvas, but only a true master can bring the painting to life.”, we finish building our app, now draw some awesome paintings on this canvas and become a “true master”.
- Do not directly call the getMeasuredWidth(), getMeasuredHeight() method as these might return value 0. Because a View has its own lifecycle, Attached->Measured->Layout->Draw, so by the time you call these methods the view might have not been initialised completely. Hence, it is recommended to use the ViewTreeObserver which fires at the very moment the View has been Laid out or Drawn on screen.
- In case you have enabled the dark mode on your testing device, you might see a small glitch effect of switching of custom view from dark to light mode. Since the app is not optimised for DarkMode.