Previewing while Drawing with Canvas in Android

After my site being gone from the web yesterday, its back :) it happens to be a blogger bug. Anyway i got a lot of request on how to preview your drawing, and continue our Drawing with Canvas series, here is how to preview while drawing.

Notes
• The files are uploaded in http://goo.gl/ecHpE
• The project was build in IntelliJ and it should be easy to import to Eclipse

What Do I Need
DrawingSurface
public class DrawingSurface extends SurfaceView implements SurfaceHolder.Callback {
  public boolean isDrawing = true;
  public DrawingPath previewPath;

  private Handler previewDoneHandler = new Handler(){
    @Override
    public void handleMessage(Message msg) {
      isDrawing = false;
    }
  };

  class DrawThread extends Thread{
    @Override
    public void run() {
      commandManager.executeAll(c,previewDoneHandler);
      previewPath.draw(c);
    }
  };
}


Drawing Activity
public class DrawingActivity extends Activity implements View.OnTouchListener{
  public void onCreate(Bundle savedInstanceState) {
    drawingSurface.previewPath = new DrawingPath();
    drawingSurface.previewPath.path = new Path();
    drawingSurface.previewPath.paint = getPreviewPaint();
    ...
  }
  private Paint getPreviewPaint(){
    final Paint previewPaint = new Paint();
    previewPaint.setColor(0xFFC1C1C1);
    previewPaint.setStyle(Paint.Style.STROKE);
    previewPaint.setStrokeJoin(Paint.Join.ROUND);
    previewPaint.setStrokeCap(Paint.Cap.ROUND);
    previewPaint.setStrokeWidth(3);
    return previewPaint;
  }

  public boolean onTouch(View view, MotionEvent motionEvent) {
    if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){
      currentBrush.mouseDown(drawingSurface.previewPath.path, motionEvent.getX(), motionEvent.getY());
    }else if(motionEvent.getAction() == MotionEvent.ACTION_MOVE){
      currentBrush.mouseMove(drawingSurface.previewPath.path, motionEvent.getX(), motionEvent.getY());
    }else if(motionEvent.getAction() == MotionEvent.ACTION_UP){
      currentBrush.mouseUp(drawingSurface.previewPath.path, motionEvent.getX(), motionEvent.getY());
      drawingSurface.previewPath.path = new Path();
    }
  }
}



Quick Explanation

Ads from Amazon:

Explanation
public boolean isDrawing = true;
Lets introduce something that would tell our app if we are drawing or not.

public DrawingPath previewPath;
Here we create another DrawingPath which would only do the preview for us

private Handler previewDoneHandler = new Handler(){
  @Override
  public void handleMessage(Message msg) {
    isDrawing = false;
  }
};
Here we create a handler to tell our app to stop drawing at the end of the last path it has drawn (this function should named differently, ahhah)

class DrawThread extends Thread{
  @Override
  public void run() {
    commandManager.executeAll(c,previewDoneHandler);
    previewPath.draw(c);
  }
};
Here you draw the preview path and pass our complete handler to stop our app from drawing over and over

public void onCreate(Bundle savedInstanceState) {
  drawingSurface.previewPath = new DrawingPath();
  drawingSurface.previewPath.path = new Path();
  drawingSurface.previewPath.paint = getPreviewPaint();
  ...
private Paint getPreviewPaint(){
  ...
}
Here we just initialize the previewPath with a different path (a kinda gray paint, 0xFFC1C1C1)

public boolean onTouch(View view, MotionEvent motionEvent) {
  if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){
nbsp;   currentBrush.mouseDown(drawingSurface.previewPath.path, motionEvent.getX(), motionEvent.getY());
  }else if(motionEvent.getAction() == MotionEvent.ACTION_MOVE){
    currentBrush.mouseMove(drawingSurface.previewPath.path, motionEvent.getX(), motionEvent.getY());
  }else if(motionEvent.getAction() == MotionEvent.ACTION_UP){
    currentBrush.mouseUp(drawingSurface.previewPath.path, motionEvent.getX(), motionEvent.getY());
    drawingSurface.previewPath.path = new Path();
  }
}
Here we use the concept we understood from brushes Read the explanation here

Hope this helps :)