Drawing Pad or Signature Pad For Android Using Xamarin.Forms

Now you can see in solution explorer several projects for different platforms are created. One is Portal project that is common for all the platforms, another one is Android, this is specifically for Android OS, another one is iOS specifically for iOS OS.

Here I am going to explain how to create a drawing app for Android, so let's start.

So here we will write those functions in Android project.

• First, we have to write code for drawing, for this add one class to android project and give name as ClassDrawing (To add class right click on android project from the menu select Add -> class)
  
  
• After creating class add namespaces as below,
  
  1. using Android.Views;
  2. using Android.Graphics;
  3. using Android.Content;
  4. using System;

• After adding namespces, make this class as public and inherit from view class and write one constructor for this class with context parameter and inherit from base(context) as shown below,
  
  1. public class ClassDrawing : View
  2. {
  3. public ClassDrawing(Context context): base(context)
  4. {
     
  5. }
  6. 
     
  7. }
  Now let’s add some global variables as below,
  
  1. public class ClassDrawing : View
  2. {
  3. public Color LineColor { get; set; }
  4. public string ImageFilePath { get; set; }
  5. public float PenWidth { get; set; }
  7. private Path DrawPath;
  8. private Paint DrawPaint;
  9. private Paint CanvasPaint;
  10. private Canvas DrawCanvas;
  11. private Bitmap CanvasBitmap;
  13. private int w, h;
  14. private Bitmap _image;
  16. public ClassDrawing(Context context): base(context)
  17. {
      
  18. }
  19. }

Then lets add some default color, styles to this drawing pad as shown below inside constructor,

Next override some functions as shown below,

Then let’s add function for clearing the drawing pad as shown below,

Next we have to return this drawn image so that we can get the file so we have to create a function as below to return a drawn image,

Next create a function to load file which is created, file path we will get it from variable ImageFilePath. Function as shown below,

Note

Here are the 3 variable I have mentioned as public to access from outside that are LineColor, ImageFilePath, PenWidth

Let's create another class to render this drawing into portable project, I have given name for this class as ClassImageRenderer, before writing functionality into this class let's create a class in portable project and add some properties to get and set from ClassImageRenderer from android project. I have given a name as ImageEditor and inherit this class from Image class, the class as shown below,

Next let’s add functionality to the class ClassImageRenderer which I created on Android project, first export those properties which we have added in previous class ImageEditor for that write the below code before namespace DrawingPad.Droid