OtpView

Aug 11, 2023 | Programming

Note: Help Needed in Maintenance. Please raise PR if you think some changes are needed and I will merge them.

Codacy Badge Travis CI Badge JitPack Badge JitPack Monthly Badge Android Arsenal Badge MIT License Badge

An OTP Box implementation for cases when single digits should be entered individually.

Installation in Your Project

Follow these easy steps to install OtpView in your project:

  1. 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' }
        }
    }
  2. Step 2: Add the dependency
    • For Java:
      dependencies {
          implementation 'com.github.aabhasr1:OtpView:v1.1.2-ktx'
      }
    • For Kotlin:
      dependencies {
          implementation 'com.github.aabhasr1:OtpView:v1.1.2'
      }

How to Use the Library?

Simply add the following XML code in your layout to show the OtpView:

<xml...>
    <in.aabhasjindal.otptextview.OtpTextView
        android:id="@+id/otp_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        app:height="40dp"
        app:width="40dp"
        app:bar_enabled="true"
        app:bar_height="2dp"
        app:length="4"
        app:otp="1234"
        app:otp_text_size="24dp">
    </in.aabhasjindal.otptextview.OtpTextView>
</xml...>

To get a callback when the user enters the OTP, implement the OTPListener interface:

private OtpTextView otpTextView;
otpTextView = findViewById(R.id.otp_view);
otpTextView.setOtpListener(new OTPListener() {
    @Override
    public void onInteractionListener() {
        // fired when user types something in the OTP box
    }

    @Override
    public void onOTPComplete(String otp) {
        // fired when user has entered the OTP fully.
        Toast.makeText(MainActivity.this, "The OTP is " + otp, Toast.LENGTH_SHORT).show();
    }
});

Additional Methods

You also have access to several additional methods, such as:

  • otpTextView.getOtpListener(); – retrieves the current OTPListener (null if nothing is set)
  • otpTextView.requestFocusOTP(); – sets the focus to the OTP box (does not open the keyboard)
  • otpTextView.setOTP(otpString); – sets the entered otpString in the OTP box (useful when OTP is retrieved from SMS)
  • otpTextView.getOTP(); – retrieves the OTP entered by the user (works for partial OTP input too)
  • otpTextView.showSuccess(); – shows the success state to the user
  • otpTextView.showError(); – shows the error state to the user
  • otpTextView.resetState(); – brings the view back to its default state

OtpView Attributes

The following attributes can be customized:

Attribute Use
android:textColor sets the color of the OTP text
app:otp sets the OTP in the OTP view
app:length sets the number of OTP boxes in the OTP view
app:otp_text_size sets the OTP text size in the OTP view
app:hide_otp determines if the OTP entered is shown to the user

Troubleshooting

Here are some tips to troubleshoot common issues:

  • If the OTP is not displaying correctly, check for typos in the XML attributes.
  • Ensure that the listener is correctly implemented to capture the OTP input.
  • If you’re having issues with the layout, ensure that the android:layout_width and android:layout_height attributes are set correctly.
  • For any unexpected crashes or bugs, make sure to check the logs for error messages.
  • For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox