Android Draw Line With Finger

Drawing on finger Touch

This article will guide you through the process of creating paths(drawing with your fingers) on the screen.

The first 2 buttons at the top handles the thickness of the line you can create. 3rd button handles the selection of color. 4th is to undo any path you want to erase. Bottom button is to reset the view. Above the reset button are the coordinates represents the touchdown of the finger, movement of the finger and removing the finger respectively.

I am using a ArrayLis t here to save all the paths that are being created so that we can remove them when undo is clicked.

Detecting Touch

To detect the touch i.e. touching the screen, moving finger on it and removing the finger, we will override onTouchEvent() and we can detect the action given by this MotionEvent. We only want to check for 3 events for this as shown.The method will look like this.

          @Override
public boolean onTouchEvent( MotionEvent event) {                      // Get the coordinate (x,y) for the current status of event.
            float x=event.getX();
            float y=event.getY();                      if(event.getAction() == MotionEvent.ACTION_DOWN){                      ...
                                }else if(event.getAction() == MotionEvent.ACTION_MOVE){                      ...                      }else if(event.getAction()== MotionEvent.ACTION_UP){                      ...                      }                      invalidate();                      return true;
}

Here invalidate() method is used to update the UI of the view. Normally system handles all the UI updates but sometimes OS cant detect the changes that are done, so to update the UI we use invalidate().

Drawing on Screen

We draw on Canvas with the help of Paint object which will represent our fingers here. We cant access this canvas directly but we can draw on this canvas via a method onDraw(). We will override this method. We are going to create our own view for this and we are extending it with the ImageView.

This view will look something like this:

          public class CustomDrawView extends ImageView {              public CustomDrawView(Context context, @Nullable AttributeSet attrs) {
              super(context, attrs);
              }
                          private Paint getNewPaintPen(int color){
                          Paint mPaintPen =new Paint();
                                //Gives the width to the stroke.
            mPaintPen.setStrokeWidth(lineWidth);                      //To give the smoothness to the outer side of the paint.
            mPaintPen.setAntiAlias(true);                      //The colors that are higher precision than the device are   down-sampled y this flag.
            mPaintPen.setDither(true);                      //It defines the style of how you want the paint to work, other is fill style which fills the area within the s
            mPaintPen.setStyle(Paint.Style.STROKE);                      //It defines how the end of the line should look.
            mPaintPen.setStrokeCap(Paint.Cap.ROUND);                      //Set the color to the line.
            mPaintPen.setColor(color);              return mPaintPen;
                          }
                          @Override
              public boolean onTouchEvent( MotionEvent event) {
              float x=event.getX();
              float y=event.getY();
                                  if(event.getAction() == MotionEvent.ACTION_DOWN){
                                  }else if(event.getAction() == MotionEvent.ACTION_MOVE){
                                  }else if(event.getAction()== MotionEvent.ACTION_UP){
                                  }
              invalidate();
              return true;
              }
                          @Override
              protected void onDraw(Canvas canvas) {
              super.onDraw(canvas);
              }
            }

Here we created a Paint object which we are going to use to draw. Here on each call on invalidate(), onDraw is being called. We have the coordinates here, we have the paint object, now we just have to draw the line on canvas. For that we will override onDraw() method.

The coordinates we are getting from onTouchEvent, we can pass them onto Paint object as it is our representation of Line.

The first method (i.e. ACTION_DOWN) gives us the point from where the drawing will began, so we will use this point to initiate our pen with colour, width, style, other properties and we will move our PATH object 'latestPath' to these coordinates . To change these properties buttons are available.
The second method(i.e. ACTION_MOVE) gives us the updated coordinates of our fingers as they move, we are here just updating the coordinates of our PATH object 'latestPath'.
The third method(i.e. ACTION_UP) gives the end point where the finger is removed from the screen, it is the ending point of our drawing.

This is the basic functionality of how to draw with fingers.

To get the full code, refer to:

Here the main class where drawing work done is at CustomDrawView. I have a wrapper above it called CustomCanvasForDraw which is also a custom view and have additional properties such as to adjust the width, to change colour, to show the coordinates of your touch to help drawing on the CustomDraw.