How to Implement OTP View in Android?
Last Updated :
28 Apr, 2025
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:
Similar Reads
How to Implement TNImage Library in Android? Android is an open-source operating system, based on the Linux kernel and used in mobile devices like smartphones, tablets, etc. Further, it was developed for smartwatches and Android TV. Each of them has a specialized interface. Android has been one of the best-selling OS for smartphones. Android O
3 min read
How to Implement View Binding Inside Dialog in Android? In android, View binding is a feature that allows you to more easily write code that interacts with views. Once view binding is enabled in a module, it generates a binding class for each XML layout file present in that module. An instance of a binding class contains direct references to all views th
4 min read
How to Take Sub-View Screenshot in Android? A Sub-view in Android can be any UI element present on the screen that has a parent layout or a parent view. It is simply a view inside a view. Assuming, we create a TextView in our activity. As this TextView is present inside the main layout, it is a sub-view of the main layout. Similarly, other el
4 min read
How to Implement MeowBottomNavigation in Andriod? Meow Bottom Navigation in Android is simple & curved & material bottom navigation, it allows the user to switch to different activities/fragments easily with a beautiful animation in the bottom navigation. A sample video is given below to get an idea about what we are going to do in this art
2 min read
How to Implement Shapeable ImageView in Android? In Android, ShapeableImageView is used to change the shape of your image to circle, diamond, etc. Also, you can set a corner radius to your ImageView. You can do much more by using this ShapeableImageView with minimal code. So in this article, we are going to make a ShapableImageView in android. By
5 min read