{"id":24962207,"url":"https://github.com/adamdawi/scratchcardcompose","last_synced_at":"2025-04-15T16:41:30.439Z","repository":{"id":269287055,"uuid":"906919705","full_name":"AdamDawi/ScratchCardCompose","owner":"AdamDawi","description":"A customizable scratch card component in Jetpack Compose, allowing users to reveal a base image by scratching off an overlay.","archived":false,"fork":false,"pushed_at":"2025-02-09T19:22:32.000Z","size":1484,"stargazers_count":35,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T22:34:55.994Z","etag":null,"topics":["android","canvas","compose","graphics","image","interactive-ui","jetpack-compose","kotlin","lidl","mask","movie","scratch-card","scratchcard","scratcheffect","touch-gestures","ui-component"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AdamDawi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-22T10:02:33.000Z","updated_at":"2025-02-28T11:33:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"2dbe3058-30db-4b89-b0e4-c81ea1afda1d","html_url":"https://github.com/AdamDawi/ScratchCardCompose","commit_stats":null,"previous_names":["adamdawi/scratchcardcompose"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamDawi%2FScratchCardCompose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamDawi%2FScratchCardCompose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamDawi%2FScratchCardCompose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamDawi%2FScratchCardCompose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdamDawi","download_url":"https://codeload.github.com/AdamDawi/ScratchCardCompose/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249110291,"owners_count":21214302,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","canvas","compose","graphics","image","interactive-ui","jetpack-compose","kotlin","lidl","mask","movie","scratch-card","scratchcard","scratcheffect","touch-gestures","ui-component"],"created_at":"2025-02-03T08:59:23.999Z","updated_at":"2025-04-15T16:41:30.433Z","avatar_url":"https://github.com/AdamDawi.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ScratchCardCompose\nA 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](https://github.com/AdamDawi/Popcorn-Picks).\n\n## ⭐️Features\n### Main Screen \n- **Scratch Overlay Masking:** The overlay image uses masking with transparency and blend modes to simulate scratching effects.\n  - The ``BlendMode.Clear`` ensures the scratched pixels are completely erased.\n  - ``CompositingStrategy.Offscreen`` ensures that the base image remains unaffected by masking.\n  \n- **Threshold Control:** Define the percentage of the overlay that needs to be scratched to reveal the base image.\n\n- **State Management:** The component tracks whether the card has been fully scratched and triggers a callback when it's complete.\n\n## 🎥Here are some overview videos:\n![1](https://github.com/user-attachments/assets/95a3ed0a-d98b-49af-9149-c68091bdd041)\n![2](https://github.com/user-attachments/assets/e85662d1-dc63-498a-963b-1d4a5bb674c9)\n\n## ⚙️Installation\nTo 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.\n\n## 📝Usage Example\nHere’s an example of how to use the ScratchCard component:\n```kotlin\n  ScratchCard(\n    modifier = Modifier\n        .height(200.dp)\n        .width(300.dp),\n    overlayImage = ImageBitmap.imageResource(R.drawable.overlay_image),\n    baseImage = painterResource(R.drawable.base_image),\n    onScratchComplete = {\n        // Handle when the card is completely scratched\n    },\n    isScratched = false,\n    shape = RoundedCornerShape(12.dp),\n    scratchLineWidth = 32.dp,\n    scratchingThresholdPercentage = 0.7f\n)\n```\n\n## 🔍How it works\nThe scratch card uses a layered rendering approach:\n1. Base Image: Displayed at the bottom of the stack.\n2. Overlay Image: Rendered above the base image and acts as a mask.\n3. Scratch Lines: Drawn using Canvas and rendered with BlendMode.Clear to erase parts of the overlay image.\n\n## 🎨Customize Options\n\n| Parameter                     | Description                                                                                                   | Default               |\n|-------------------------------|---------------------------------------------------------------------------------------------------------------|-----------------------|\n| `modifier`                    | Modifier to be applied to the ScratchCard.                                                                   | `Modifier`           |\n| `overlayImage`                | The image that will be scratched off by the user, typically a texture or effect to reveal the base image.     | _None_                |\n| `baseImage`                   | The base image that will be revealed after the overlay is scratched off.                                     | _None_                |\n| `scratchingThresholdPercentage` | The percentage of the area that needs to be scratched off to show the base image.                          | `0.8`                 |\n| `scratchLineWidth`            | The width of the scratch lines drawn when the user drags their finger across the overlay.                    | `32.dp`               |\n| `scratchLineCap`              | The shape of the stroke cap applied to the scratch lines.                                                    | `StrokeCap.Round`     |\n| `isScratched`                 | Flag to determine if the scratch card is fully scratched. If true, no further scratching is possible.        | `false`               |\n| `onScratchComplete`           | Callback triggered when the scratch card is fully scratched, meaning the threshold has been reached.         | `{}` (empty lambda)   |\n| `shape`                       | The shape of the scratch card, typically a rounded rectangle or custom shape.                                | `RoundedCornerShape(12.dp)` |\n\n## 📋Requirements\nMinimum version: Android 7.0 (API level 24) or later📱\n\nTarget version: Android 14 (API level 34) or later📱\n\n## ✍️Author\nAdam Dawidziuk🧑‍💻\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamdawi%2Fscratchcardcompose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadamdawi%2Fscratchcardcompose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamdawi%2Fscratchcardcompose/lists"}