PasscodeView in Android with Example

18 Jul, 2021
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.
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.
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 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:
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android SDK and it's Components
How to Communicate Between Fragments in Android?
Flutter - Custom Bottom Navigation Bar
Retrofit with Kotlin Coroutine in Android
Arrays in Java
Split() String method in Java with examples
Arrays.sort() in Java with examples
Object Oriented Programming (OOPs) Concept in Java
Reverse a string in Java