Drawing app in Sketchware

<<click to go to the video

Drawing app in Sketchware

Description:In this video, I have shown how to make a drawing app in sketchware within your smartphone without any programming language. I hope you will like it, enjoy drawing.

thank you.

TO OUR YOUTUBE CHANNEL

Video algorithm

step 1: open sketchware app.
step 2: create an app.
step 3: name the app(eg. drawing app).
step 4: put a linear.
step 5: change its height to match_parent and id to other than linear1
step 6: put another linear.
step 7: change orientation of previous linear to vertical.
step 8: again put another linear.
step 9:change the id of lower linear to linear1(compulsory).
step 10: change the background resource of first and second linear.
step 11: change weight of linear1 to 1.
step 12: put a button in the upper linear.
step 13: change gravity of upper linear to right.
step 14: change padding to 0.
step 15: change button text to "clean".
step 16: go to onCreate
step 17: put a add source directly block and paste the following code:

dv = new DrawingView(this); linear1.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; }

step 18: go to button onClick and paste the following code in add source directly.

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

step 15: run the app

step 16: save and exit project

step 17: test your app