FingerTouch Drawing Signature with different colors in Android

Hello Friends,

Today i am going to show you the tutorial of drawing or creating your own signature or simply draw/paint a line using finger with different colors and save it as image. You will be able to draw,clear,save your signature in this tutorial. You will be able to draw a picture as well.

Here i am going to show you the steps to create finger touch view.

Step 1: Create Custom View

The first thing we need to do is to create CustomView by creating a class and extends View in it.

 import android.content.Context;  
 import android.util.AttributeSet;  
 import android.view.View;  
 public class Signature extends View {  
     public Signature(Context context, AttributeSet attrs)  
       {   
          super(context, attrs);    
       }   
    }  

This view you can add in your Activity or you can create separate class called Signature . You can add it inside of a layout and, if you wish to expand on this example, you could add some buttons for colors, etc…

 <com.example.signaturedemo.DrawingView  
     android:id="@+id/drawing"  
     android:layout_width="fill_parent"  
     android:layout_height="0dp"  
     android:layout_marginBottom="3dp"  
     android:layout_marginLeft="5dp"  
     android:layout_marginRight="5dp"  
     android:layout_marginTop="3dp"  
     android:layout_weight="1"  
     android:background="#FFFFFFFF" />  

Now, if we run this, our application will run the activity and create the layout with our custom view.

But this is not enough we need to write the code for drawing line on it. So, lets see the code.

Step 2: Using the onTouch event to draw on a canvas

We need to:

• Set a paint style
• Listen for a touch event
• Create a new starting point when we touch the screen
• Draw a path when we move our finger
• Redraw the view when the onTouchEvent fires.

So, lets write the code as below:

 public class Signature extends View {  
  private static final float STROKE_WIDTH = 5f;  
  private static final float HALF_STROKE_WIDTH = STROKE_WIDTH / 2;  
  private Path m_path = new Path();  
  private float m_lastTouchX;  
  private float m_lastTouchY;  
  private final RectF m_dirtyRect = new RectF();  
  public Signature(Context context, AttributeSet attrs) {  
   super(context, attrs);  
   m_paint.setAntiAlias(true);  
   new ColorPickerDialog(context, new OnColorChangedListener() {  
   public void colorChanged(int color) {  
    m_paint.setColor(color);  
    mColor = color;  
   }  
   }, 0xFFFF0000).show();  
   m_paint.setStyle(Paint.Style.STROKE);  
   m_paint.setStrokeJoin(Paint.Join.ROUND);  
   m_paint.setStrokeWidth(STROKE_WIDTH);  
  }  

Now all that is left is to make sure that we add points to the path when we move our finger over the screen. Edit the onTouchEvent like below:

  @Override  
  public boolean onTouchEvent(MotionEvent event) {  
   float m_eventX = event.getX();  
   float m_eventY = event.getY();  
   switch (event.getAction()) {  
   case MotionEvent.ACTION_DOWN:  
   m_path.moveTo(m_eventX, m_eventY);  
   m_lastTouchX = m_eventX;  
   m_lastTouchY = m_eventY;  
   return true;  
   case MotionEvent.ACTION_MOVE:  
   case MotionEvent.ACTION_UP:  
   resetDirtyRect(m_eventX, m_eventY);  
   int historySize = event.getHistorySize();  
   for (int i = 0; i < historySize; i++) {  
    float historicalX = event.getHistoricalX(i);  
    float historicalY = event.getHistoricalY(i);  
    expandDirtyRect(historicalX, historicalY);  
    m_path.lineTo(historicalX, historicalY);  
   }  
   m_path.lineTo(m_eventX, m_eventY);  
   break;  
   default:  
   debug("Ignored touch event: " + event.toString());  
   return false;  
   }  
   invalidate((int) (m_dirtyRect.left - HALF_STROKE_WIDTH),  
    (int) (m_dirtyRect.top - HALF_STROKE_WIDTH),  
    (int) (m_dirtyRect.right + HALF_STROKE_WIDTH),  
    (int) (m_dirtyRect.bottom + HALF_STROKE_WIDTH));  
   m_lastTouchX = m_eventX;  
   m_lastTouchY = m_eventY;  
   return true;  
  }  
            /**  
   * This method checks the earlier rectangle.  
   *   
   * @param historicalX  
   * @param historicalY  
   */  
  private void expandDirtyRect(float historicalX, float historicalY) {  
   if (historicalX < m_dirtyRect.left) {  
   m_dirtyRect.left = historicalX;  
   } else if (historicalX > m_dirtyRect.right) {  
   m_dirtyRect.right = historicalX;  
   }  
   if (historicalY < m_dirtyRect.top) {  
   m_dirtyRect.top = historicalY;  
   } else if (historicalY > m_dirtyRect.bottom) {  
   m_dirtyRect.bottom = historicalY;  
   }  
  }  
  /**  
   * This method resets rectangle.  
   *   
   * @param eventX  
   * @param eventY  
   */  
  private void resetDirtyRect(float eventX, float eventY) {  
   m_dirtyRect.left = Math.min(m_lastTouchX, eventX);  
   m_dirtyRect.right = Math.max(m_lastTouchX, eventX);  
   m_dirtyRect.top = Math.min(m_lastTouchY, eventY);  
   m_dirtyRect.bottom = Math.max(m_lastTouchY, eventY);  
  }  

onTouch method is called when a touch event is dispatched to a view. This allows a listeners to get chance to respond before the target view.

   public boolean onTouch(MotionEvent event)      

• event - is object of MotionEvent containing full information about event

In the code above, is first store the X and Y coordinates of the event (the touch or the moving of your finger) in variables. We then put in a switch statement to identify the type of event that was fired. In this case we need to create a new starting point for the path if the event is of type MotionEvent.ACTION_DOWN, which means we placed our finger on the screen, and connect points on MotionEvent.ACTION_MOVE which is when we moved our finger.

Next, We save the drawing into sdcard as an image. 

Output:

Download Source code