DrawingPad.md

DrawingPad

DrawingPad is a composable that allows user to draw on it. Common use cases include taking a signature input. It has built-in support for capturing the input as a Bitmap using our Capturable composable.

Step 1 : Define State

val drawingPadState = rememberDrawingPadState() // Returns DrawingPadState

Step 2 : Composable

@Composable
fun DrawingPad(
    modifier: Modifier,
    state: DrawingPadState,

    // Customizations
    showClearButton: Boolean = true,
    clearButtonIcon: ImageVector = Icons.Default.Refresh,
    clearButtonPadding: Dp = 12.dp,
    clearButtonAlignment: Alignment = Alignment.TopEnd
)

Example :

DrawingPad(
    modifier = Modifier.fillMaxSize(),
    state = drawingPadState
)

Step 3 : Capture

Use the capture function to capture the drawing as Bitmap :

fun DrawingPadState.capture(
    callback: (Bitmap) -> Unit // Use the bitmap here
)

Example :

FloatingActionButton(
    onClick = {
        drawingPadState.capture { bitmap ->
            saveAndShareImage(bitmap)
        }
    }
) {
    Icon(
        imageVector = Icons.Default.Share,
        contentDescription = "Capture & Share"
    )
}

Check if drawing is blank

To check if the drawing is blank, use the DrawingPadState#isBlank() function :

fun DrawingPadState.isBlank(): Boolean

Example :

if (drawingPadState.isBlank()) {
    showToast("Please draw something!")
} else {
    drawingPadState.capture { bitmap ->
        saveAndShareImage(bitmap)
    }
}