How to clear the canvas in android using button?

Question

I want to clear all the drawn content in the canvas .I tried several ways and none was clicked for me yet.How to clear all the content in canvas android using clear button?

I have clear button to clear the content in canvas android.But I clearly did not know how to delete the content.I am having undo and redo button which is working fine except this clear button.Could some one tell me how to use this clear button and delete the content? My code is here.

public class MainActivity extends Activity {

    private ArrayList<Path> undonePaths = new ArrayList<Path>();
    private ArrayList<Path> paths = new ArrayList<Path>();
    /*
     * private Button alphabetsButton; private Button lettersButton; private
     * Button clearButton;
     */
    private FrameLayout frmLayout;
    Canvas canvas;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        frmLayout = (FrameLayout) findViewById(R.id.frameLayout);
        final DrawingPanel dp = new DrawingPanel(MainActivity.this);
        frmLayout.addView(dp);

        /*
         * alphabetsButton=(Button) findViewById(R.id.button1);
         * lettersButton=(Button) findViewById(R.id.button2);
         * 
         * 
         * 
         * alphabetsButton.setOnClickListener(new OnClickListener() {
         * 
         * @Override public void onClick(View v) { // TODO Auto-generated method
         * stub startActivity(new Intent(MainActivity.this,Letters.class));
         * finish(); } });
         */

        ((Button) findViewById(R.id.Clear)).setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                paths = new ArrayList<Path>();
                paths.clear();

            }
        });

        ((Button) findViewById(R.id.Undo)).setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if (paths.size() > 0) {
                    undonePaths.add(paths.remove(paths.size() - 1));
                    dp.invalidate();
                }
            }
        });

        ((Button) findViewById(R.id.Redo)).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if (undonePaths.size() > 0) {
                    paths.add(undonePaths.remove(undonePaths.size() - 1));
                    dp.invalidate();
                }
            }
        });
    }

    class DrawingPanel extends View implements OnTouchListener {

        private Canvas mCanvas;
        private Path mPath;
        private Paint mPaint, circlePaint, outercirclePaint;
        private Bitmap mBitmap;
        private int width;
        private int height;

        // private ArrayList<Path> undonePaths = new ArrayList<Path>();
        private float xleft, xright, xtop, xbottom;

        public DrawingPanel(Context context) {
            super(context);
            setFocusable(true);
            setFocusableInTouchMode(true);
            this.setOnTouchListener(this);
            circlePaint = new Paint();
            mPaint = new Paint();
            outercirclePaint = new Paint();
            outercirclePaint.setAntiAlias(false);
            circlePaint.setAntiAlias(false);
            mPaint.setAntiAlias(false);
            mPaint.setColor(0xFF000000);
            outercirclePaint.setColor(0x44FFF000);
            circlePaint.setColor(0xF57F35);
            outercirclePaint.setStyle(Paint.Style.FILL_AND_STROKE);
            circlePaint.setStyle(Paint.Style.FILL);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeJoin(Paint.Join.MITER);
            mPaint.setStrokeCap(Paint.Cap.ROUND);
            mPaint.setStrokeWidth(20);
            outercirclePaint.setStrokeWidth(15);
            mCanvas = new Canvas();
            mPath = new Path();
            paths.add(mPath);
        }

        public void colorChanged(int color) {
            mPaint.setColor(color);
        }

        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
        }

        @Override
        protected void onDraw(Canvas canvas) {

            for (Path p : paths) {
                canvas.drawPath(p, mPaint);
            }

        }

        private float mX, mY;
        private static final float TOUCH_TOLERANCE = 0;

        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 = new Path();
            paths.add(mPath);
        }

        @Override
        public boolean onTouch(View arg0, MotionEvent event) {
            float x = event.getX();
            float y = event.getY();

            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // if (x <= cx+circleRadius+5 && x>= cx-circleRadius-5) {
                // if (y<= cy+circleRadius+5 && cy>= cy-circleRadius-5){
                // paths.clear();
                // return true;
                // }
                // }
                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;
        }
    }

}

Answer 1

Looks like the paths array list is persisting, try this code:

private ArrayList<Path> _graphics = new ArrayList<Path>()

@Override
public void onClick(View v) {
      clear();
}


Bitmap mBitmap; 
Paint mPaint;
Canvas mCanvas;
int width,height;

public void clear()
{
   _graphics.removeAll(_graphics);
   mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
   path = new Path();   
   invalidate();
}

Answer 2

may you should avoid to instantiate paths again before calling clear(), otherwise you'll call clear() on an empty ArrayList:

((Button) findViewById(R.id.Clear)).setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            if (paths != null)
               paths.clear();
            if (dp != null)
               dp.invalidate();
        }
    });

Answer 3

You can try this:

@Override
public void onClick(DialogInterface dialog, int which) {
    mCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
    //paths.clear();
    //.destroyDrawingCache();
    mPath.reset();
    dp.invalidate();
}