Draw paint in free hand and clear paint button click

1. ACTIVITY

import android.app.Activity;
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.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RelativeLayout;


public class MainActivity extends Activity {

private RelativeLayout relativelayout;

// Instance variables
private Paint mPaint, mBitmapPaint;
private MyView mView;
private Bitmap mBitmap;
private Canvas mCanvas;
private Path mPath;
private Button ClearPaint;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

relativelayout = (RelativeLayout) findViewById(R.id.item);
ClearPaint = (Button) findViewById(R.id.ClearPaint);
ClearPaint.setOnClickListener(new OnClickListener() {

public void onClick(View v) {
mBitmap.eraseColor(Color.TRANSPARENT);
mPath.reset();
mView.invalidate();
}
});

DisplayMetrics metrics = getBaseContext().getResources().getDisplayMetrics();
int w = metrics.widthPixels;
int h = metrics.heightPixels;

System.out.println(" width " + w);
System.out.println(" height " + h);

mView = new MyView(this, w, h);
mView.setDrawingCacheEnabled(true);

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(5);

relativelayout.addView(mView);
}

// //////////******************* Pinting view *******************///////////////////

public class MyView extends View {
// int bh = originalBitmap.getHeight();
// int bw = originalBitmap.getWidth();

public MyView(Context c, int w, int h) {
super(c);
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
// Bitmap mBitmap =
// Bitmap.createScaledBitmap(originalBitmap,200,200,true);
mCanvas = new Canvas(mBitmap);
mPath = new Path();
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
mBitmapPaint
.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));
}

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

@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.TRANSPARENT);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawPath(mPath, mPaint);
}

// //////************touching evants for painting**************///////
private float mX, mY;
private static final float TOUCH_TOLERANCE = 5;

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;
}
}

private void touch_up() {
mPath.lineTo(mX, mY);
// commit the path to our offscreen
mCanvas.drawPath(mPath, mPaint);
// kill this so we don't double draw
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;
} // end of touch events for image
}// end MyView
}

2. LAYOUT

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:id="@+id/item"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:src="@drawable/dog" />

        </RelativeLayout>        

         <Button
             android:id="@+id/ClearPaint"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_alignParentBottom="true"
             android:layout_alignParentLeft="true"
             android:layout_weight="1"
             android:text="ClearPaint" />
</RelativeLayout>

3. OUTPUT

Draw paint by free hand

 Click Clearpaint button Paint is Clear

11 comments:

Rahul said...

Can u show me how undo and redo is done on ur same code..

NagarjunaReddy said...

see update new Article Paint undo and redo example.

Unknown said...

Thank u very much for your update...
Actually i have one more issue, I am not able to erase line that i drawn on the canvas. Erasing the line in one go is done but i want to erase line in the same manner as we do with the rubber in out notebook.

Rahul said...

Thanks for your update...
Actually i have one more issue..
I am not able to erase line drawn in the canvas. Erasing the entire line is done, but i want to erase line in the same manner that we do while erasing something written on our notebook..

Anonymous said...

Those are good tutorials...I am looking for a tutorial that combines clear all, erase, undo and redo in one single app. Every where I have looked no one has the answer for this...can you help me with that?

Anonymous said...

I am not geting the background image.It is just displaying the view.I stored my image in drawable folder.

bhargav said...

Hi Nagarjuna...Excellent tutorial...it's very useful to me...thank you for sharing your thought and your code..:)..i am expecting more tutorials from you.

NagarjunaReddy said...

Thanks for complement! happy to help you...

Anonymous said...

Hi Nagarjuna,

Good tutorial, I found it very easy to understand. Great work.

I am follow this code and implemented the same, in android 2.3 devices it runs well. While try to run same on android 4.0 and higher version it show black patch on drawing area.

I have explore the reason for the same and solve it.
I just replace

canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);

with

canvas.drawBitmap(mBitmap, 0, 0, null);

And it run wells in all devices.

Thank you,
Chetan

NagarjunaReddy said...

Thank you for the information Chetan Bhoyar...........;

Anonymous said...

Those who do not know where their online advertising agency is headed, how they will find clients and how they can
cover overhead should not start this type of business, according to Tribble Ad Agency.

You may wish to include audio and video clips on your website but these clips should appeal
to the target audience. This approach is likely to render a greater
amount you are selling.

Here is my blog - Seo Expert London

Select DateRange UsingRangePicker.

  /* * This Method is for select range from picker. * */ private fun selectDateRangeUsingRangePicker () { pageNumber = 1 val displ...