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.
Thnks
ReplyDeleteHow to clear the canvas? And which canvas?
ReplyDeleteAmazing job like always. Help please! Is that possible get the current location in a webview map?
ReplyDeleteIt needs permissions:
DeleteYou 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.
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.
ReplyDeletecan you help me....how can i do this drawing in any View with finger to fireware?
ReplyDeleteThank you very much...
This comment has been removed by the author.
ReplyDeleteNice work nice code
ReplyDeleteHow to write text on image and save
ReplyDeleteHow 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
ReplyDeleteI 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
ReplyDeleteI 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.
ReplyDeleteHello. It doesn't work for me.
ReplyDeleteDuplicate method onActivityResult (int, int, Intent) in type MainActivity
Any solution?
http://kepkezelo.com/viewer.php?file=fpi8f9mp919s0w3l4omo.png
Hello. It doesn't work for me.
ReplyDeleteDuplicate method onActivityResult (int, int, Intent) in type MainActivity
Any solution?
https://img0.imguh.com/2019/10/01/Screenshot_20191001-2128422c5b75713a795da8.png
Hi bro, good code.
ReplyDeleteIt's possible change size of the imagem?
Thanks 😃
ReplyDeleteHow can I change colors?
ReplyDeleteIst there a was to disable the little circle?
ReplyDelete