Edit Text for OTP Using different boxes in Android.

Edit Text for OTP Using different boxes in Android.

The below solution takes into consideration:

  1. Auto focusing to the next edit text on entering one digit of OTP in the focussed edit text.
  2. Auto focusing to the previous edit text on deleting one digit of OTP in the focussed edit text.

We can achieve this by TextWatcher interaface and by make it more generic.

1. Create a new project “OtpWithBoxes“.

2. In res/drawable right click on drawble and create a new .xml file name edittext_curve_bg.xml for making edit text background curved and attractive and Copy below code in your .xml file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#f2f2f2" />

    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />


    <stroke
        android:width="3dp"
        android:color="#DA6464" />

</shape>

3. Now, Copy the below code to your activity_main.xml file.



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    tools:context=".MainActivity">
    <LinearLayout
        android:id="@+id/root_otp_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:padding="10dp"
        android:orientation="horizontal"
        android:weightSum="4">

        <EditText
            android:id="@+id/otp_edit_box1"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_marginRight="20dp"
            android:gravity="center"
            android:inputType="number"
            android:maxLength="1"
            android:textSize="30sp"
            android:background="@drawable/edittext_curve_bg"/>

        <EditText
            android:id="@+id/otp_edit_box2"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_marginRight="20dp"
            android:gravity="center"
            android:textSize="30sp"
            android:inputType="number"
            android:maxLength="1"
            android:background="@drawable/edittext_curve_bg"/>

        <EditText
            android:id="@+id/otp_edit_box3"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_marginRight="20dp"
            android:gravity="center"
            android:textSize="30sp"
            android:inputType="number"
            android:maxLength="1"
            android:background="@drawable/edittext_curve_bg"/>

        <EditText
            android:id="@+id/otp_edit_box4"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:gravity="center"
            android:textSize="30sp"
            android:layout_weight="1"
            android:inputType="number"
            android:maxLength="1"
            android:background="@drawable/edittext_curve_bg" />


    </LinearLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/root_otp_layout"
        android:layout_centerHorizontal="true"
        >

        <Button
            android:id="@+id/verify_otp_btn"
            android:background="@color/colorAccent"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:textSize="20sp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:layout_marginTop="30dp"
            android:textColor="#ffffff"
            android:text="Verify"
            android:layout_centerHorizontal="true"/>

    </RelativeLayout>

</RelativeLayout>

4.Now, Create a java class name GenericTextWatcher.java and implements with TextWatcher interface then copy the below code in your class.

public class GenericTextWatcher implements TextWatcher {
    private final EditText[] editText;
    private View view;
    public GenericTextWatcher(View view, EditText editText[])
    {
        this.editText = editText;
        this.view = view;
    }

    @Override
    public void afterTextChanged(Editable editable) {
            String text = editable.toString();
            switch (view.getId()) {

                case R.id.otp_edit_box1:
                    if (text.length() == 1)
                        editText[1].requestFocus();
                    break;
                case R.id.otp_edit_box2:

                    if (text.length() == 1)
                        editText[2].requestFocus();
                    else if (text.length() == 0)
                        editText[0].requestFocus();
                    break;
                case R.id.otp_edit_box3:
                    if (text.length() == 1)
                        editText[3].requestFocus();
                    else if (text.length() == 0)
                        editText[1].requestFocus();
                    break;
                case R.id.otp_edit_box4:
                    if (text.length() == 0)
                        editText[2].requestFocus();
                    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) {
    }
}

In this class requestFocus() method is used to send the transfer focus to next field.

5. Then, In MainActivity copy the below code and add your on own feature on verify button.

public class MainActivity extends AppCompatActivity {

    EditText otp_textbox_one, otp_textbox_two, otp_textbox_three, otp_textbox_four;
    Button verify_otp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        otp_textbox_one = findViewById(R.id.otp_edit_box1);
        otp_textbox_two = findViewById(R.id.otp_edit_box2);
        otp_textbox_three = findViewById(R.id.otp_edit_box3);
        otp_textbox_four = findViewById(R.id.otp_edit_box4);
        verify_otp = findViewById(R.id.verify_otp_btn);


        EditText[] edit = {otp_textbox_one, otp_textbox_two, otp_textbox_three, otp_textbox_four};

        otp_textbox_one.addTextChangedListener(new GenericTextWatcher(otp_textbox_one, edit));
        otp_textbox_two.addTextChangedListener(new GenericTextWatcher(otp_textbox_two, edit));
        otp_textbox_three.addTextChangedListener(new GenericTextWatcher(otp_textbox_three, edit));
        otp_textbox_four.addTextChangedListener(new GenericTextWatcher(otp_textbox_four, edit));


        verify_otp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Login Successfull", Toast.LENGTH_SHORT).show();

            }
        });


    }

}

Now you can run your application and you will get desired output.

Hope this will Helpful for you.

One thought on “Edit Text for OTP Using different boxes in Android.

  1. I have an entry for 9 digits. But using the Generic Textwatcher, the typing speed is very slow. It takes a minimum of 2 seconds to go to the next edittext. Could you help me out with this problem?

Leave a Reply

Your email address will not be published. Required fields are marked *