https://github.com/swapnil1104/passcodetext

A customised EditText view serving the purpose of taking numeric One Time Password from a user. With stunning animation, and high customizability.
https://github.com/swapnil1104/passcodetext

android custom-view java jitpack library otp otpedittext passcode passcodetext

Last synced: about 4 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/swapnil1104/passcodetext
• Owner: swapnil1104
• License: apache-2.0
• Created: 2019-05-07T18:04:49.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-26T12:56:34.000Z (over 3 years ago)
• Last Synced: 2024-11-04T20:07:30.307Z (13 days ago)
• Topics: android, custom-view, java, jitpack, library, otp, otpedittext, passcode, passcodetext
• Language: Java
• Homepage:
• Size: 1.1 MB
• Stars: 111
• Watchers: 4
• Forks: 20
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# PassCodeText

[![](https://jitpack.io/v/swapnil1104/OtpEditText.svg)](https://jitpack.io/#swapnil1104/OtpEditText)

[![](https://jitpack.io/v/swapnil1104/OtpEditText/month.svg)](https://jitpack.io/#swapnil1104/OtpEditText)

[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-OtpEditText-brightgreen.svg?style=flat)](https://android-arsenal.com/details/1/7666)

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

```

```

## 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,

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

### 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.

```

    square_box

    rounded_box

    underline

    rounded_underline

```

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`.