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) { java.io.File pictureFile = new java.io.File(getExternalCacheDir() + "/image.jpg");
if (pictureFile == null) { Log.d("MainActivity", "Error creating media file, check storage permissions: ");
return; } try {
java.io.FileOutputStream fos = new java.io.FileOutputStream(pictureFile); image.compress(Bitmap.CompressFormat.PNG, 90, fos);
fos.close(); } catch (java.io.FileNotFoundException e) { Log.d("MainActivity", "File not found: " + e.getMessage()); } catch (java.io.IOException e) { Log.d("MainActivity", "Error accessing file: " + e.getMessage());
}

Intent iten = new Intent(android.content.Intent.ACTION_SEND);
iten.setType("*/*");
iten.putExtra(Intent.EXTRA_STREAM, Uri.fromFile(new java.io.File(getExternalCacheDir() + "/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);
android.graphics.drawable.Drawable bgDrawable =view.getBackground();
if (bgDrawable!=null) { bgDrawable.draw(canvas); } else{ canvas.drawColor(Color.WHITE); }
view.draw(canvas);
return returnedBitmap;


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

storeImage(getBitmapFromView(linear2));


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.

Comments

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

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

    ReplyDelete
    Replies
    1. It needs permissions:

      You can use the code from here: https://stackoverflow.com/questions/1513485/how-do-i-get-the-current-gps-location-programmatically-in-android

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

      Delete
  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.

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

    Thank you very much...

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. How to write text on image and save

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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.

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

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

    Any solution?

    http://kepkezelo.com/viewer.php?file=fpi8f9mp919s0w3l4omo.png

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

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

    Any solution?

    https://img0.imguh.com/2019/10/01/Screenshot_20191001-2128422c5b75713a795da8.png

    ReplyDelete
  12. Hi bro, good code.

    It's possible change size of the imagem?

    ReplyDelete
  13. Ist there a was to disable the little circle?

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware