Android Scratch View | Scratch Card like Google Pay | Android Studio | Java

Golap Gunjan Barman
2 min readMar 1, 2021

Android Scratch View | Scratch Card like Google Pay | Android Studio | Java

In this tutorial, we are going to create a scratch card in android studio, which is like a Google Pay reward scratch card.

So, let’s start

Dependency

in the app build.gradle file

implementation 'com.github.AnupKumarPanwar:ScratchView:1.3'
implementation "com.airbnb.android:lottie:3.4.0"

Main XML file

add these lines in your main XML file

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".MainActivity">
<androidx.cardview.widget.CardView
android:layout_width="210dp"
android:layout_height="210dp"
app:cardCornerRadius="10dp"
app:cardElevation="8dp"
android:background="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:contentDescription="@string/app_name"
android:gravity="center"
android:orientation="vertical"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="UseCompoundDrawables">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:contentDescription="@string/app_name"
android:src="@drawable/overlay"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="You've won\n\u20B91011"
android:textColor="@color/black"
android:textSize="20sp"
android:textStyle="bold"/>
</LinearLayout> <com.anupkumarpanwar.scratchview.ScratchView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/scratchView"
app:overlay_height="210dp"
app:overlay_width="210dp"
app:overlay_image="@drawable/overlay_first"/>
</androidx.cardview.widget.CardView></androidx.constraintlayout.widget.ConstraintLayout>

Main JAVA file

add these line to your main java file

public class MainActivity extends AppCompatActivity {    Dialog dialog;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
dialog = new Dialog(this); ScratchView scratchView = findViewById(R.id.scratchView);
scratchView.setRevealListener(new ScratchView
.IRevealListener() {
@Override
public void onRevealed(ScratchView scratchView) {
Toast.makeText(MainActivity.this,
"Revealed!", Toast.LENGTH_SHORT).show();
dialog.setContentView(R.layout.popup_dialog);
Objects.requireNonNull(dialog
.getWindow()).setBackgroundDrawable
(new ColorDrawable(Color.TRANSPARENT));
dialog.show();
}
@Override
public void onRevealPercentChangedListener
(ScratchView scratchView, float percent) {
Log.d("Revealed", String.valueOf(percent));
}
});
}
}

Output

Thank you for your time!

You can follow me on YouTube:

Golap Barman

Visit my website

www.gbandroidblogs.com

Follow me on Instagram

Android App Developer

Follow me on Facebook

GBAndroidBlogs

--

--

Golap Gunjan Barman

Hi everyone, myself Golap an Android app developer with UI/UX designer.