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    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:
