Edit text for OTP with Each letter in separate positions

Question

I\'m working on a application which asks for OTP when user want to reset his password for which I need a text like the one in attached Image... What I thought to proceed wi

Answer 1

SOLUTION 1

You can subclass a TextWatcher and implement your own logic.

public class OTPTextWatcher implements TextWatcher {

    private EditText view;
    private List otpDigitViews;
    private OTPCompleteListener otpListener;
    private static int lastOtpLength;

    public OTPTextWatcher(EditText otpView, List otpDigitViews, OTPCompleteListener listener) {
        view = otpView;
        this.otpDigitViews = otpDigitViews;
        this.otpListener = listener;
    }


    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void afterTextChanged(Editable editable) {

        String digit1 = otpDigitViews.get(0).getText().toString();
        String digit2 = otpDigitViews.get(1).getText().toString();
        String digit3 = otpDigitViews.get(2).getText().toString();
        String digit4 = otpDigitViews.get(3).getText().toString();
        String currentDigit = editable.toString();
        final String inputValue = digit1 + digit2 + digit3 + digit4;

        if (inputValue.length() == 4) {
            otpListener.onOTPFilled(inputValue);
        } else {

            if (currentDigit.length() >= 1
                    && view != otpDigitViews.get(3)) {
                if (view != null)
                    view.focusSearch(View.FOCUS_RIGHT).requestFocus();
            } else {
                if (currentDigit.length() <= 0 && view.getSelectionStart() <= 0) {
                    try {
                        view.focusSearch(View.FOCUS_LEFT).requestFocus();
                    } catch (NullPointerException e) {
                        LogHelper.printErrorLog("There is no view left to current edit text");
                    }
                }
            }

            if (OTPTextWatcher.lastOtpLength == 4) {
                otpListener.onOTPIncomplete();
            }
        }

        OTPTextWatcher.lastOtpLength = inputValue.length();
    }

    public interface OTPCompleteListener {
        void onOTPFilled(String otp);

        void onOTPIncomplete();
    }
}

Implementaion :

protected void setEventListeners() {
    OTPTextWatcher.OTPCompleteListener otpCompleteListener = new OTPTextWatcher.OTPCompleteListener() {
        @Override
        public void onOTPFilled(String otp) {
            showLoading();
            verifyOTP(otp);
        }

        @Override
        public void onOTPIncomplete() {
        }
    };

    for (EditText etOTP : otpViewList) {
        etOTP.addTextChangedListener(new OTPTextWatcher(etOTP, otpViewList, otpCompleteListener));
    }
}

SOLUTION 2

integrate android-otpview-pinview to your application.