Sometimes we may need to create scratchpad in our Android application.
We can create it on CANVAS
We can create it on CANVAS
First, create a main layout file for your activity.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawing_question"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="40dp"
android:layout_marginRight="30dp"
android:background="#FFFFFF"
android:orientation="horizontal" >
<com.swap.handdrawing.DrawingView
android:id="@+id/drawing"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginBottom="10dp"
android:layout_marginRight="5dp"
android:layout_weight="1" >
</com.swap.handdrawing.DrawingView>
<LinearLayout
android:id="@+id/eraserView"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:layout_marginBottom="10dp"
android:background="@drawable/custom_edit_text"
android:padding="5dp" >
<ImageView
android:id="@+id/eraser"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:src="@drawable/eraser" />
</LinearLayout>
</LinearLayout>
Next, create DrawingView class extending View & implementing OnTouchListener.
package com.swap.handdrawing;
import java.util.ArrayList;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.util.Pair;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
public class DrawingView extends View implements OnTouchListener {
private Canvas m_Canvas;
private Path m_Path;
private Paint m_Paint;
ArrayList<Pair> paths = new ArrayList<Pair>();
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;
public static boolean isEraserActive = false;
public DrawingView(Context context, AttributeSet attr) {
super(context);
setFocusable(true);
setFocusableInTouchMode(true);
setBackgroundColor(Color.WHITE);
this.setOnTouchListener(this);
onCanvasInitialization();
}
public void onCanvasInitialization() {
m_Paint = new Paint();
m_Paint.setAntiAlias(true);
m_Paint.setDither(true);
m_Paint.setColor(Color.parseColor("#000000"));
m_Paint.setStyle(Paint.Style.STROKE);
m_Paint.setStrokeJoin(Paint.Join.ROUND);
m_Paint.setStrokeCap(Paint.Cap.ROUND);
m_Paint.setStrokeWidth(2);
m_Canvas = new Canvas();
m_Path = new Path();
Paint newPaint = new Paint(m_Paint);
paths.add(new Pair(m_Path, newPaint));
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}
public boolean onTouch(View arg0, 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;
}
@Override
protected void onDraw(Canvas canvas) {
for (Pair p : paths) {
canvas.drawPath(p.first, p.second);
}
}
private void touch_start(float x, float y) {
if (isEraserActive) {
m_Paint.setColor(Color.WHITE);
m_Paint.setStrokeWidth(6);
Paint newPaint = new Paint(m_Paint); // Clones the mPaint object
paths.add(new Pair(m_Path, newPaint));
} else {
m_Paint.setColor(Color.BLACK);
m_Paint.setStrokeWidth(2);
Paint newPaint = new Paint(m_Paint); // Clones the mPaint object
paths.add(new Pair(m_Path, newPaint));
}
m_Path.reset();
m_Path.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) {
m_Path.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
mX = x;
mY = y;
}
}
private void touch_up() {
m_Path.lineTo(mX, mY);
// commit the path to our offscreen
m_Canvas.drawPath(m_Path, m_Paint);
// kill this so we don't double draw
m_Path = new Path();
Paint newPaint = new Paint(m_Paint); // Clones the mPaint object
paths.add(new Pair(m_Path, newPaint));
}
}
Then access DrawingView in your MainActivity. Toggle between eraser & pencil by changing isEraserActive & it’s image.
package com.swap.handdrawing;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
public class MainActivity extends Activity {
private ImageView eraser;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final DrawingView drawingView = (DrawingView) findViewById(R.id.drawing);
eraser = (ImageView) findViewById(R.id.eraser);
eraser.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (drawingView.isEraserActive) {
drawingView.isEraserActive = false;
eraser.setImageResource(R.drawable.eraser);
} else {
drawingView.isEraserActive = true;
eraser.setImageResource(R.drawable.pencil);
}
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
You can get resources & drawables used in above tutorial by downloading source code. You can add colors to your drawing by changing color of path.
Any suggestions are always welcome.Download Source Code
