How to build an OtpView or a PinView in android?
A key part of any app these days is phone number verification, Whether it is for two-factor authentication or for phone number verification or any other purpose it has become an important part of the app. Now there are tons of services that help you achieve this. But the problem is to develop that view where the user will be entering this code or the one-time password. In most cases sitting and coding that view could be time-consuming and could lead to having an errorneos code and is not always simple and straightforward. That's where OtpView or PinView comes into play.
We developed a beautify and simply to use library that will let you modify the view so it fits into your app perfectly and at the same time provide you with the best way to handle the view.
Supporting Android PinView/OtpView
Android PinView/OtpView is an independent project with ongoing development and support made possible thanks to donations made by these awesome backers. If you’d like to join them, please consider:
How to integrate into your app?
Integrating the project is simple all you need to do is follow the below steps
Step 1. Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}Step 2. Add the dependency
dependencies {
implementation 'com.github.mukeshsolanki:android-otpview-pinview:<latest-version>'
}How to use the library?
Okay seems like you integrated the library in your project but how do you use it? Well its really easy just add the following to your XML design to show the OtpView.
.....
<com.mukesh.OtpView
android:id="@+id/otp_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:inputType="number"
android:itemBackground="@color/colorPrimary"
android:textColor="@android:color/white"
app:itemCount="6"
app:lineColor="@color/colorPrimary"
app:viewType="line"
/>
.....To get a callback when the user enters the OTP make use of OnOtpCompletionListener likewise
private OtpView otpView;
otpView = findViewById(R.id.otp_view);
otpView.setListener(new OnOtpCompletionListener() {
@Override public void onOtpCompleted(String otp) { // do Stuff
Log.d("onOtpCompleted=>", otp);
}
});
That’s pretty much it and you're all wrapped up.
