Android Scratch Card View using Kotlin

Scratch Card View is nowadays seen in most of the payment applications which provide coupons on various transactions within our application. This scratch card view is used to scratch the coupon and display the coupon to the user. In this article, we will take a look at How to Create a simple Scratch Card View within our android application using Kotlin. A sample GIF is given below to get an idea about what we are going to do in this article.

Note: If you are looking to implement Scratch Card View in Android using Java. Check out the following article: Scratch Card View in Android using Java  

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add dependency to build.gradle(Module:app)

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section. 

implementation 'com.github.cooltechworks:ScratchView:v1.1'

Step 3: Now add the maven URL inside your Gradle file

Navigate to the Gradle Scripts > build.gradle(Project) level and add below line inside repositories section. 

allprojects {
   repositories {
       // below is the line which we have to add
       maven {url “https://jitpack.io”}
       google()
       jcenter()
        }
}

After adding this dependency simply sync your project to install it. 

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--on below line we are creating a
         text for heading of our app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:gravity="center"
        android:padding="4dp"
        android:text="Scratch Card View"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="18sp"
        android:textStyle="bold" />

    <!--Scratch Card  view to display our hidden image
        src attribute is to add image which will be visible
        after scratching of our card.-->
    <com.cooltechworks.views.ScratchImageView
        android:id="@+id/idScratchCardIv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:background="@color/white"
        android:src="@drawable/android" />

</RelativeLayout>

Step 5: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.cooltechworks.views.ScratchImageView

class MainActivity : AppCompatActivity() {

    // on below line we are creating
    // a variable for our text view.
    lateinit var scratchImageView: ScratchImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // on below line we are initializing our all variables.
        scratchImageView = findViewById(R.id.idScratchCardIv)

        // on below line we are setting reveal listener for our scratch card image view.
        scratchImageView.setRevealListener(object : ScratchImageView.IRevealListener {
            override fun onRevealed(iv: ScratchImageView) {
                // this method is called after revealing the image.
                // on below line we are displaying a toast message
                // when the scratch card is revealed.
                Toast.makeText(this@MainActivity, "Congratulations!", Toast.LENGTH_SHORT).show()
            }
            override fun onRevealPercentChangedListener(siv: ScratchImageView, percent: Float) {
                // we can check how much percentage of
                // image is revealed using percent variable
            }
        })
    }
}

Now run your application to see the output of it. 

Output: