unknown os platform
Android tutorial: How to erase part of bitmap image on touch | Whats-online.info
whats-online-info

Android tutorial: How to erase part of bitmap image on touch


Android
2017:03:21 / Science and Tutorials

Android tutorial: Learn how to erase part of bitmap image drawn on canvas on touch using PorterDuffXfermode programmatically. See an example





How to erase part of bitmap image on touch in android Programmatically


Today I'm going to show how to erase part of a bitmap image on touch or touch action move in android programmatically.



You can get the demo example at the end of this tutorial.

 First and foremost, we need to set up our project, and we will use our default java file (MainActivity.java) and XML file (activity_main.xml) to demonstrate this post.

MainActivity.java entire code


package info.whats_online.background; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; 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.view.MotionEvent; import android.view.View; import android.widget.LinearLayout; import android.widget.Toast; public class MainActivity extends Activity {     Bitmap bp;     Canvas bitmapCanvas;     DrawView drawImg;     LinearLayout ln1;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         ln1 = (LinearLayout) findViewById(R.id.ln1);         drawImg = new DrawView(this);         ln1.addView(drawImg);     }     public class DrawView extends View implements View.OnTouchListener {         private int x = 0;         private int y = 0;         Bitmap bitmap;         Path circlePath;         Paint circlePaint;         private final Paint paint = new Paint();         private final Paint eraserPaint = new Paint();         public DrawView(Context context){             super(context);             setFocusable(true);             setFocusableInTouchMode(true);             this.setOnTouchListener(this);             // Set background             this.setBackgroundColor(Color.CYAN);             bp = BitmapFactory.decodeResource(getResources(), R.drawable.bg);             // Set bitmap             bitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);             bitmapCanvas = new Canvas();             bitmapCanvas.setBitmap(bitmap);             bitmapCanvas.drawColor(Color.TRANSPARENT);             bitmapCanvas.drawBitmap(bp, 0, 0, null);             circlePath = new Path();             circlePaint = new Paint();             circlePaint.setAntiAlias(true);             circlePaint.setColor(Color.BLUE);             circlePaint.setStyle(Paint.Style.STROKE);             circlePaint.setStrokeJoin(Paint.Join.MITER);             circlePaint.setStrokeWidth(4f);             // Set eraser paint properties             eraserPaint.setAlpha(0);             eraserPaint.setStrokeJoin(Paint.Join.ROUND);             eraserPaint.setStrokeCap(Paint.Cap.ROUND);             eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));             eraserPaint.setAntiAlias(true);         }         @Override         public void onDraw(Canvas canvas) {                       canvas.drawBitmap(bitmap, 0, 0, paint);             bitmapCanvas.drawCircle(x, y, 30, eraserPaint);             canvas.drawPath(circlePath, circlePaint);         }         public boolean onTouch(View view, MotionEvent event) {             x = (int) event.getX();             y = (int) event.getY();             bitmapCanvas.drawCircle(x, y, 30, eraserPaint);             circlePath.reset();             circlePath.addCircle(x, y, 30, Path.Direction.CW);             int ac=event.getAction();             switch(ac){                 case MotionEvent.ACTION_UP:                     Toast.makeText(MainActivity.this, String.valueOf(x), Toast.LENGTH_SHORT).show();                     circlePath.reset();                     break;             }             invalidate();             return true;         }     } }


activity_main.xml entire code


<LinearLayout 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"     android:orientation="vertical"     android:background="#00ff00"     tools:context=".MainActivity">     <LinearLayout         android:layout_width="match_parent"         android:layout_height="300dp"         android:id="@+id/ln1"         android:orientation="vertical"         />      </LinearLayout>


Explanation
First we have created a class called DrawView that inherits the view elements from View class and implements on Touch Listener event.
Then we are going to get our bitmap image from drawable folder and draw it on canvas as shown below.

bitmap = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);

Then we are going to draw our eraser as shown below. Besides,  add a blue stroke around the circle eraser. 

 // Set eraser paint properties   eraserPaint.setAlpha(0);   eraserPaint.setStrokeJoin(Paint.Join.ROUND);   eraserPaint.setStrokeCap(Paint.Cap.ROUND);   eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));   eraserPaint.setAntiAlias(true);

Note, PorterDuffXfermode class determines how our eraser is drawn on the canvas. With PorterDuffXfermode set to Clear, it creates a transparent hole onto your bitmap image drawn on the canvas. 

We will use the onDraw method that will draw our eraser on touch leaving a transparent image.

The TouchListener function gets the location of points of touch on the android screen that determines where to draw our eraser on the canvas. On touch action down, set the eraser. On touch action move, draw the eraser that is, erase part of a bitmap image.  On touch action up, reset the eraser.

Finally, add our Custom DrawView class as a view to our LinearLayout

Thanks for your time. Subscribe to our newsletter to get the latest Android tutorials direct to your mailbox. 
Also, remember to like us on Facebook below.

Download Demo Example













You may also like:


Leave a comment












Subscribe to get replies direct to your mailbox

Submit comment