How to Implement OTP View in Android?

An OTP View or PinView in android is a widget that allows users to enter their PIN, OTP, etc. They are generally used for two-factor authentication or phone number verification by OTP. A sample video is given below to get an idea about what we are going to do in this article.

Note: In order to implement OtpView, Android 4.1+ (API 16) must be used.

Step-by-Step Implementation

Step 1: Create a new project in Android Studio and select Java as the language. If you are new to Android refer to How to Create/Start a New Project in Android Studio.

Step 2: Navigate to Gradle Scripts > settings.gradle(Project Setting) and add the MavenCentral inside repositories in dependencyResolutionManagement {}.

allprojects {
repositories {
…
  mavenCentral()
}
}

Step 3: Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.  

implementation ‘io.github.chaosleung:pinview:1.4.4’

Now update compileSdk version and targetSdk to 33 and Sync the project by clicking on Sync Now option appearing in the top right corner.

android {
  compileSdk 33

  defaultConfig {
     ……

   targetSdk 33
  }

Step 4: Navigate to the app > res > layout > activity_main.xml and add the below code to that file.

XML

<?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"
    tools:context=".MainActivity"
    android:layout_marginTop="30dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OTPView "
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <com.chaos.view.PinView
        android:id="@+id/pinview"
        app:itemCount="6"
        app:itemWidth="50dp"
        app:itemHeight="50dp"
        android:gravity="center"
        android:layout_marginTop="60dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:itemBackground="@color/white"
        android:layout_gravity="center"
        android:inputType="number"
        android:cursorVisible="true"
        app:hideLineWhenFilled="false"
        app:itemRadius="10dp"
        style="@style/PinWidget.PinView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ></com.chaos.view.PinView>

    <Button
        android:id="@+id/show_otp"
        android:layout_width="140dp"
        android:layout_height="60dp"
        android:text="Show OTP"
        app:layout_constraintTop_toBottomOf="@+id/pinview"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="20dp"
        ></Button>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. 

Java

package com.example.otp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.chaos.view.PinView;

public class MainActivity extends AppCompatActivity {

    PinView pinView;
    Button button;

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

        // hookers (binding view)
        pinView=findViewById(R.id.pinview);

        button=findViewById(R.id.show_otp);

        // setting onClickListener on Button
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // getting the PinView data
                String otp=pinView.getText().toString();

                // Toast to show the OTP Data
                Toast.makeText(MainActivity.this, otp, Toast.LENGTH_SHORT).show();

            }
        });
    }
}

Output: