Android Tutorial Signature Capture Tutorial

Several developers were interested in adding support for signature capturing in their Android application.
The attached code module makes it easy to capture the signature and save it to a file.

You should create a layout similar to the above layout.
The drawing is done on a Panel view.

Load the layout (or create it programmatically), initialize the canvas object which does the actual drawing and initialize the SignatureData object:

Sub Globals
    Dim Panel1 As Panel
    Dim Canvas1 As Canvas
    Dim SD As SignatureData 'This object holds the data required for SignatureCapture
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    Canvas1.Initialize(Panel1)
    SD.Initialize
    SD.Canvas = Canvas1
    SD.Panel = Panel1
    SD.SignatureColor = Colors.Black
    SD.SignatureWidth = 5dip 'Stroke width
End Sub

Add events for the panel Touch event and for the buttons. These events call the SignatureCapture module.

Sub Panel1_Touch (Action As Int, X As Float, Y As Float)
    SignatureCapture.Panel_Touch(SD, x, y, Action)
End Sub
Sub btnSave_Click
    SignatureCapture.Save(SD, File.DirRootExternal, "sign.png")
    ToastMessageShow("Signature saved to: " & File.Combine(File.DirRootExternal, "sign.png"), True)
End Sub
Sub btnClear_Click
    SignatureCapture.Clear(SD)
End Sub

That's it.

 

[Beja]

Thanks Erel,
Don't know how I didn't consider this.

 

[padvou]

How could I create an eraser to erase drawn stuff when I touch an area on the panel? and maybe even moving the finger on the touch screen, erasing anything under it.

 

[Erel]

Draw with Colors.Transparent. It will make the canvas transparent.

 

[padvou]

Should canvas and panel also be transparent?

 

[Erel]

What do you mean with erasing stuff? You can draw a line or circle with the panel original background color to delete the drawing.

 

[AHilberink]

Hi,

Is it possible to check if the signature is empty? I mean no Signature?

Best regards,
André

 

[Erel]

Add a global boolean variable and set it to true in Panel1_Touch.

 

[AHilberink]

Add a global boolean variable and set it to true in Panel1_Touch.

Hi Erel,

That worked for me. Thanks,

Best regards,
André

 

[Sam H]

This looks really simple but I'm still having trouble with it.

I am trying to get it working without using the designer, which is where I am having problems.

I added some code in an attempt to recreate the creation of the panel and canvas that the design view was doing.

I am having lots of errors and don't known whether to initialise the panel or canvas first or which to add to the activity and that sort of thing.

This is what I have so far.

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
  

    Dim Panel1 As Panel
    Dim Canvas1 As Canvas
    Dim SD As SignatureData 'This object holds the data required for SignatureCapture
 
End Sub

Sub Activity_Create(FirstTime As Boolean)
   
    Panel1.Initialize("Panel")
    Panel1.Color = Colors.Gray
   
    Canvas1.Initialize(Panel1)
   
    Activity.AddView(Panel1, 20%x, 20%y, 60%x, 40%y)

    SD.Initialize
    SD.Canvas = Canvas1
    SD.Panel = Panel1
    SD.SignatureColor = Colors.Black
    SD.SignatureWidth = 5dip 'Stroke width

End sub

Thanks in advance.


Sam

 

[Erel]

1. Initialize the panel.
2. Add it to the activity (only at this point it will have a non-zero size).
3. Initialize the canvas.

 

[Roberto P.]

what is the best way to open an existing image (long) in a canvas to add your signature?

with this code

    mPath                =    aPath
    mFileName     = aFileName
   
    Dim aAltezza, aLarghezza As Int
   
    bmp.Initialize(mPath, mFileName)


    If bmp.Height >  bmp.Width Then
        aAltezza        =    bmp.Height
        aLarghezza    =    bmp.Width
    Else
        aAltezza        =    bmp.Width
        aLarghezza    =    bmp.Height
    End If
       
    Dim aRect As Rect
    aRect.Initialize(1dip, 3dip, aAltezza ,  aLarghezza)

    mCanvasFirma.DrawBitmap(bmp, Null, aRect)

the image is deformed.
thanks

 

[Erel]

Please start a new thread for this question and explain what exactly are you trying to do. I don't see how this code can work.

 

[Roberto P.]

ok, thanks

 

[gapi]

How can I get the final transparent image rather than the white background? thanks

 

[hatzisn]

I suppose, you will have to set the panel color to Colors.Transparent and save it as .PNG

 

[Erel]

This is a very old example. Use B4XSignatureTemplate with B4XDialog.