PasscodeView in Android with Example

Here, we are going to see that how we can implement numeric PasscodeView in android studio and using it how users can set numeric passwords to his/her application.

What is Passcode view?

A Passcode view is a custom view with a keyboard and characters or numbers display to be used for authentication. Applications of numeric password(Pin code)

• Use to protect our private details and personal information in an Android app.
• It becomes very convenient to use numeric passwords or pins.
• No one can easily guess such or crack such passwords.
• It works as an app Lock to our app on our device.

What we are going to build in this article?

In this article, we will be using a dependency to add passcode view in our project and then use it to import passcode view in activity_main.xml file, and then we have to set passcode using MainActivity.java file. Note that we are going to implement this application using Java language. A sample video is given below to get an idea about what we are going to do in this article.

Step by step implementation

Step 1: Creating a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio? 

Note: Do not forget to check the option Use legacy android.support libraries. Otherwise, the application may crash when we will install it on our mobile phone. Refer to the below image.

Step 2: Navigate to Gradle Scripts > build.gradle(module) file and add the following dependency in it. After that click on sync now to save changes in the project.

implementation 'com.hanks:passcodeview:0.1.2'

Step 3: Creating a new activity 

Follow the below process to create a new activity. Right-click on layout > New >Activity > Empty Activity. Select language as java and name it as passcode_activity.

Step 4: Working on XML files

Working with activity_main.xml file:

Here we will be creating a Passcode view, which is imported from the dependency which we added in starting of our project. Use the below code in the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- Relative layout as parent layout-->
<RelativeLayout
    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"
    tools:context=".MainActivity">

    <!-- Passcode view , which is imported
         from the dependency which have been added in
         gradle file-->
    <com.hanks.passcodeview.PasscodeView
        android:id="@+id/passcodeview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#222222"
        app:correctStateColor="#71bb4d"
        app:firstInputTip="Enter a passcode of 5 digits "
        app:normalStateColor="#ffffff"
        app:numberTextColor="#222222"
        app:passcodeLength="5"
        app:passcodeViewType="set_passcode"
        app:wrongStateColor="#ea2b46" />

</RelativeLayout>

After executing the above code, the design of activity_main.xml looks like this

Working with activity_passcode.xml file:

This is the screen that occurs after our password has been accepted successfully or when we enter a correct password. Use the below code in the activity_passcode.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- Constraint layout as parent layout-->
<android.support.constraint.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"
    tools:context=".passcode_activity">

    <!-- textview to display welcome message-->
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome"
        android:textColor="#00C809"
        android:textColorHint="#10B618"
        android:textSize="40sp"
        android:textStyle="bold|italic"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.235" />

    <!-- textview displaying message "to"-->
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="to"
        android:textColor="#02E30C"
        android:textSize="24sp"
        android:textStyle="bold|italic"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.094" />

    <!-- image view to display image of geeksforgeeks logo-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        app:layout_constraintVertical_bias="0.166"
        app:srcCompat="@drawable/gfgimage" />

</android.support.constraint.ConstraintLayout>

After executing the above code design of activity_passcode.xml looks like.

Step 5: Working with Java files

Working on 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.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.hanks.passcodeview.PasscodeView;

public class MainActivity extends AppCompatActivity {

    // initialize variable passcodeview
    PasscodeView passcodeView;

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

        passcodeView = findViewById(R.id.passcodeview);

        // to set length of password as here
        // we have set the length as 5 digits
        passcodeView.setPasscodeLength(5)
                // to set pincode or passcode
                .setLocalPasscode("12369")

                // to set listener to it to check whether
                // passwords has matched or failed
                .setListener(new PasscodeView.PasscodeViewListener() {
                    @Override
                    public void onFail() {
                        // to show message when Password is incorrect
                        Toast.makeText(MainActivity.this, "Password is wrong!", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onSuccess(String number) {
                        // here is used so that when password
                        // is correct user will be
                        // directly navigated to next activity
                        Intent intent_passcode = new Intent(MainActivity.this, passcode_activity.class);
                        startActivity(intent_passcode);
                    }
                });
    }
}

Working with passcode_activity.java file:

Use the below code in the passcode_activity.java file.

Java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class passcode_activity extends AppCompatActivity {

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

    @Override
    public void onBackPressed() {
        // this method is used to finish the activity
        // when user enters the correct password
        this.finishAffinity();
    }
}

Congratulations!! , we have successfully implemented a numeric password using passcode view. Here is the final output of our application.

Output: