Skip to content

Latest commit

 

History

History
117 lines (99 loc) · 4.91 KB

README.md

File metadata and controls

117 lines (99 loc) · 4.91 KB
Raw

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

GitHub contributors

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.