Create Captcha in android using Scratch View to display hidden Image Text

How to scratch activity screen to display imageview image like lottery scratch card view dynamically.

Captcha is one of the most usable technology against online bots and viruses because only humans can pass the Captcha code and it dose not readable through any kind of computer programs and viruses. As the heavy increase of android application users there is a more than thousand apps providing user data and accessing them like banking apps, social networking apps etc. So to make even more secure then now android developers starts using Captcha technique which will help them to avoid unauthorized activity of Bots and Viruses. So here is the complete step by step tutorial for Create Captcha in android using Scratch View to display hidden Image Text.

What we are doing in this project :

We are using scratch view instead of simple textview and when user scratch the scratch view he will find a image below it now just read the image and select the image name from given radio button groups .

android-project-download-code-button

Note :  Please follow the below steps to add support library in your android application project :

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.0.0'
    compile 'com.github.cooltechworks:ScratchView:v1.0'

}
repositories {
    jcenter()
    maven { url "https://jitpack.io" }
}

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

scratch_view_library

Here your go friends….Now We are going start coding.

How to Create Captcha in android using Scratch View to display hidden Image Text.

Code for MainActivity.java file.

package com.android_examples.captchawithscratchview_android_examplescom;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import com.cooltechworks.views.ScratchImageView;

public class MainActivity extends AppCompatActivity {

    Button button;
    RadioButton kitkat, lollipop, marshmallow;
    RadioGroup radioGroup;
    ScratchImageView scratchImageView;

    @Override
    protected void onCreate( Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = (Button) findViewById(R.id.button);
        scratchImageView = (ScratchImageView) findViewById(R.id.scratchView1);

        radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
        kitkat = (RadioButton) findViewById(R.id.KitKat);
        lollipop = (RadioButton) findViewById(R.id.Lollipop);
        marshmallow = (RadioButton) findViewById(R.id.Marshmallow);

        scratchImageView.setRevealListener(new ScratchImageView.IRevealListener() {
            @Override
            public void onRevealed(ScratchImageView scratchImageView) {

                //Don't Write Any Code Here
            }
        });

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if (!scratchImageView.isRevealed()) {

                    Toast.makeText(MainActivity.this, "Please Scratch The Whole Image First", Toast.LENGTH_LONG).show();

                } else {

                    switch (radioGroup.getCheckedRadioButtonId()) {

                        case R.id.Lollipop:
                            Toast.makeText(MainActivity.this, "Wrong Captcha Entered.", Toast.LENGTH_LONG).show();
                            break;

                        case R.id.Marshmallow:
                            Toast.makeText(MainActivity.this, "Wrong Captcha Entered.", Toast.LENGTH_LONG).show();
                            break;

                        case R.id.KitKat:
                            Toast.makeText(MainActivity.this, "You Have Entered Correct Captcha Code.", Toast.LENGTH_LONG).show();
                            break;
                    }
                }
            }
        });

    }
}

Code for activity_main.xml layout file.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.android_examples.captchawithscratchview_android_examplescom.MainActivity">

    <com.cooltechworks.views.ScratchImageView
        android:id="@+id/scratchView1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/kitkat"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_below="@+id/scratchView1"
        android:layout_centerHorizontal="true">

        <RadioButton
            android:id="@+id/Lollipop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android Lollipop"
             />

        <RadioButton
            android:id="@+id/KitKat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android KitKat"
             />

        <RadioButton
            android:id="@+id/Marshmallow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android Marshmallow"
            />

    </RadioGroup>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CLICK HERE TO VERIFY SELECTED IMAGE CAPTCHA"
        android:id="@+id/button"
        android:layout_below="@+id/radioGroup"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


</RelativeLayout>

Screenshots :

Create Captcha in android using Scratch View to display hidden Image Text

Captcha-ScratchView-2

Captcha-ScratchView-3

Click here to download Create Captcha in android using Scratch View to display hidden Image Text project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *