Android Signature Capture Example Using Signature Pad Library

Here you will get android signature capture example.

You may have seen many eCommerce companies like Amazon provides a facility for digital signature. You can implement that feature in your app easily by using a library called Signature Pad.

Video Demo

Below tutorial shows you how to do this.

Android Signature Capture Example

Add to Layout

You can simply add a signature drawing view to your xml layout by using following tag.

<com.github.gcacace.signaturepad.views.SignaturePad
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/signaturePad"/>

Apply Listener

You can simply apply a listener to Signature Pad widget in following way.

signaturePad = (SignaturePad) findViewById(R.id.signaturePad);
signaturePad.setOnSignedListener(new SignaturePad.OnSignedListener() {

    @Override
    public void onStartSigning() {
        //Event triggered when the pad is touched
    }

   @Override
   public void onSigned() {
       //Event triggered when the pad is signed
   }

   @Override
   public void onClear() {
       //Event triggered when the pad is cleared
   }
});

Get Data

You can get signature data by following methods.

• getSignatureBitmap() – Gets signature bitmap with a white background.
• getTransparentSignatureBitmap() – Gets signature bitmap with a transparent background.
• getSignatureSvg() – Gets signature Scalable Vector Graphics document.

For clearing the signature pad area use clear() method.

In below example I have just captured the signature and not saved it anywhere. You can get signature data using above methods and then save anywhere like in database or server.

Android Project

First create an android project with package name com.signaturecapture or you can use your existing project.

Now we have to add the Signature Pad library to our project. Add following line in your app level build.gradle file under dependencies section and then sync the project.

compile 'com.github.gcacace:signature-pad:1.2.1'

Add following code in respective files.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.signaturecapture.MainActivity"
    android:orientation="vertical">

    <com.github.gcacace.signaturepad.views.SignaturePad
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/signaturePad"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/saveButton"
            android:text="Save"
            android:layout_weight="1"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/clearButton"
            android:text="Clear"
            android:layout_weight="1"/>
    </LinearLayout>

</LinearLayout>

MainActivity.java

package com.signaturecapture;

import android.content.pm.ActivityInfo;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.github.gcacace.signaturepad.views.SignaturePad;

public class MainActivity extends AppCompatActivity {
    SignaturePad signaturePad;
    Button saveButton, clearButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        signaturePad = (SignaturePad)findViewById(R.id.signaturePad);
        saveButton = (Button)findViewById(R.id.saveButton);
        clearButton = (Button)findViewById(R.id.clearButton);

        //disable both buttons at start
        saveButton.setEnabled(false);
        clearButton.setEnabled(false);

        //change screen orientation to landscape mode
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

        signaturePad.setOnSignedListener(new SignaturePad.OnSignedListener() {
            @Override
            public void onStartSigning() {

            }

            @Override
            public void onSigned() {
                saveButton.setEnabled(true);
                clearButton.setEnabled(true);
            }

            @Override
            public void onClear() {
                saveButton.setEnabled(false);
                clearButton.setEnabled(false);
            }
        });

        saveButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //write code for saving the signature here
                Toast.makeText(MainActivity.this, "Signature Saved", Toast.LENGTH_SHORT).show();
            }
        });

        clearButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                signaturePad.clear();
            }
        });
    }
}

Save and run your project.

Screenshot

Comment below if you have any queries related to above android signature capture example.