Edit text for OTP with Each letter in separate pos

Question

Hi 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 with is individual text for each of the letter, All of them arranged in linear layout of horizontal orientation with some margin... and max length as 1 so only one letter can be entered in each editText... Is that a right Approach?? Any Suggestions??

Answer 1

You can make a custom Editext and add it in your xml file, find below a custom class

public class CustomEntryEdittext extends LinearLayout { 

    public int entryCount = 0; //count of boxes to be created
    private int currentIndex = 0;
    private static int EDITTEXT_MAX_LENGTH = 1; //character size of each editext
    private static int EDITTEXT_WIDTH = 40;
    private static int EDITTEXT_TEXTSIZE = 20; //textsize
    private boolean disableTextWatcher = false, backKeySet = false;
    private TextWatcher txtWatcher;
    private onFinishListerner mListerner;


    public CustomEntryEdittext(Context context) {
        super(context, null);
    }

    public CustomEntryEdittext(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomEntryEdittext(Context context, AttributeSet attrs, int defStyle) {
        this(context, attrs, defStyle, 0);
    }

    public CustomEntryEdittext(Context context, AttributeSet attrs, int defStyle, int defStyleRes) {
        super(context, attrs);
        init(context, attrs);
    }

    public void setOnFinishListerner(onFinishListerner listerner) {
        this.mListerner = listerner;
    }

    public interface onFinishListerner {
        void onFinish(String enteredText);
    }


    private void init(Context context, AttributeSet attrs) {

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.CustomEntryEdittext, 0, 0);


        entryCount = a.getInteger(R.styleable.CustomEntryEdittext_editextCount, 0);

        a.recycle();

        setOrientation(LinearLayout.HORIZONTAL);
        setGravity(Gravity.CENTER_VERTICAL);

        for (int i = 0; i < entryCount; i++) {

            //creates edittext based on the no. of count
            addView(initialiseAndAddChildInLayout(i, context), i);
        }

    }

    //method focuses of previous editext
    private void getPreviousEditext(int index) {
        if (index > 0) {
            EditText edtxt = (EditText) getChildAt(index - 1);
            disableTextWatcher = true;

             edtxt.setText("");
            edtxt.requestFocus();
            disableTextWatcher = false;

        }
    }

    //method focuses of previous editext
    private void getPreviousEditextFocus(int index) {
        if (index > 0) {
            EditText edtxt = (EditText) getChildAt(index - 1);
            disableTextWatcher = true;
            edtxt.requestFocus();
            disableTextWatcher = false;
        }
    }


    //method to focus on next edittext
    private void getNextEditext(int index) {
        if (index < entryCount - 1) {
            EditText edtxt = (EditText) getChildAt(index + 1);
            edtxt.requestFocus();
        }
    }


    private View initialiseAndAddChildInLayout(int index, Context context) {
        final EditText editext = new EditText(context);
        editext.setMaxWidth(1);
        editext.setTag(index);
        editext.setGravity(Gravity.CENTER);
        editext.setTextSize(EDITTEXT_TEXTSIZE);
        editext.setInputType(EditorInfo.TYPE_CLASS_NUMBER);
        editext.setFilters(new InputFilter[]{new InputFilter.LengthFilter(EDITTEXT_MAX_LENGTH)});
        LayoutParams param = new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1);
        editext.setLayoutParams(param);
        editext.addTextChangedListener(txtWatcher = new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {


            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                currentIndex = Integer.parseInt(editext.getTag().toString());


                if (editext.getText().toString().length() == 1 && !disableTextWatcher) {
                    getNextEditext(currentIndex);
                } else if (editext.getText().toString().length() == 0 && !disableTextWatcher) {// && !isFirstTimeGetFocused && !backKeySet) {
                    getPreviousEditext(currentIndex);
                }

            }

            @Override
            public void afterTextChanged(Editable s) {


            }
        });
        editext.setOnKeyListener(new OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if (keyCode == KeyEvent.KEYCODE_DEL) {
                    currentIndex = Integer.parseInt(editext.getTag().toString());
                    if (editext.getText().toString().length() == 0 && !disableTextWatcher) {
                        getPreviousEditextFocus(currentIndex);
                    } else {
                        disableTextWatcher = true;
                        editext.setText("");
                        disableTextWatcher = false;
                    }
                    backKeySet = true;
                }

                return true;
            }


        });
        editext.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if ((event != null && (event.getKeyCode() == KeyEvent.KEYCODE_ENTER)) || (actionId == EditorInfo.IME_ACTION_DONE)) {
                    if(currentIndex==entryCount-1 && getEnteredText().length()==entryCount)
                    {
                        mListerner.onFinish(getEnteredText());
                    }
                }
                return false;
            }
        });

        return editext;
    }


    public String getEnteredText() {
        String strEnteredValue = "";
        for (int i = 0; i < getChildCount(); i++) {
            EditText editText = (EditText) getChildAt(i);
            if (editText.getText() != null && editText.getText().toString().length() > 0)
                strEnteredValue = strEnteredValue + editText.getText().toString();

        }
        return strEnteredValue;
    }

    public void clearCustomEntryEdittext() {
        for (int i = 0; i < getChildCount(); i++) {
            EditText editText = (EditText) getChildAt(i);
            editText.setText("");
        }
        EditText editText = (EditText) getChildAt(0);
        editText.requestFocus();
    }
}

//and add it in your xml file

<com.custom.widget.CustomEntryEdittext
android:id=”@+id/custom_unique_edittext”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_centerInParent=”true”
app:editextCount=”6″>
</com.custom.widget.CustomEntryEdittext>

For reference check below link

https://madoverandroid.wordpress.com/2017/07/11/edittext-with-separate-box-for-each-letter-customentryedittext/

Answer 2

You can try this, by making TextWatcher more Generic, so its easy to use and understand

Use below class:

public class GenericTextWatcher implements TextWatcher
    {
        private View view;
        private GenericTextWatcher(View view) 
        {
            this.view = view;
        }

        @Override
        public void afterTextChanged(Editable editable) {
            // TODO Auto-generated method stub
            String text = editable.toString();
            switch(view.getId())
            {

            case R.id.editText1:
                if(text.length()==1)
                    et2.requestFocus(); 
                break;
            case R.id.editText2:
                if(text.length()==1)
                    et3.requestFocus();
                else if(text.length()==0)
                    et1.requestFocus();  
                break;
            case R.id.editText3:
                if(text.length()==1)
                    et4.requestFocus();
                else if(text.length()==0)
                    et2.requestFocus();
                break;
            case R.id.editText4:
                if(text.length()==0)
                    et3.requestFocus();
                break;
            }
        }

        @Override
        public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
            // TODO Auto-generated method stub
        }

        @Override
        public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
            // TODO Auto-generated method stub
        }
    }

How to use above class

et1.addTextChangedListener(new GenericTextWatcher(et1));
et2.addTextChangedListener(new GenericTextWatcher(et2));
et3.addTextChangedListener(new GenericTextWatcher(et3));
et4.addTextChangedListener(new GenericTextWatcher(et4));

Here et1,et2,et3 and et4 are your EditTexts, I know its bad naming convention as per Java Standard, but you can replace it with yours.

P.S You can find the xml design for this here GitHub some other, sample design xml for reference

Answer 3

Use 4 different EditText.Use the below code to change the focus after subsequent entry.

private EditText editText1;
private EditText editText2;
private EditText editText3;
private EditText editText4;

    editText1.addTextChangedListener(new TextWatcher() {

            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (editText1.getText().toString().length() == 1)     //size as per your requirement
                {
                    editText2.requestFocus();
                }
            }

            public void beforeTextChanged(CharSequence s, int start,
                                          int count, int after) {
            }

            public void afterTextChanged(Editable s) {
            }

        });

    editText2.addTextChangedListener(new TextWatcher() {

            public void onTextChanged(CharSequence s, int start, int before, int count) {
                if (editText2.getText().toString().length() == 1)     //size as per your requirement
                {
                    editText3.requestFocus();
                }
            }

            public void beforeTextChanged(CharSequence s, int start,
                                          int count, int after) {
            }

            public void afterTextChanged(Editable s) {
            }

        });

and so on...

Concatenate the text from all the EditText.

Answer 4

You can try this if you want to add some extra logic for delete the OTP, i create it based on the answer from A.R. make sure you set maxlength = 2 for all edittext

public class GenericTextWatcher implements TextWatcher
{
    private View view;
    private GenericTextWatcher(View view)
    {
        this.view = view;
    }
    @Override
    public void afterTextChanged(Editable editable) {
        // TODO Auto-generated method stub
        String text = editable.toString();
        switch (view.getId()) {

            case R.id.etOTP1:
                if (text.length() > 1) {
                    etOTP1.setText(String.valueOf(text.charAt(0)));
                    etOTP2.setText(String.valueOf(text.charAt(1)));
                    etOTP2.requestFocus();
                    etOTP2.setSelection(etOTP2.getText().length());
                }
                break;
            case R.id.etOTP2:
                if (text.length() > 1){
                    etOTP2.setText(String.valueOf(text.charAt(0)));
                    etOTP3.setText(String.valueOf(text.charAt(1)));
                    etOTP3.requestFocus();
                    etOTP3.setSelection(etOTP3.getText().length());
                }
                if (text.length() == 0){
                    etOTP1.requestFocus();
                    etOTP1.setSelection(etOTP1.getText().length());
                }
                break;
            case R.id.etOTP3:
                if (text.length() > 1){
                    etOTP3.setText(String.valueOf(text.charAt(0)));
                    etOTP4.setText(String.valueOf(text.charAt(1)));
                    etOTP4.requestFocus();
                    etOTP4.setSelection(etOTP4.getText().length());
                }
                if (text.length() == 0){
                    etOTP2.requestFocus();
                    etOTP2.setSelection(etOTP2.getText().length());
                }
                break;
            case R.id.etOTP4:
                if (text.length() == 0){
                    etOTP3.requestFocus();
                    etOTP3.setSelection(etOTP3.getText().length());
                }
                break;
        }
    }
    @Override
    public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
    }

    @Override
    public void onTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {
    }
}