Android Scratch Card View using Kotlin
Last Updated :
16 Jul, 2024
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"
tools:context=".MainActivity">
<!-- TextView for the heading of the 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" />
<!-- ScratchImageView to display the hidden image -->
<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() {
// Declaring the ScratchImageView variable
private lateinit var scratchImageView: ScratchImageView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Initializing the ScratchImageView variable
scratchImageView = findViewById(R.id.idScratchCardIv)
// Setting reveal listener for the ScratchImageView
scratchImageView.setRevealListener(object : ScratchImageView.IRevealListener {
override fun onRevealed(iv: ScratchImageView) {
// Called after revealing the image
Toast.makeText(this@MainActivity, "Congratulations!", Toast.LENGTH_SHORT).show()
}
override fun onRevealPercentChangedListener(siv: ScratchImageView, percent: Float) {
// Checking the percentage of image revealed
}
})
}
}
Now run your application to see the output of it.
Output:
Similar Reads
Scratch Card View in Android with Example
Scratch Card View is one of the most seen UI components in Android apps. This type of UI component is generally seen in payment apps such as Google Pay and many other payment apps. Now if you are an Android developer then you should get amazed at How we can create this type of UI component in our An
3 min read
Android Image Slider using ViewPager in Kotlin
Image slider is seen in most e-commerce applications that display advertisements on the home screen. This slider displays the advertisement banners which users can slide to view the others. In this article, we will take a look at Implementing the image slider using ViewPager in Android using Kotlin.
5 min read
Android ListView in Kotlin
ListView in Android is a ViewGroup which is used to display a scrollable list of items arranged in multiple rows. It is attached to an adapter which dynamically inserts the items into the list. The main purpose of the adapter is to retrieve data from an array or a database and efficiently push every
3 min read
SearchView in Android with Kotlin
SearchView is a widget in android which provides a search interface with the help of which users can be able to make searches within the given list of data. In this search view, the user has to specify the search query. According to the search, query results will be populated within the listview. In
4 min read
Android Exoplayer using Kotlin
ExoPlayer View is one of the most used UI components in media streaming applications for displaying video files within android applications. It is similar to that of Video View, but the quality of the video player in Exoplayer compared to video view is better. In this article, we will look at How to
3 min read
Android - Update Data in API using Volley with Kotlin
Android applications use APIs to get the data from servers in android applications. With the help of APIs, we can add, read, update and delete the data from our database using APIs. We can use Volley and Retrofit for consuming data from APIs within the android application. In this article, we will t
5 min read
Elastic View in Android
In this article, ElasticView is added in android. The ElasticView is a regular CardView, which can flex from user touches. OnClickListener and other various important methods can also be added to the child view of ElasticView. It makes the user interface more attractive thereby enhancing the user ex
2 min read
Android RecyclerView in Kotlin
In this article, you will know how to implement RecyclerView in Android using Kotlin . Before moving further let us know about RecyclerView. A RecyclerView is an advanced version of ListView with improved performance. When you have a long list of items to show you can use RecyclerView. It has the ab
4 min read
Generate QR Code in Android using Kotlin
Many applications nowadays use QR codes within their application to hide some information. QR codes are seen within many payment applications which are used by the users to scan and make payments. The QR codes which are seen within these applications are generated inside the application itself. In t
4 min read
Android - SearchView with RecyclerView using Kotlin
Many apps display vast amounts of data within their in the form of a list and the user is not able to go through each item within the list to get the item that he wants. For filtering these lists within the android application we can use SearchView to filter it. In this article, we will be building
7 min read