OtpEditText

A customised EditText view serving the purpose of taking numeric One Time Password from a user. With stunning animation, and high customizability.

Description

A customized EditText view serving the purpose of taking numeric One Time Password from a user. With stunning animation, and high customizability.

Programming language: Java

License: Apache License 2.0

Tags: Android     Animations     Java     Views     Custom View     EditText     Android-library    

Latest version: v1.0.2-rc

README

PassCodeText

A customised EditText view serving the purpose of taking numeric One Time Password from a user. With stunning animation, and high customizability.

[Demo with underline](images/demo2.gif) [Dark theme demo](images/dark_theme_demo.gif) [Error animation](images/err_anim.gif) [Hint usage](images/hint.gif)

Packed with features

• Add custom character limit.
• Animation supported on wrong input
• Use your own color scheme.
• Do not allow user changing cursor position for smooth functioning.
• Hint is supported!

How to integrate the library in your app?

Step 1: 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.swapnil1104:OtpEditText:{current_lib_ver}'
}

Step 3. Add OtpEditText to your layout file

<com.broooapps.otpedittext2.OtpEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="false"
    android:cursorVisible="false"
    android:digits="0123456789"
    android:inputType="number"
    android:maxLength="6"
    android:padding="8dp"
    android:textSize="30sp"
    app:oev_primary_color="@color/red"
    app:oev_secondary_color="@color/light_gray"
    />

Usage

GetOtpValue() method usage

String otpValue = otpEditText.getOtpValue();
if (otpValue != null) {
    textDisplay.setText("Entered Value: " + otpEditText.getOtpValue());
}

This method when invoked, will either return the OTP value, in case this is invoked before the user inputs the desired length of characters, a shake animation will be triggered implicitly.

How to customize the view.

Trigger Error Animation

To trigger error animation for incorrect input, or any other use case, use.

OtpEditText otpEditText;
....
otpEditText = findViewById(R.id.oev_view);
....
//Invalid input, animation triggered
otpEditText.triggerErrorAnimation();

Setting desired length for the OTP(One time password code)

To set custom length of the OtpEditText, use

android:maxLength="{your length}"

This will automatically generate the right amount of boxes for user to input the code in.

Setting primary custom color

The primary color signifies the boundary of the box that requires input from user. To change that use,

### Setting secondary custom color
The secondary color signifies the boundary of the boxes that do not require input from user.
To change that use,

```app:oev_secondary_color="@color/{your_color}"```

###  Using multiple style options.
There are 4 style options that are available within the library for now.
- rounded box
- square box
- underline
- rounded underline

To use any of these styles, please add ```app:oev_box_style="@string\{box_style_input}"```
attribue.
I have provided string resources for simpler usage.

<string name="style_square">square_box</string>
<string name="style_rounded">rounded_box</string>
<string name="style_underline">underline</string>
<string name="style_rounded_underline">rounded_underline</string>

Suppose you want the rounded underline option to be displayed. Then, please add:
`app:oev_box_style="@string/style_rounded_underline" ` in the OtpEditText xml code.

### Masking input characters with Asterisk.
Functionality to mask the input with any special character has been introduced. 
To mask the input;

app:oev_mask_input="true"

xml property must be introduced in the XML layout file.

#### Masking with any other special character.
To mask input with any character other than `*` you can do the following;

app:oev_mask_character="ø"

P.S. Please note that, in case of masking with a special character other than `*`, specify string with length one, otherwise the input string will be truncated to length 1.

### OnComplete callback for the View
To implement an OnComplete callback, use `setOnCompleteListener` setter method and pass on an interface implementation.
eg:

editText.setOnCompleteListener(new OnCompleteListener() { @Override public void onComplete(String value) { Toast.makeText(MainActivity.this, "Completed " + value, Toast.LENGTH_SHORT).show(); } });

This callback will be triggered when the number of characters is equal to the `android:maxLength` value.

## For optimum usage; Please note.
* Specify `android:textSize` according to your needs.
* Specify `android:padding` according to your needs, there are no paddings drawn by default.
* Specify `android:layout_height` according to the `textSize` you've provided. The view will try to center the text with a vertical biasing of `0.6f`.