Android Simple Drawing on Canvas by finger Example Tutorial

How to create sketch android application with clear screen button using Paint, Bitmap and Path class.

In this tutorial we are going to create an android application with the use of Paint, Bitmap, Canvas and Path classes to make an android app with drawing feature, like a real sketch board but there is only one difference that our drawing board is completely dynamic and soft board. So here is the complete step by step tutorial for Android Simple Drawing on Canvas by finger Example Tutorial.

android-project-download-code-button

Android Simple Drawing on Canvas by finger Example Tutorial.

Code for MainActivity.java file.

package com.android_examples.drawingapp_android_examplescom;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Path;
import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.view.ViewGroup.LayoutParams;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    RelativeLayout relativeLayout;
    Paint paint;
    View view;
    Path path2;
    Bitmap bitmap;
    Canvas canvas;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        relativeLayout = (RelativeLayout) findViewById(R.id.relativelayout1);

        button = (Button)findViewById(R.id.button);

        view = new SketchSheetView(MainActivity.this);

        paint = new Paint();

        path2 = new Path();

        relativeLayout.addView(view, new LayoutParams(
                RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.MATCH_PARENT));

        paint.setDither(true);

        paint.setColor(Color.parseColor("#000000"));

        paint.setStyle(Paint.Style.STROKE);

        paint.setStrokeJoin(Paint.Join.ROUND);

        paint.setStrokeCap(Paint.Cap.ROUND);

        paint.setStrokeWidth(2);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                       path2.reset();

            }
        });

    }

    class SketchSheetView extends View {

        public SketchSheetView(Context context) {

            super(context);

            bitmap = Bitmap.createBitmap(820, 480, Bitmap.Config.ARGB_4444);

            canvas = new Canvas(bitmap);

            this.setBackgroundColor(Color.WHITE);
        }

        private ArrayList<DrawingClass> DrawingClassArrayList = new ArrayList<DrawingClass>();

        @Override
        public boolean onTouchEvent(MotionEvent event) {

            DrawingClass pathWithPaint = new DrawingClass();

            canvas.drawPath(path2, paint);

            if (event.getAction() == MotionEvent.ACTION_DOWN) {

                path2.moveTo(event.getX(), event.getY());

                path2.lineTo(event.getX(), event.getY());
            }
            else if (event.getAction() == MotionEvent.ACTION_MOVE) {

                path2.lineTo(event.getX(), event.getY());

                pathWithPaint.setPath(path2);

                pathWithPaint.setPaint(paint);

                DrawingClassArrayList.add(pathWithPaint);
            }

            invalidate();
            return true;
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            if (DrawingClassArrayList.size() > 0) {

                canvas.drawPath(
                        DrawingClassArrayList.get(DrawingClassArrayList.size() - 1).getPath(),

                        DrawingClassArrayList.get(DrawingClassArrayList.size() - 1).getPaint());
            }
        }
    }

    public class DrawingClass {

        Path DrawingClassPath;
        Paint DrawingClassPaint;

        public Path getPath() {
            return DrawingClassPath;
        }

        public void setPath(Path path) {
            this.DrawingClassPath = path;
        }


        public Paint getPaint() {
            return DrawingClassPaint;
        }

        public void setPaint(Paint paint) {
            this.DrawingClassPaint = paint;
        }
    }

}

Code for activity_main.xml layout file.

<?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="com.android_examples.drawingapp_android_examplescom.MainActivity"
    android:weightSum="100">


    <RelativeLayout
        android:id="@+id/relativelayout1"
        android:layout_weight="90"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

    </RelativeLayout>
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Click Here to clear drawing "
        android:id="@+id/button"
        android:layout_weight="10"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Screenshots:

Android Simple Drawing on Canvas by finger Example Tutorial

Click here to download Android Simple Drawing on Canvas by finger Example Tutorial project with source code.

11 Comments

  1. Hello sir i try code good working but click here to clear drawing is not working pls help me

  2. Add
    view.invalidate();
    inside onclicklistener of button. This will reset the canvas on button click.

  3. hey so I wanted to make a button to change the color, not of the drawing but of the what you’re going to draw next but I’m not sure what to do.

    buttonColor.setOnClickListener(new View.OnClickListener(){
    @Override
    public void onClick(View v){
    paint.setColor(Color.parseColor(“#ff0000”));
    }
    });

    because that just changes all the lines

  4. Hello, I have a question! Can we get all the points and send them in a server? Or can we only draw line with this code?

  5. Thank you for the example. When I run the application and draw on the screen, nothing get drawn on the screen. The screen is always empty. What am I missing here? Can someone please help me.

Leave a Reply

Your email address will not be published. Required fields are marked *