How to Create a Paint Application in Android?

16 Feb, 2022
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.
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.
Before jumping to the code here are a few of the methods which we will be using in building our app:
Type
Method
Description
Dithering affects the down-sampling of colors that are of
higher precision than the device’s accuracy.
AntiAliasing smooths out the edges of what is drawn but
has little effect on the shape’s interior.
This method changes the geometry of the endpoint of the
line as per the argument For example, ROUND, SQUARE, BUTT.
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.
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 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
implementation ‘petrov.kristiyan:colorpicker-library:1.1.10’
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. 
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">         <LinearLayout        android:id="@+id/linear"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">         <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="horizontal">             <ImageButton                android:id="@+id/btn_undo"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/ic_undo"                android:text="Undo" />             <ImageButton                android:id="@+id/btn_save"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/ic_floppy_disk"                android:text="Save" />             <ImageButton                android:id="@+id/btn_color"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/ic_colorpicker"                android:text="Color" />             <ImageButton                android:id="@+id/btn_stroke"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/ic_paint_brush"                android:text="Stroke" />        </LinearLayout>         <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical">             <com.google.android.material.slider.RangeSlider                android:id="@+id/rangebar"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:visibility="gone" />                   </LinearLayout>           </LinearLayout>     <com.raghav.paint.DrawView        android:id="@+id/draw_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/linear"        android:layout_centerInParent="true" />     </RelativeLayout>
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. 
Java
import android.graphics.Path; public class Stroke {     // color of the stroke    public int color;         // width of the stroke    public int strokeWidth;         // a Path object to    // represent the path drawn    public Path path;     // constructor to initialise the attributes    public Stroke(int color, int strokeWidth, Path path) {        this.color = color;        this.strokeWidth = strokeWidth;        this.path = path;    }}
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. 
Java
import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View; import java.util.ArrayList; public class DrawView extends View {     private static final float TOUCH_TOLERANCE = 4;    private float mX, mY;    private Path mPath;         // the Paint class encapsulates the color    // and style information about    // how to draw the geometries,text and bitmaps    private Paint mPaint;        // ArrayList to store all the strokes    // drawn by the user on the Canvas    private ArrayList<Stroke> paths = new ArrayList<>();    private int currentColor;    private int strokeWidth;    private Bitmap mBitmap;    private Canvas mCanvas;    private Paint mBitmapPaint = new Paint(Paint.DITHER_FLAG);     // Constructors to initialise all the attributes    public DrawView(Context context) {        this(context, null);    }     public DrawView(Context context, AttributeSet attrs) {        super(context, attrs);        mPaint = new Paint();                 // the below methods smoothens        // the drawings of the user        mPaint.setAntiAlias(true);        mPaint.setDither(true);        mPaint.setColor(Color.GREEN);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setStrokeJoin(Paint.Join.ROUND);        mPaint.setStrokeCap(Paint.Cap.ROUND);                // 0xff=255 in decimal        mPaint.setAlpha(0xff);     }     // this method instantiate the bitmap and object    public void init(int height, int width) {         mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);        mCanvas = new Canvas(mBitmap);         // set an initial color of the brush        currentColor = Color.GREEN;                 // set an initial brush size        strokeWidth = 20;    }     // sets the current color of stroke    public void setColor(int color) {        currentColor = color;    }     // sets the stroke width    public void setStrokeWidth(int width) {        strokeWidth = width;    }     public void undo() {        // check whether the List is empty or not        // if empty, the remove method will return an error        if (paths.size() != 0) {            paths.remove(paths.size() - 1);            invalidate();        }    }     // this methods returns the current bitmap    public Bitmap save() {        return mBitmap;    }     // this is the main method where    // the actual drawing takes place    @Override    protected void onDraw(Canvas canvas) {        // save the current state of the canvas before,        // to draw the background of the canvas        canvas.save();                 // DEFAULT color of the canvas        int backgroundColor = Color.WHITE;        mCanvas.drawColor(backgroundColor);         // now, we iterate over the list of paths        // and draw each path on the canvas        for (Stroke fp : paths) {            mPaint.setColor(fp.color);            mPaint.setStrokeWidth(fp.strokeWidth);            mCanvas.drawPath(fp.path, mPaint);        }        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);        canvas.restore();    }     // the below methods manages the touch    // response of the user on the screen     // firstly, we create a new Stroke    // and add it to the paths list    private void touchStart(float x, float y) {        mPath = new Path();        Stroke fp = new Stroke(currentColor, strokeWidth, mPath);        paths.add(fp);         // finally remove any curve        // or line from the path        mPath.reset();                 // this methods sets the starting        // point of the line being drawn        mPath.moveTo(x, y);                // we save the current        // coordinates of the finger        mX = x;        mY = y;    }     // in this method we check    // if the move of finger on the    // screen is greater than the    // Tolerance we have previously defined,    // then we call the quadTo() method which    // actually smooths the turns we create,    // by calculating the mean position between    // the previous position and current position    private void touchMove(float x, float y) {        float dx = Math.abs(x - mX);        float dy = Math.abs(y - mY);         if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {            mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);            mX = x;            mY = y;        }    }     // at the end, we call the lineTo method    // which simply draws the line until    // the end position    private void touchUp() {        mPath.lineTo(mX, mY);    }     // the onTouchEvent() method provides us with    // the information about the type of motion    // which has been taken place, and according    // to that we call our desired methods    @Override    public boolean onTouchEvent(MotionEvent event) {        float x = event.getX();        float y = event.getY();         switch (event.getAction()) {            case MotionEvent.ACTION_DOWN:                touchStart(x, y);                invalidate();                break;            case MotionEvent.ACTION_MOVE:                touchMove(x, y);                invalidate();                break;            case MotionEvent.ACTION_UP:                touchUp();                invalidate();                break;        }        return true;    }}
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. 
Java
import android.content.ContentValues;import android.graphics.Bitmap;import android.graphics.Color;import android.net.Uri;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import android.view.View;import android.view.ViewTreeObserver;import android.widget.ImageButton; import androidx.annotation.NonNull;import androidx.appcompat.app.AppCompatActivity; import com.google.android.material.slider.RangeSlider; import java.io.OutputStream; import petrov.kristiyan.colorpicker.ColorPicker; public class MainActivity extends AppCompatActivity {         // creating the object of type DrawView    // in order to get the reference of the View    private DrawView paint;         // creating objects of type button    private ImageButton save, color, stroke, undo;         // creating a RangeSlider object, which will    // help in selecting the width of the Stroke    private RangeSlider rangeSlider;     @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);         // getting the reference of the views from their ids        paint = (DrawView) findViewById(R.id.draw_view);        rangeSlider = (RangeSlider) findViewById(R.id.rangebar);        undo = (ImageButton) findViewById(R.id.btn_undo);        save = (ImageButton) findViewById(R.id.btn_save);        color = (ImageButton) findViewById(R.id.btn_color);        stroke = (ImageButton) findViewById(R.id.btn_stroke);         // creating a OnClickListener for each button,        // to perform certain actions         // the undo button will remove the most        // recent stroke from the canvas        undo.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                paint.undo();            }        });                 // the save button will save the current        // canvas which is actually a bitmap        // in form of PNG, in the storage        save.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                                 // getting the bitmap from DrawView class                Bitmap bmp = paint.save();                                 // opening a OutputStream to write into the file                OutputStream imageOutStream = null;                 ContentValues cv = new ContentValues();                                 // name of the file                cv.put(MediaStore.Images.Media.DISPLAY_NAME, "drawing.png");                                 // type of the file                cv.put(MediaStore.Images.Media.MIME_TYPE, "image/png");                                 // location of the file to be saved                cv.put(MediaStore.Images.Media.RELATIVE_PATH, Environment.DIRECTORY_PICTURES);                 // get the Uri of the file which is to be created in the storage                Uri uri = getContentResolver().insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, cv);                try {                    // open the output stream with the above uri                    imageOutStream = getContentResolver().openOutputStream(uri);                                         // this method writes the files in storage                    bmp.compress(Bitmap.CompressFormat.PNG, 100, imageOutStream);                                         // close the output stream after use                    imageOutStream.close();                } catch (Exception e) {                    e.printStackTrace();                }            }        });        // the color button will allow the user        // to select the color of his brush        color.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                final ColorPicker colorPicker = new ColorPicker(MainActivity.this);                colorPicker.setOnFastChooseColorListener(new ColorPicker.OnFastChooseColorListener() {                    @Override                    public void setOnFastChooseColorListener(int position, int color) {                        // get the integer value of color                        // selected from the dialog box and                        // set it as the stroke color                        paint.setColor(color);                    }                    @Override                    public void onCancel() {                        colorPicker.dismissDialog();                    }                })                        // set the number of color columns                        // you want  to show in dialog.                        .setColumns(5)                        // set a default color selected                        // in the dialog                        .setDefaultColorButton(Color.parseColor("#000000"))                        .show();            }        });        // the button will toggle the visibility of the RangeBar/RangeSlider        stroke.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                if (rangeSlider.getVisibility() == View.VISIBLE)                    rangeSlider.setVisibility(View.GONE);                else                    rangeSlider.setVisibility(View.VISIBLE);            }        });         // set the range of the RangeSlider        rangeSlider.setValueFrom(0.0f);        rangeSlider.setValueTo(100.0f);                 // adding a OnChangeListener which will        // change the stroke width        // as soon as the user slides the slider        rangeSlider.addOnChangeListener(new RangeSlider.OnChangeListener() {            @Override            public void onValueChange(@NonNull RangeSlider slider, float value, boolean fromUser) {                paint.setStrokeWidth((int) value);            }        });         // pass the height and width of the custom view        // to the init method of the DrawView object        ViewTreeObserver vto = paint.getViewTreeObserver();        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {            @Override            public void onGlobalLayout() {                paint.getViewTreeObserver().removeOnGlobalLayoutListener(this);                int width = paint.getMeasuredWidth();                int height = paint.getMeasuredHeight();                paint.init(height, width);            }        });    }}
Note: 
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.
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”. 
Note:
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.
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.
 
adnanirshad158
surindertarika1234
sagar0719kumar
android
Technical Scripter 2020
Android
Java
Technical Scripter
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android RecyclerView in Kotlin
Broadcast Receiver in Android With Example
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
Arrays in Java
Arrays.sort() in Java with examples
Split() String method in Java with examples
Reverse a string in Java
Object Oriented Programming (OOPs) Concept in Java