Code for drawing in any View with finger

To draw using finger in any LinearLayout, set the padding of the LinearLayout​ to 0 and add following code in onCreate event using add source directly block.

dv = new DrawingView(this);linear2.addView(dv); mPaint = new Paint(); 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); mPaint.setStrokeWidth(12); }

DrawingView dv; private Paint mPaint;
private Canvas mCanvas;

public class DrawingView extends View { public int width;
public int height;
private Bitmap mBitmap;
private Path mPath;
private Paint mBitmapPaint;
Context context; private Paint circlePaint; private Path circlePath;

public DrawingView(Context c) { super(c); context=c; mPath = new Path(); mBitmapPaint = new Paint(Paint.DITHER_FLAG); circlePaint = new Paint(); circlePath = new Path(); circlePaint.setAntiAlias(true); circlePaint.setColor(Color.BLUE); circlePaint.setStyle(Paint.Style.STROKE); circlePaint.setStrokeJoin(Paint.Join.MITER); circlePaint.setStrokeWidth(4f); }

@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); mCanvas = new Canvas(mBitmap); }

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawBitmap( mBitmap, 0, 0, mBitmapPaint);
canvas.drawPath( mPath, mPaint); canvas.drawPath( circlePath, circlePaint);
invalidate(); }

private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;
private void touch_start(float x, float y) { mPath.reset(); mPath.moveTo(x, y); mX = x; mY = y; }

private void touch_move(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; circlePath.reset(); circlePath.addCircle(mX, mY, 30, Path.Direction.CW); } }
private void touch_up() { mPath.lineTo(mX, mY); circlePath.reset();
mCanvas.drawPath(mPath, mPaint);
mPath.reset(); }

@Override public boolean onTouchEvent(MotionEvent event) {
float x = event.getX(); float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: touch_start(x, y); invalidate(); break;
case MotionEvent.ACTION_MOVE: touch_move(x, y); invalidate(); break;
case MotionEvent.ACTION_UP: touch_up(); invalidate(); break; } return true; }

Note that in this code linear2 is the ID of the LinearLayout in which Drawing View is added. Change it as per the ID of your LinearLayout.

To share the image drawn in LinearLayout using finger, add following code in onCreate event right after the above code:

private void storeImage(Bitmap image) { pictureFile = new + "/image.jpg");
if (pictureFile == null) { Log.d("MainActivity", "Error creating media file, check storage permissions: ");
return; } try { fos = new; image.compress(Bitmap.CompressFormat.PNG, 90, fos);
fos.close(); } catch ( e) { Log.d("MainActivity", "File not found: " + e.getMessage()); } catch ( e) { Log.d("MainActivity", "Error accessing file: " + e.getMessage());

Intent iten = new Intent(android.content.Intent.ACTION_SEND);
iten.putExtra(Intent.EXTRA_STREAM, Uri.fromFile(new + "/image.jpg")));
startActivity(Intent.createChooser(iten, "Send image"));

private Bitmap getBitmapFromView(View view) { Bitmap returnedBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(),Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(returnedBitmap); bgDrawable =view.getBackground();
if (bgDrawable!=null) { bgDrawable.draw(canvas); } else{ canvas.drawColor(Color.WHITE); }
return returnedBitmap;

After this add a Button in VIEW area, which will act as share button, and onButtonClick event, add following code:


In this way you can draw with your finger and share the image.

In order to clear the drawing, add a new Button in VIEW area. In LOGIC area, in onClick event for that button, use add source directly block to put following code:

mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

Example of an app which can be used to draw over a pic from gallery, and then share it.


  1. How to clear the canvas? And which canvas?

  2. Amazing job like always. Help please! Is that possible get the current location in a webview map?

    1. It needs permissions:

      You can use the code from here:

      And add permissions after exporting source code, by using AIDE or Android Studio.

  3. Great tutorial. Thanks. Just one question. Is some way to keep the same drawing on layout for the next time when you open the app. Thanks a lot for the ansfer.

  4. can you help can i do this drawing in any View with finger to fireware?

    Thank you very much...

  5. This comment has been removed by the author.

  6. How to write text on image and save

  7. How would I make a more advanced version of this like to add layers and blending properties also how would you make diffrent brushes and color picker

  8. I am making an app in which I want to import photos from the directories via buttons and the user can move them in the canvas area before it gets saved to canvas as much like the selection tool in Windows....I know the code for this would be long but is there something for it?Thanks

  9. I am trying to make an app that uses user generated content. Is there anyway to save the image the user creates into a database to use later? I am using 3 images that users make, character, car, house.

  10. Hello. It doesn't work for me.

    Duplicate method onActivityResult (int, int, Intent) in type MainActivity

    Any solution?

  11. Hello. It doesn't work for me.

    Duplicate method onActivityResult (int, int, Intent) in type MainActivity

    Any solution?

  12. Hi bro, good code.

    It's possible change size of the imagem?


Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

Firebase auth in Sketchware for Login Activity

Simple car racing android game in Sketchware

Admob rewarded video Ads in Sketchware