Monday, 18 November 2013

Simple drawing example in Android

This post is a simple drawing example using Canvas, BitMap, Paint and Path classes from Android.
Code:

MainActivity.java

import java.util.ArrayList;

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.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class DrwaingActivity extends Activity {

 View mView; 
 private Paint mPaint;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  LinearLayout layout = (LinearLayout) findViewById(R.id.myDrawing);
  mView = new DrawingView(this);
  layout.addView(mView, new LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.MATCH_PARENT));
  init(); 
 }

 private void init() {
  mPaint = new Paint();
  mPaint.setDither(true);
  mPaint.setColor(0xFFFFFF00);
  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStrokeJoin(Paint.Join.ROUND);
  mPaint.setStrokeCap(Paint.Cap.ROUND);
  mPaint.setStrokeWidth(3);
 }

 class DrawingView extends View {
  private Path path;
  private Bitmap mBitmap;
  private Canvas mCanvas;

  public DrawingView(Context context) {
   super(context);
   path = new Path();
   mBitmap = Bitmap.createBitmap(820, 480, Bitmap.Config.ARGB_8888);
   mCanvas = new Canvas(mBitmap);
   this.setBackgroundColor(Color.BLACK);
  }

  private ArrayList<PathWithPaint> _graphics1 = new ArrayList<PathWithPaint>();

  @Override
  public boolean onTouchEvent(MotionEvent event) {
   PathWithPaint pp = new PathWithPaint();
   mCanvas.drawPath(path, mPaint);
   if (event.getAction() == MotionEvent.ACTION_DOWN) {
    path.moveTo(event.getX(), event.getY());
    path.lineTo(event.getX(), event.getY());
   } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
    path.lineTo(event.getX(), event.getY());
    pp.setPath(path);
    pp.setmPaint(mPaint);
    _graphics1.add(pp);
   }
   invalidate();
   return true;
  }

  @Override
  protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   if (_graphics1.size() > 0) {
    canvas.drawPath(
      _graphics1.get(_graphics1.size() - 1).getPath(),
      _graphics1.get(_graphics1.size() - 1).getmPaint());
   }
  }
 }
}


MainLayout.java

import android.graphics.Paint;
import android.graphics.Path;

public class PathWithPaint {
 private Path path;

 public Path getPath() {
  return path;
 }

 public void setPath(Path path) {
  this.path = path;
 }

 private Paint mPaint;

 public Paint getmPaint() {
  return mPaint;
 }

 public void setmPaint(Paint mPaint) {
  this.mPaint = mPaint;
 }
}


activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/myDrawing"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

</LinearLayout>


Sample Screen Shot


Drawing example with Color Picker



I hope this post is useful. kindly share your feedback as comment here.


Thank You