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 33defaultConfig {
……targetSdk 33
}
Step 4: Navigate to the app > res > layout > activity_main.xml and add the below code to that file.
<? 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.
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: