Android PinView/ OtpView

A custom control to enter a four digit code usually in cases of authentication.

How to integrate into your app?

Integrating the project is simple a refined all you need to do is follow the below steps

Step 1. Add the JitPack repository to your build file. Add it in 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:background="#cccccc"
      android:inputType="number"
      android:textColor="#FFFFFF"
      app:otp="1234"
      app:length="4"
      app:text_background_color="@color/colorAccent"
      >
</com.mukesh.OtpView>
.....

To get a callback when the user enters the otp make use of OtpListener like wise

 private OtpView otpView;
 otpView = findViewById(R.id.otp_view);
 otpView.setListener(new OtpListener() {
   @Override public void onOtpEntered(String otp) {

     // do Stuff
     Log.d("onOtpEntered=>", otp);
   }
 });

That's pretty much it and your all wrapped up.

OtpView Attributes

Attribute	Use
android:background	sets the background color for the otp view
android:inputType	sets the input type for otp view, can be text password number
android:textColor	sets the text color of the edittext inside the otp view
app:text_background_color	sets the background color of the edittext
app:otp	prefills the otp in the view when loaded
app:length	sets the lenght of the otp
app:width	sets the width of the edittext inside otp view
app:height	sets the height of the edittext inside otp view
app:space	adds space on all the sides of the edittexts
app:space_left	adds space to the left of the edittexts
app:space_right	adds space to the right of the edittexts
app:space_top	adds space to the top of the edittexts
app:space_bottom	adds space to the bottom of the edittexts
app:hint_color	sets the color for hint in the edittexts
app:hint	sets the character for hint in the edittexts

Author

Maintained by Mukesh Solanki

Contribution

• Bug reports and pull requests are welcome.
• Make sure you use square/java-code-styles to format your code.

License

Copyright 2018 Mukesh Solanki

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.