Android Signature Pad

To use the library, ensure mavenCentral() is included in your repositories block in build.gradle.

Choose the dependency based on your UI framework:

• Use signature-pad for Jetpack Compose views.
• Use signature-view for legacy Android views.

repositories {
    mavenCentral()
}

// For Jetpack Compose
implementation 'se.warting.signature:signature-pad:<latest_version>'

// For legacy Android views
implementation 'se.warting.signature:signature-view:<latest_version>'

You can customize the appearance and behavior of the signature pad using the following attributes:

To implement the signature pad in a Compose layout, use the SignaturePadView component. You should capture the SignaturePadAdapter via the onReady callback to interact with the signature data (e.g., saving or clearing).

var signaturePadAdapter: SignaturePadAdapter? = null

SignaturePadView(onReady = {
    signaturePadAdapter = it
})

Button(onClick = {
    Log.d("", signaturePadAdapter?.getSignatureSvg() ?: "null")
}) {
    Text("Save")
}

The SignaturePadAdapter provides several methods to retrieve the signature in different formats:

Bitmaps

• getSignatureBitmap(): Returns a signature bitmap with a default white background.
  • Customization: getSignatureBitmap(backgroundColor: Int, penColor: Int)
• getTransparentSignatureBitmap(trimBlankSpace: Boolean = false): Returns a signature bitmap with a transparent background.
  • Set trimBlankSpace = true to crop the bitmap to the signature bounds, removing surrounding blank space.
  • Customization: getTransparentSignatureBitmap(penColor: Int)

SVG

• getSignatureSvg(): Returns the signature as a Scalable Vector Graphics (SVG) document.

Use the configure method to set the visual properties of the pen used for signing. You can specify the minimum and maximum stroke widths, the pen color, and the velocity filter weight which affects how stroke width changes based on movement speed.

Available parameters:

• minWidth: Minimum stroke width in pixels.
• maxWidth: Maximum stroke width in pixels.
• penColor: The ARGB color of the pen.
• velocityFilterWeight: A weight used to smooth velocity changes (influences stroke thickness transitions).

sdk.configure(
    minWidth = 3,
    maxWidth = 7,
    penColor = Color.RED,
    velocityFilterWeight = 0.9f
)

The SDK supports basic management of the signature state:

• undo(): Removes the last completed stroke (a sequence from ACTION_DOWN to ACTION_UP). If no completed strokes exist, it does nothing. In-progress strokes are preserved.
• canUndo(): Returns true if there is at least one completed stroke available to undo.
• clear(): Wipes the entire signature, resets all internal state, and notifies listeners via onClear().

Feed raw touch events into the SDK using addEvent(event: Event). The SDK sanitizes these events (filtering out NaN or infinite coordinates) and processes them to build the signature curves. This is typically called from an OnTouchListener in an Android View.

// Inside an OnTouchListener
override fun onTouch(v: View, event: MotionEvent): Boolean {
    val sdkEvent = Event(
        timestamp = event.eventTime,
        action = event.action,
        x = event.x,
        y = event.y
    )
    signatureSDK.addEvent(sdkEvent)
    return true
}

The SDK provides several ways to export the signature as an Android Bitmap:

1. getSignatureBitmap(backgroundColor: Int, penColor: Int?): Returns a bitmap with a solid background color. Use this for standard image exports.
2. getTransparentSignatureBitmap(trimBlankSpace: Boolean, penColor: Int?): Returns a bitmap with a transparent background. If trimBlankSpace is set to true, the bitmap will be cropped to the bounding box of the actual signature strokes.
3. drawSignature(canvas: Canvas): Directly draws the current signature onto the provided Canvas.

// Get a cropped, transparent bitmap
val bitmap = sdk.getTransparentSignatureBitmap(
    trimBlankSpace = true,
    penColor = Color.BLACK
)

To react to user interactions, implement the SignedListener interface and register it using setOnSignedListener. The listener provides callbacks for different stages of the signing process:

• onStartSigning(): Called when the user first touches the screen (ACTION_DOWN).
• onSigning(): Called during continuous movement (ACTION_MOVE).
• onSigned(): Called when the user lifts their finger (ACTION_UP).
• onClear(): Called when the signature is cleared or emptied.

sdk.setOnSignedListener(object : SignedListener {
    override fun onStartSigning() { /* ... */ }
    override fun onSigning() { /* ... */ }
    override fun onSigned() { /* ... */ }
    override fun onClear() { /* ... */ }
})

You can retrieve the current signature as an SVG string. This is useful for high-quality vector representations of the signature.

Methods:

• getSignatureSvg(width: Int, height: Int): Returns a basic SVG.
• getSignatureSvg(width: Int, height: Int, penColor: Int?, backgroundColor: Int? = null): Returns an SVG with a specific pen color and optional background color (ARGB).

val svgString = sdk.getSignatureSvg(
    width = 500,
    height = 200,
    penColor = Color.BLACK,
    backgroundColor = Color.WHITE
)