Draw beautiful diagram effortlessly on ipad. Click here to know more..

Sunday, January 15, 2012

Drawing and erasing using touch on Android

Drawing/Erasing using touch is a common feature in many mobile phone/tablet based apps. Writing code for this feature is pretty simple for android. Here are steps to do that:
  • add a custom view on which you will draw.
  • process touch event on view.
  • on touch event, record points where touch event occurred.
  • in onDraw method, draw points that were recorded.

Adding a custom view:

We will derive a class from View class for implementing drawing canvas. And we will add this to UI tree. To add this to UITree, create a LinearLayout in which the custom view will be added. The LinearLayout is declared in layout xml as:
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:id="@+id/drawPanel">
    </LinearLayout>
and from the code, add the custom view to this LinearLayout as:
public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        LinearLayout ll = (LinearLayout)findViewById(R.id.drawPanel);
        DrawPanel drawingPanel = new DrawPanel(getApplicationContext());
        ll.addView(drawingPanel);
    }
This code finds the LinearLayout object which was defined in XML and then adds an object of DrawPanel to this. The DrawPanel is the custom View class which is being used for drawing. Here is the implementation of DrawPanel


public class DrawPanel extends View { 
public DrawPanel(Context context) {
  super(context);
  points = new ArrayList();
  strokes = new ArrayList();
  paint = createPaint(Color.GREEN, 8);
 }

 @Override
 public void onDraw(Canvas c){
  super.onDraw(c);
  this.setBackgroundColor(Color.WHITE);
  for(Object obj: strokes){
   drawStroke((ArrayList)obj, c);
  }
  
  drawStroke(points, c);
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent event){
  if(event.getActionMasked() == MotionEvent.ACTION_MOVE){
   points.add(new Point((int)event.getX(), (int)event.getY()));
   invalidate();
  }
  
  if(event.getActionMasked() == MotionEvent.ACTION_UP){
   this.strokes.add(points);
   points = new ArrayList();
  }
  
  return true;
 }
 
 private void drawStroke(ArrayList stroke, Canvas c){
  if (stroke.size() > 0) {
   Point p0 = (Point)stroke.get(0);
   for (int i = 1; i < stroke.size(); i++) {
    Point p1 = (Point)stroke.get(i);
    c.drawLine(p0.x, p0.y, p1.x, p1.y, paint);
    p0 = p1;
   }
  }
 }
 
 private Paint createPaint(int color, float width){
  Paint temp = new Paint();
  temp.setStyle(Paint.Style.STROKE);
  temp.setAntiAlias(true);
  temp.setColor(color);
  temp.setStrokeWidth(width);
  temp.setStrokeCap(Cap.ROUND);
  
  return temp;
 }
 
 private Paint paint;
 private ArrayList points;
 private ArrayList strokes;
}

The above code is for drawing. With a small tweak, erasing can be implemented. While erasing, set the paint color as that of background, that's it!! 

The above code is used in Scratchpad, a drawing app for Android tablets.

21 comments:

  1. hank you very much. Simple and accessible.

    ReplyDelete
  2. Can you mail me code on swapnil_go20@yahoo.co.in ???
    I need it.

    Please do the needful...

    ReplyDelete
  3. Dang, I so need this... any chance you can tell me how to get this line to work ?
    from the on draw method for(ArrayList stroke: strokes){
    drawStroke(stroke, c);

    I get a type mismatch error on this line...

    Thanks for this code ( and fix hopefully ) Thanks.

    ReplyDelete
  4. thanks...please add more drawing samples

    ReplyDelete
  5. It 's very helpful for me! Thank you very much!

    ReplyDelete
  6. how can i do it for multitouch ?? here only single line is drawn I want to draw full area which I touch... Can anyone help me??

    ReplyDelete
  7. A well-designed custom view is much like whatever other well-designed class.It encapsulates a particular set of functionality with a simple to utilize interface,it utilizes CPU and memory efficiently, and so forth.Notwithstanding being a well-designed class,however,a custom view should:Conform to Android standards,Provide custom style-able attributes that work with Android XML layouts,Send accessibility events,Be compatible with multiple Android platforms.
    ----------------------------------------------
    hidden movie game for android

    ReplyDelete
  8. I have read your blog its very attractive and impressive. I like it your blog.

    Java Training in Chennai Core Java Training in Chennai Core Java Training in Chennai

    Java Online Training Java Online Training JavaEE Training in Chennai Java EE Training in Chennai

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. مزايا نقل الأثاث من قبل
    واحدة من أهم ميزات شركة لنقل الأثاث في الرياض ، والتي تميزت عن غيرها من الشركات المتخصصة في مجال نقل الأثاث ، حيث توفر ، كأفضل شركة لنقل الأثاث في الرياض ،شركة نقل عفش
    شركة نقل عفش من الرياض الى الامارات

    شركة نقل اثاث من الرياض الى الامارات

    شركة نقل عفش بالجبيل

    ReplyDelete
  11. EaseUS Data Recovery Pro License Code With Crack 2020


    Easeus Data Recovery Activation Key often is the biggest costless data recovery software. By using this one can recuperate arranged, removed and as well as dropped details. You can recuperate it by using a laptop or Particular Computer and detachable system speedily as well as amazingly quite simply. It quite often takes place that the facts in the drive or process is dropped due to a crash of plan or unintended deletion. Easeus data recovery 2020100 % crack with license code Free of cost Download is just one of the greatest data recovery software applications. EaseUS Data Recovery 12 Total most current version no cost Download + Pretty & cute patch is the Totally totally free Version. It is able artist that one can make use of to recover help and advice via your hard disk drive, UNIVERSAL SERIES BUS drives, memory space cards, also as other removable storage devices too. It shows to be an amazing product for each Mac in the process as windows

    ReplyDelete
  12. Waking around bird-chirpings over a vivid, new sunny morning is enjoyable. But if the chirping is accompanied by a lovey-dovey good morning message from your significant other, then it charges you up like a cup of coffee.
    Have a passion for isn't a universal need to get. It is really rather an emotion that drives mankind! And there exist plenty of methods to express this take pleasure in. Sending warm and loving good morning messages is simply one of them.
    So, in order to sparkle your wife’s day, MomJunction has amazing Romantic Good Morning Quotes For Wife. We wager your wife will be swept off her ft.

    ReplyDelete
  13. Its a indisputable fact that how wonderful a person’s day ends up really being mostly relies upon on how they started out it on the morning. It is usually for this reason why it can be important that you just begin the process of your day over a beneficial note. And what more beneficial process to do this than receiving a heartfelt good morning concept from a cherished one?!
    They're extraordinary birthday messages ranging from sweet to inspirational that one could deliver to your beloved mom to offer her a good begin the process of on the morning and enhance her chance of owning a gorgeous day. Visit for Lovely Quotes Good Morning Mother

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. I am a student, i am running my blog how2wish. I love to write on several social topics like Funny Graduation Announcements, Everyday Quotes and much more.

    ReplyDelete
  16. I'm a teacher and I read the web.April Fool Quotes. I love to write on several social topics like Funny Graduation Announcements, Everyday Quotes and much more.

    ReplyDelete
  17. I am a bloger and creat web link. april fools jokes text messages. I love to write on several social topics like Funny Graduation Announcements, Everyday Quotes and much more.

    ReplyDelete