├── .gitignore ├── LICENSE ├── README.md ├── app ├── .gitignore ├── build.gradle.kts ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── example │ │ └── scratchcardcompose │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── example │ │ │ └── scratchcardcompose │ │ │ ├── MainActivity.kt │ │ │ └── ui │ │ │ ├── HomeScreen.kt │ │ │ ├── scratch_card │ │ │ └── ScratchCard.kt │ │ │ ├── screen_with_example │ │ │ ├── ScratchCardScreenExampleLidl.kt │ │ │ └── ScratchCardScreenExampleMovie.kt │ │ │ └── theme │ │ │ ├── Color.kt │ │ │ ├── Theme.kt │ │ │ └── Type.kt │ └── res │ │ ├── drawable │ │ ├── ic_launcher_background.xml │ │ ├── ic_launcher_foreground.xml │ │ ├── lidl_base.png │ │ ├── lidl_overlay.jpg │ │ ├── scratch_here_overlay.jpg │ │ └── spiderman.jpg │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.webp │ │ └── ic_launcher_round.webp │ │ ├── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── themes.xml │ │ └── xml │ │ ├── backup_rules.xml │ │ └── data_extraction_rules.xml │ └── test │ └── java │ └── com │ └── example │ └── scratchcardcompose │ └── ExampleUnitTest.kt ├── build.gradle.kts ├── gradle.properties ├── gradle ├── libs.versions.toml └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle.kts /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/caches 5 | /.idea/libraries 6 | /.idea/modules.xml 7 | /.idea/workspace.xml 8 | /.idea/navEditor.xml 9 | /.idea/assetWizardSettings.xml 10 | .DS_Store 11 | /build 12 | /captures 13 | .externalNativeBuild 14 | .cxx 15 | local.properties 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Adam Dawidziuk 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ScratchCardCompose 2 | 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](https://github.com/AdamDawi/Popcorn-Picks). 3 | 4 | ## ⭐️Features 5 | ### Main Screen 6 | - **Scratch Overlay Masking:** The overlay image uses masking with transparency and blend modes to simulate scratching effects. 7 | - The ``BlendMode.Clear`` ensures the scratched pixels are completely erased. 8 | - ``CompositingStrategy.Offscreen`` ensures that the base image remains unaffected by masking. 9 | 10 | - **Threshold Control:** Define the percentage of the overlay that needs to be scratched to reveal the base image. 11 | 12 | - **State Management:** The component tracks whether the card has been fully scratched and triggers a callback when it's complete. 13 | 14 | ## 🎥Here are some overview videos: 15 | ![1](https://github.com/user-attachments/assets/95a3ed0a-d98b-49af-9149-c68091bdd041) 16 | ![2](https://github.com/user-attachments/assets/e85662d1-dc63-498a-963b-1d4a5bb674c9) 17 | 18 | ## ⚙️Installation 19 | 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. 20 | 21 | ## 📝Usage Example 22 | Here’s an example of how to use the ScratchCard component: 23 | ```kotlin 24 | ScratchCard( 25 | modifier = Modifier 26 | .height(200.dp) 27 | .width(300.dp), 28 | overlayImage = ImageBitmap.imageResource(R.drawable.overlay_image), 29 | baseImage = painterResource(R.drawable.base_image), 30 | onScratchComplete = { 31 | // Handle when the card is completely scratched 32 | }, 33 | isScratched = false, 34 | shape = RoundedCornerShape(12.dp), 35 | scratchLineWidth = 32.dp, 36 | scratchingThresholdPercentage = 0.7f 37 | ) 38 | ``` 39 | 40 | ## 🔍How it works 41 | The scratch card uses a layered rendering approach: 42 | 1. Base Image: Displayed at the bottom of the stack. 43 | 2. Overlay Image: Rendered above the base image and acts as a mask. 44 | 3. Scratch Lines: Drawn using Canvas and rendered with BlendMode.Clear to erase parts of the overlay image. 45 | 46 | ## 🎨Customize Options 47 | 48 | | Parameter | Description | Default | 49 | |-------------------------------|---------------------------------------------------------------------------------------------------------------|-----------------------| 50 | | `modifier` | Modifier to be applied to the ScratchCard. | `Modifier` | 51 | | `overlayImage` | The image that will be scratched off by the user, typically a texture or effect to reveal the base image. | _None_ | 52 | | `baseImage` | The base image that will be revealed after the overlay is scratched off. | _None_ | 53 | | `scratchingThresholdPercentage` | The percentage of the area that needs to be scratched off to show the base image. | `0.8` | 54 | | `scratchLineWidth` | The width of the scratch lines drawn when the user drags their finger across the overlay. | `32.dp` | 55 | | `scratchLineCap` | The shape of the stroke cap applied to the scratch lines. | `StrokeCap.Round` | 56 | | `isScratched` | Flag to determine if the scratch card is fully scratched. If true, no further scratching is possible. | `false` | 57 | | `onScratchComplete` | Callback triggered when the scratch card is fully scratched, meaning the threshold has been reached. | `{}` (empty lambda) | 58 | | `shape` | The shape of the scratch card, typically a rounded rectangle or custom shape. | `RoundedCornerShape(12.dp)` | 59 | 60 | ## 📋Requirements 61 | Minimum version: Android 7.0 (API level 24) or later📱 62 | 63 | Target version: Android 14 (API level 34) or later📱 64 | 65 | ## ✍️Author 66 | Adam Dawidziuk🧑‍💻 67 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build -------------------------------------------------------------------------------- /app/build.gradle.kts: -------------------------------------------------------------------------------- 1 | plugins { 2 | alias(libs.plugins.android.application) 3 | alias(libs.plugins.kotlin.android) 4 | alias(libs.plugins.kotlin.compose) 5 | } 6 | 7 | android { 8 | namespace = "com.example.scratchcardcompose" 9 | compileSdk = 34 10 | 11 | defaultConfig { 12 | applicationId = "com.example.scratchcardcompose" 13 | minSdk = 24 14 | targetSdk = 34 15 | versionCode = 1 16 | versionName = "1.0" 17 | 18 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" 19 | } 20 | 21 | buildTypes { 22 | release { 23 | isMinifyEnabled = false 24 | proguardFiles( 25 | getDefaultProguardFile("proguard-android-optimize.txt"), 26 | "proguard-rules.pro" 27 | ) 28 | } 29 | } 30 | compileOptions { 31 | sourceCompatibility = JavaVersion.VERSION_11 32 | targetCompatibility = JavaVersion.VERSION_11 33 | } 34 | kotlinOptions { 35 | jvmTarget = "11" 36 | } 37 | buildFeatures { 38 | compose = true 39 | } 40 | } 41 | 42 | dependencies { 43 | 44 | implementation(libs.androidx.core.ktx) 45 | implementation(libs.androidx.lifecycle.runtime.ktx) 46 | implementation(libs.androidx.activity.compose) 47 | implementation(platform(libs.androidx.compose.bom)) 48 | implementation(libs.androidx.ui) 49 | implementation(libs.androidx.ui.graphics) 50 | implementation(libs.androidx.ui.tooling.preview) 51 | implementation(libs.androidx.material3) 52 | implementation(libs.androidx.navigation.compose) 53 | testImplementation(libs.junit) 54 | androidTestImplementation(libs.androidx.junit) 55 | androidTestImplementation(libs.androidx.espresso.core) 56 | androidTestImplementation(platform(libs.androidx.compose.bom)) 57 | androidTestImplementation(libs.androidx.ui.test.junit4) 58 | debugImplementation(libs.androidx.ui.tooling) 59 | debugImplementation(libs.androidx.ui.test.manifest) 60 | } -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile -------------------------------------------------------------------------------- /app/src/androidTest/java/com/example/scratchcardcompose/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.example.scratchcardcompose 2 | 3 | import androidx.test.platform.app.InstrumentationRegistry 4 | import androidx.test.ext.junit.runners.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext 22 | assertEquals("com.example.scratchcardcompose", appContext.packageName) 23 | } 24 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 15 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/scratchcardcompose/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.example.scratchcardcompose 2 | 3 | import android.os.Bundle 4 | import androidx.activity.ComponentActivity 5 | import androidx.activity.compose.setContent 6 | import androidx.navigation.compose.NavHost 7 | import androidx.navigation.compose.composable 8 | import androidx.navigation.compose.rememberNavController 9 | import com.example.scratchcardcompose.ui.HomeScreen 10 | import com.example.scratchcardcompose.ui.screen_with_example.ScratchCardScreenExampleLidl 11 | import com.example.scratchcardcompose.ui.screen_with_example.ScratchCardScreenExampleMovie 12 | import com.example.scratchcardcompose.ui.theme.ScratchCardComposeTheme 13 | 14 | class MainActivity : ComponentActivity() { 15 | override fun onCreate(savedInstanceState: Bundle?) { 16 | super.onCreate(savedInstanceState) 17 | setContent { 18 | ScratchCardComposeTheme { 19 | val navController = rememberNavController() 20 | NavHost(navController = navController, startDestination = "home"){ 21 | composable("home"){ 22 | HomeScreen( 23 | onNavigateToLidlScreen = { 24 | navController.navigate("lidl") 25 | }, 26 | onNavigateToMovieScreen = { 27 | navController.navigate("movie") 28 | } 29 | ) 30 | } 31 | composable("lidl"){ 32 | ScratchCardScreenExampleLidl() 33 | } 34 | composable("movie"){ 35 | ScratchCardScreenExampleMovie() 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/scratchcardcompose/ui/HomeScreen.kt: -------------------------------------------------------------------------------- 1 | package com.example.scratchcardcompose.ui 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Box 5 | import androidx.compose.foundation.layout.Column 6 | import androidx.compose.foundation.layout.fillMaxSize 7 | import androidx.compose.foundation.layout.fillMaxWidth 8 | import androidx.compose.foundation.layout.padding 9 | import androidx.compose.material3.Button 10 | import androidx.compose.material3.Text 11 | import androidx.compose.runtime.Composable 12 | import androidx.compose.ui.Alignment 13 | import androidx.compose.ui.Modifier 14 | import androidx.compose.ui.text.font.FontWeight 15 | import androidx.compose.ui.unit.dp 16 | import androidx.compose.ui.unit.sp 17 | 18 | @Composable 19 | fun HomeScreen( 20 | onNavigateToLidlScreen: () -> Unit, 21 | onNavigateToMovieScreen: () -> Unit 22 | ) { 23 | Box( 24 | modifier = Modifier 25 | .fillMaxSize() 26 | ) { 27 | Text( 28 | modifier = Modifier 29 | .align(Alignment.TopCenter) 30 | .padding(top = 48.dp), 31 | text = "Choose example screen", 32 | fontSize = 28.sp, 33 | fontWeight = FontWeight.Bold 34 | ) 35 | Column( 36 | modifier = Modifier 37 | .align(Alignment.Center) 38 | .padding(horizontal = 32.dp), 39 | verticalArrangement = Arrangement.spacedBy(16.dp), 40 | horizontalAlignment = Alignment.CenterHorizontally 41 | ){ 42 | Button( 43 | modifier = Modifier.fillMaxWidth(), 44 | onClick = onNavigateToLidlScreen 45 | ) { 46 | Text( 47 | modifier = Modifier.padding(vertical = 6.dp), 48 | text = "Lidl", 49 | fontSize = 20.sp 50 | ) 51 | } 52 | Button( 53 | modifier = Modifier.fillMaxWidth(), 54 | onClick = onNavigateToMovieScreen 55 | ) { 56 | Text( 57 | modifier = Modifier.padding(vertical = 6.dp), 58 | text = "Movie", 59 | fontSize = 20.sp 60 | ) 61 | } 62 | } 63 | } 64 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/scratchcardcompose/ui/scratch_card/ScratchCard.kt: -------------------------------------------------------------------------------- 1 | package com.example.scratchcardcompose.ui.scratch_card 2 | 3 | import androidx.compose.foundation.Canvas 4 | import androidx.compose.foundation.Image 5 | import androidx.compose.foundation.gestures.detectDragGestures 6 | import androidx.compose.foundation.gestures.detectTapGestures 7 | import androidx.compose.foundation.layout.Box 8 | import androidx.compose.foundation.layout.fillMaxSize 9 | import androidx.compose.foundation.shape.RoundedCornerShape 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.runtime.mutableFloatStateOf 12 | import androidx.compose.runtime.mutableStateListOf 13 | import androidx.compose.runtime.remember 14 | import androidx.compose.ui.Modifier 15 | import androidx.compose.ui.draw.clip 16 | import androidx.compose.ui.geometry.Offset 17 | import androidx.compose.ui.graphics.BlendMode 18 | import androidx.compose.ui.graphics.Color 19 | import androidx.compose.ui.graphics.CompositingStrategy 20 | import androidx.compose.ui.graphics.ImageBitmap 21 | import androidx.compose.ui.graphics.Shape 22 | import androidx.compose.ui.graphics.StrokeCap 23 | import androidx.compose.ui.graphics.graphicsLayer 24 | import androidx.compose.ui.graphics.painter.Painter 25 | import androidx.compose.ui.input.pointer.pointerInput 26 | import androidx.compose.ui.layout.ContentScale 27 | import androidx.compose.ui.res.imageResource 28 | import androidx.compose.ui.res.painterResource 29 | import androidx.compose.ui.tooling.preview.Preview 30 | import androidx.compose.ui.unit.Dp 31 | import androidx.compose.ui.unit.IntSize 32 | import androidx.compose.ui.unit.dp 33 | import com.example.scratchcardcompose.R 34 | import com.example.scratchcardcompose.ui.theme.ScratchCardComposeTheme 35 | import kotlin.math.pow 36 | import kotlin.math.sqrt 37 | 38 | /** 39 | * A customizable scratch card component that allows users to "scratch" an overlay image by dragging their finger over it. 40 | * It reveals a base image beneath the overlay as the user interacts with the screen. 41 | * 42 | * @param modifier Modifier to be applied to the ScratchCard. 43 | * @param overlayImage The image that will be scratched off by the user, typically a texture or effect that will be revealed underneath. 44 | * @param baseImage The base image that will be revealed after the overlay is scratched off. 45 | * @param scratchingThresholdPercentage The percentage of the area that needs to be scratched off to show the base image. 46 | * @param scratchLineWidth The width of the scratch lines drawn when the user drags their finger across the overlay. 47 | * @param scratchLineCap The shape of the stroke cap applied to the scratch lines (e.g., Round, Square). 48 | * @param isScratched Flag that determines whether the scratch card has already been fully scratched. If true, the card is fully scratched and no further scratching is possible. 49 | * @param onScratchComplete A callback that is triggered when the scratch card is fully scratched, meaning the threshold has been reached. 50 | * @param shape The shape of the scratch card, typically a rounded rectangle or custom shape. 51 | */ 52 | @Composable 53 | fun ScratchCard( 54 | modifier: Modifier = Modifier, 55 | overlayImage: ImageBitmap, 56 | baseImage: Painter, 57 | scratchingThresholdPercentage : Float = 0.8f, 58 | scratchLineWidth : Dp = 32.dp, 59 | scratchLineCap : StrokeCap = StrokeCap.Round, 60 | isScratched: Boolean = false, 61 | onScratchComplete: () -> Unit = {}, 62 | shape: Shape = RoundedCornerShape(12.dp) 63 | ) { 64 | val scratchLines = remember { 65 | mutableStateListOf() 66 | } 67 | val totalScratchedArea = remember { 68 | mutableFloatStateOf(0f) 69 | } 70 | 71 | Box( 72 | modifier = modifier 73 | .clip(shape) 74 | ){ 75 | Image( 76 | painter = baseImage, 77 | contentDescription = "Base image", 78 | modifier = Modifier 79 | .fillMaxSize() 80 | .clip(shape), 81 | contentScale = ContentScale.Crop 82 | ) 83 | Box( 84 | modifier = Modifier 85 | .graphicsLayer { 86 | compositingStrategy = CompositingStrategy.Offscreen //Without it, all the pixels (in this example baseImage) drawn underneath scratchLines will be cleared with scratchLines 87 | //now baseImage is considered as a separate layer and masking can be applied 88 | } 89 | ) { 90 | Canvas( 91 | modifier = Modifier 92 | .fillMaxSize() 93 | .pointerInput(true) { 94 | detectTapGestures( 95 | onTap = { position -> 96 | val line = Line( 97 | start = position, 98 | end = position, 99 | strokeWidth = scratchLineWidth.toPx() 100 | ) 101 | //accumulate the total scratched area, including overlapping lines 102 | totalScratchedArea.floatValue += line.calculateArea() 103 | scratchLines.add(line) 104 | } 105 | ) 106 | } 107 | .pointerInput(true) { 108 | detectDragGestures { change, dragAmount -> 109 | change.consume() 110 | 111 | val line = Line( 112 | start = change.position - dragAmount, 113 | end = change.position, 114 | strokeWidth = scratchLineWidth.toPx() 115 | ) 116 | //accumulate the total scratched area, including overlapping lines 117 | totalScratchedArea.floatValue += line.calculateArea() 118 | 119 | scratchLines.add(line) 120 | } 121 | } 122 | ) { 123 | val imageSize = IntSize(width = size.width.toInt(), height = size.height.toInt()) 124 | val maxCanvasArea = this.size.width * this.size.height 125 | 126 | //if total scratched area is below the threshold, show the overlay image 127 | if(!isScratched && totalScratchedArea.floatValue/maxCanvasArea < scratchingThresholdPercentage) { 128 | drawImage(image = overlayImage, dstSize = imageSize) 129 | //draw the scratch lines with transparency to "erase" the overlay 130 | scratchLines.forEach { line -> 131 | drawLine( 132 | color = Color.Transparent, 133 | start = line.start, 134 | end = line.end, 135 | strokeWidth = line.strokeWidth, 136 | cap = scratchLineCap, 137 | blendMode = BlendMode.Clear //clears the pixels covered by the source in the destination 138 | ) 139 | } 140 | }else{ 141 | if(totalScratchedArea.floatValue>0) { 142 | if(!isScratched){ 143 | onScratchComplete() 144 | } 145 | if(isScratched){ 146 | scratchLines.clear() 147 | totalScratchedArea.floatValue = 0f 148 | } 149 | } 150 | } 151 | } 152 | } 153 | } 154 | } 155 | 156 | private data class Line( 157 | val start: Offset, 158 | val end: Offset, 159 | val strokeWidth: Float 160 | ){ 161 | fun calculateArea(): Float { 162 | val lineLength = calculateLength() 163 | return lineLength * strokeWidth 164 | } 165 | private fun calculateLength(): Float { 166 | return sqrt((end.x - start.x).pow(2) + (end.y - start.y).pow(2)) 167 | } 168 | } 169 | 170 | @Composable 171 | @Preview 172 | private fun ImageScratchPreview() { 173 | ScratchCardComposeTheme { 174 | ScratchCard( 175 | overlayImage = ImageBitmap.imageResource(R.drawable.scratch_here_overlay), 176 | baseImage = painterResource(R.drawable.spiderman), 177 | onScratchComplete = {}, 178 | isScratched = false 179 | ) 180 | } 181 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/scratchcardcompose/ui/screen_with_example/ScratchCardScreenExampleLidl.kt: -------------------------------------------------------------------------------- 1 | package com.example.scratchcardcompose.ui.screen_with_example 2 | 3 | import androidx.compose.foundation.background 4 | import androidx.compose.foundation.layout.Box 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.foundation.layout.fillMaxWidth 7 | import androidx.compose.foundation.layout.height 8 | import androidx.compose.foundation.layout.padding 9 | import androidx.compose.foundation.layout.width 10 | import androidx.compose.foundation.shape.RoundedCornerShape 11 | import androidx.compose.material3.Button 12 | import androidx.compose.material3.ButtonDefaults 13 | import androidx.compose.material3.Text 14 | import androidx.compose.runtime.Composable 15 | import androidx.compose.runtime.mutableStateOf 16 | import androidx.compose.runtime.remember 17 | import androidx.compose.ui.Alignment 18 | import androidx.compose.ui.Modifier 19 | import androidx.compose.ui.graphics.Brush 20 | import androidx.compose.ui.graphics.Color 21 | import androidx.compose.ui.graphics.ImageBitmap 22 | import androidx.compose.ui.graphics.RectangleShape 23 | import androidx.compose.ui.res.imageResource 24 | import androidx.compose.ui.res.painterResource 25 | import androidx.compose.ui.text.font.FontWeight 26 | import androidx.compose.ui.unit.dp 27 | import com.example.scratchcardcompose.R 28 | import com.example.scratchcardcompose.ui.scratch_card.ScratchCard 29 | 30 | @Composable 31 | fun ScratchCardScreenExampleLidl() { 32 | val isCardScratched = remember { mutableStateOf(false) } 33 | Box( 34 | modifier = Modifier 35 | .fillMaxSize() 36 | .background( 37 | brush = Brush.horizontalGradient( 38 | colorStops = arrayOf( 39 | 0.0f to Color(0xFF003f7e), 40 | 0.3f to Color(0xFF0675c9), 41 | 0.7f to Color(0xFF0675c9), 42 | 1.0f to Color(0xFF003f7e) 43 | ) 44 | ) 45 | ) 46 | ) { 47 | ScratchCard( 48 | modifier = Modifier 49 | .padding(horizontal = 32.dp) 50 | .height(200.dp) 51 | .width(300.dp) 52 | .align(Alignment.Center), 53 | overlayImage = ImageBitmap.imageResource(R.drawable.lidl_overlay), 54 | baseImage = painterResource(R.drawable.lidl_base), 55 | onScratchComplete = { 56 | isCardScratched.value = true 57 | }, 58 | isScratched = isCardScratched.value, 59 | shape = RoundedCornerShape(3.dp), 60 | scratchLineWidth = 26.dp, 61 | scratchingThresholdPercentage = 0.7f 62 | ) 63 | Button( 64 | modifier = Modifier 65 | .fillMaxWidth() 66 | 67 | .align(Alignment.BottomCenter), 68 | onClick = { 69 | isCardScratched.value = false 70 | }, 71 | colors = ButtonDefaults.buttonColors( 72 | containerColor = Color(0xFF64befa), 73 | contentColor = Color.White 74 | ), 75 | shape = RectangleShape 76 | ){ 77 | Text( 78 | modifier = Modifier.padding(8.dp), 79 | text = "Restart", 80 | color = Color.White, 81 | fontWeight = FontWeight.Bold 82 | ) 83 | } 84 | } 85 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/scratchcardcompose/ui/screen_with_example/ScratchCardScreenExampleMovie.kt: -------------------------------------------------------------------------------- 1 | package com.example.scratchcardcompose.ui.screen_with_example 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.foundation.layout.fillMaxWidth 7 | import androidx.compose.foundation.layout.height 8 | import androidx.compose.foundation.layout.padding 9 | import androidx.compose.foundation.shape.RoundedCornerShape 10 | import androidx.compose.material3.Button 11 | import androidx.compose.material3.Text 12 | import androidx.compose.runtime.Composable 13 | import androidx.compose.runtime.mutableStateOf 14 | import androidx.compose.runtime.remember 15 | import androidx.compose.ui.Alignment 16 | import androidx.compose.ui.Modifier 17 | import androidx.compose.ui.graphics.ImageBitmap 18 | import androidx.compose.ui.res.imageResource 19 | import androidx.compose.ui.res.painterResource 20 | import androidx.compose.ui.text.font.FontWeight 21 | import androidx.compose.ui.tooling.preview.Preview 22 | import androidx.compose.ui.unit.dp 23 | import com.example.scratchcardcompose.R 24 | import com.example.scratchcardcompose.ui.scratch_card.ScratchCard 25 | import com.example.scratchcardcompose.ui.theme.ScratchCardComposeTheme 26 | 27 | @Composable 28 | fun ScratchCardScreenExampleMovie() { 29 | val isCardScratched = remember { mutableStateOf(false) } 30 | Column( 31 | modifier = Modifier 32 | .fillMaxSize() 33 | .padding(horizontal = 32.dp), 34 | horizontalAlignment = Alignment.CenterHorizontally, 35 | verticalArrangement = Arrangement.Center 36 | ) { 37 | ScratchCard( 38 | modifier = Modifier 39 | .height(470.dp) 40 | .fillMaxWidth(0.9f), 41 | overlayImage = ImageBitmap.imageResource(R.drawable.scratch_here_overlay), 42 | baseImage = painterResource(R.drawable.spiderman), 43 | onScratchComplete = { 44 | isCardScratched.value = true 45 | }, 46 | isScratched = isCardScratched.value, 47 | shape = RoundedCornerShape(12.dp) 48 | ) 49 | RestartButton( 50 | onRestart = { 51 | isCardScratched.value = false 52 | } 53 | ) 54 | } 55 | } 56 | 57 | @Composable 58 | fun RestartButton(onRestart: () -> Unit) { 59 | Button( 60 | onClick = onRestart, 61 | modifier = Modifier 62 | .padding(top = 32.dp) 63 | .fillMaxWidth(0.6f) 64 | ) { 65 | Text( 66 | text = "Restart", 67 | modifier = Modifier.padding(vertical = 8.dp), 68 | fontWeight = FontWeight.Bold 69 | ) 70 | } 71 | } 72 | 73 | @Preview(showBackground = true, showSystemUi = true) 74 | @Composable 75 | fun ScreenExamplePreview() { 76 | ScratchCardComposeTheme { 77 | ScratchCardScreenExampleMovie() 78 | } 79 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/scratchcardcompose/ui/theme/Color.kt: -------------------------------------------------------------------------------- 1 | package com.example.scratchcardcompose.ui.theme 2 | 3 | import androidx.compose.ui.graphics.Color 4 | 5 | val Purple80 = Color(0xFFD0BCFF) 6 | val PurpleGrey80 = Color(0xFFCCC2DC) 7 | val Pink80 = Color(0xFFEFB8C8) 8 | 9 | val Purple40 = Color(0xFF6650a4) 10 | val PurpleGrey40 = Color(0xFF625b71) 11 | val Pink40 = Color(0xFF7D5260) -------------------------------------------------------------------------------- /app/src/main/java/com/example/scratchcardcompose/ui/theme/Theme.kt: -------------------------------------------------------------------------------- 1 | package com.example.scratchcardcompose.ui.theme 2 | 3 | import android.app.Activity 4 | import android.os.Build 5 | import androidx.compose.foundation.isSystemInDarkTheme 6 | import androidx.compose.material3.MaterialTheme 7 | import androidx.compose.material3.darkColorScheme 8 | import androidx.compose.material3.dynamicDarkColorScheme 9 | import androidx.compose.material3.dynamicLightColorScheme 10 | import androidx.compose.material3.lightColorScheme 11 | import androidx.compose.runtime.Composable 12 | import androidx.compose.ui.platform.LocalContext 13 | 14 | private val DarkColorScheme = darkColorScheme( 15 | primary = Purple80, 16 | secondary = PurpleGrey80, 17 | tertiary = Pink80 18 | ) 19 | 20 | private val LightColorScheme = lightColorScheme( 21 | primary = Purple40, 22 | secondary = PurpleGrey40, 23 | tertiary = Pink40 24 | 25 | /* Other default colors to override 26 | background = Color(0xFFFFFBFE), 27 | surface = Color(0xFFFFFBFE), 28 | onPrimary = Color.White, 29 | onSecondary = Color.White, 30 | onTertiary = Color.White, 31 | onBackground = Color(0xFF1C1B1F), 32 | onSurface = Color(0xFF1C1B1F), 33 | */ 34 | ) 35 | 36 | @Composable 37 | fun ScratchCardComposeTheme( 38 | darkTheme: Boolean = isSystemInDarkTheme(), 39 | // Dynamic color is available on Android 12+ 40 | dynamicColor: Boolean = true, 41 | content: @Composable () -> Unit 42 | ) { 43 | val colorScheme = when { 44 | dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { 45 | val context = LocalContext.current 46 | if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) 47 | } 48 | 49 | darkTheme -> DarkColorScheme 50 | else -> LightColorScheme 51 | } 52 | 53 | MaterialTheme( 54 | colorScheme = colorScheme, 55 | typography = Typography, 56 | content = content 57 | ) 58 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/scratchcardcompose/ui/theme/Type.kt: -------------------------------------------------------------------------------- 1 | package com.example.scratchcardcompose.ui.theme 2 | 3 | import androidx.compose.material3.Typography 4 | import androidx.compose.ui.text.TextStyle 5 | import androidx.compose.ui.text.font.FontFamily 6 | import androidx.compose.ui.text.font.FontWeight 7 | import androidx.compose.ui.unit.sp 8 | 9 | // Set of Material typography styles to start with 10 | val Typography = Typography( 11 | bodyLarge = TextStyle( 12 | fontFamily = FontFamily.Default, 13 | fontWeight = FontWeight.Normal, 14 | fontSize = 16.sp, 15 | lineHeight = 24.sp, 16 | letterSpacing = 0.5.sp 17 | ) 18 | /* Other default text styles to override 19 | titleLarge = TextStyle( 20 | fontFamily = FontFamily.Default, 21 | fontWeight = FontWeight.Normal, 22 | fontSize = 22.sp, 23 | lineHeight = 28.sp, 24 | letterSpacing = 0.sp 25 | ), 26 | labelSmall = TextStyle( 27 | fontFamily = FontFamily.Default, 28 | fontWeight = FontWeight.Medium, 29 | fontSize = 11.sp, 30 | lineHeight = 16.sp, 31 | letterSpacing = 0.5.sp 32 | ) 33 | */ 34 | ) -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 15 | 18 | 21 | 22 | 23 | 24 | 30 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/lidl_base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/drawable/lidl_base.png -------------------------------------------------------------------------------- /app/src/main/res/drawable/lidl_overlay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/drawable/lidl_overlay.jpg -------------------------------------------------------------------------------- /app/src/main/res/drawable/scratch_here_overlay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/drawable/scratch_here_overlay.jpg -------------------------------------------------------------------------------- /app/src/main/res/drawable/spiderman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/drawable/spiderman.jpg -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-hdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-mdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-xhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamDawi/ScratchCardCompose/162cfd3ea38e5da60a8d9564b690b0174bbb9a4a/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFBB86FC 4 | #FF6200EE 5 | #FF3700B3 6 | #FF03DAC5 7 | #FF018786 8 | #FF000000 9 | #FFFFFFFF 10 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ScratchCardCompose 3 | -------------------------------------------------------------------------------- /app/src/main/res/values/themes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |