ScratchCardCompose

A customizable scratch card component built with Jetpack Compose, based on masking techniques, which allows users to "scratch" an overlay image to reveal a base image underneath. For a real-world usage example, see this component in the full project here.

⭐️Features

Main Screen

• Scratch Overlay Masking: The overlay image uses masking with transparency and blend modes to simulate scratching effects.

  • The BlendMode.Clear ensures the scratched pixels are completely erased.
  • CompositingStrategy.Offscreen ensures that the base image remains unaffected by masking.

• Threshold Control: Define the percentage of the overlay that needs to be scratched to reveal the base image.

• State Management: The component tracks whether the card has been fully scratched and triggers a callback when it's complete.

🎥Here are some overview videos:

⚙️Installation

To use this component in your Jetpack Compose project, simply copy the ScratchCard composable into your project and customize it with your own images and configurations.

📝Usage Example

Here’s an example of how to use the ScratchCard component:

  ScratchCard(
    modifier = Modifier
        .height(200.dp)
        .width(300.dp),
    overlayImage = ImageBitmap.imageResource(R.drawable.overlay_image),
    baseImage = painterResource(R.drawable.base_image),
    onScratchComplete = {
        // Handle when the card is completely scratched
    },
    isScratched = false,
    shape = RoundedCornerShape(12.dp),
    scratchLineWidth = 32.dp,
    scratchingThresholdPercentage = 0.7f
)

🔍How it works

The scratch card uses a layered rendering approach:

1. Base Image: Displayed at the bottom of the stack.
2. Overlay Image: Rendered above the base image and acts as a mask.
3. Scratch Lines: Drawn using Canvas and rendered with BlendMode.Clear to erase parts of the overlay image.

🎨Customize Options

Parameter	Description	Default
modifier	Modifier to be applied to the ScratchCard.	Modifier
overlayImage	The image that will be scratched off by the user, typically a texture or effect to reveal the base image.	None
baseImage	The base image that will be revealed after the overlay is scratched off.	None
scratchingThresholdPercentage	The percentage of the area that needs to be scratched off to show the base image.	0.8
scratchLineWidth	The width of the scratch lines drawn when the user drags their finger across the overlay.	32.dp
scratchLineCap	The shape of the stroke cap applied to the scratch lines.	StrokeCap.Round
isScratched	Flag to determine if the scratch card is fully scratched. If true, no further scratching is possible.	false
onScratchComplete	Callback triggered when the scratch card is fully scratched, meaning the threshold has been reached.	{} (empty lambda)
shape	The shape of the scratch card, typically a rounded rectangle or custom shape.	RoundedCornerShape(12.dp)

📋Requirements

Minimum version: Android 7.0 (API level 24) or later📱

Target version: Android 14 (API level 34) or later📱

✍️Author

Adam Dawidziuk🧑‍💻