Skip to content
Related Articles

Related Articles

Improve Article
Scratch Card View in Android with Example
  • Last Updated : 18 Feb, 2021

Scratch Card View is one of the most seen UI components in Android apps. This type of UI component is generally seen in payments apps such as Google pay and many other payment apps. Now if you are an Android developer then you should get amazed How we can create this type of UI component in our Android app. In this article, we will take a look at the implementation of Scratch Card View in Android. For the implementation of Scratch Card View, we will be using the library from GitHub. Using this library we will create a simple Scratch Card View and we will reveal it.

Implementation of Scratch Card View in Android

A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Scratch Card View in Android Sample GIF

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java 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 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()

        }

}

Step 4: Working with the activity_main.xml file

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">
  
    <!--Scratch Card  view to display our hidden image
        src attribute is to add image which wil 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/gfgimage" />
  
</RelativeLayout>

Step 5: Working with the MainActivity.java file

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

Java




import android.os.Bundle;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.cooltechworks.views.ScratchImageView;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our scratchcardimageview.
        ScratchImageView scratchImageView = findViewById(R.id.idScratchCardIv);
        scratchImageView.setRevealListener(new ScratchImageView.IRevealListener() {
            @Override
            public void onRevealed(ScratchImageView iv) {
                // this method is called after revealing the image.
                Toast.makeText(MainActivity.this, "image is revealed", Toast.LENGTH_SHORT).show();
            }
  
            @Override
            public void onRevealPercentChangedListener(ScratchImageView siv, float percent) {
                // we can check how much percentage of 
                // image is revealed using percent variable
            }
        });
    }
}

Output:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :