Harsh Sharma Harsh Sharma - 1 month ago 16
Android Question

How to achieve this layout using single EditText

How to acheive this type of Edit Text Using Single EditText.
enter image description here

I am using this edit text in verification of otp in my app.

I am able to do this thing with 6 Edit Text like this my_layout.xml
is it possible to do this thing using single edit text.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:wheel="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="To complete the installation,\nplease enter the 6-digit\nverification code."
android:id="@+id/textView4"
android:textColor="@color/black"
android:gravity="center" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLength="1"
android:gravity="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLength="1"
android:gravity="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLength="1"
android:gravity="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLength="1"
android:layout_marginLeft="15dp"
android:gravity="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLength="1"
android:gravity="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLength="1"
android:gravity="center" />
</LinearLayout>

</LinearLayout>

Answer

You have to implement TextWacher and delete each at a time for this, Your EditText looks like this

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/editText"
    android:singleLine="true"
    android:text="______"
    android:inputType = "textNoSuggestions"
    android:letterSpacing="0.4" -->Its the spacing of letter
    android:textSize="29sp" />

And here is the implementation

EditText editText;
String text;
boolean delete = false;


    text = editText.getText().toString();

    editText.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            text = editText.getText().toString();
            if (count > after)
                delete = true;

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {


            StringBuilder sb = new StringBuilder(s.toString());
            int replacePosition = editText.getSelectionEnd();

            if (s.length() != 6) { //where 6 is the character underline per text
                if (!delete) {
                    if (replacePosition < s.length())
                        sb.deleteCharAt(replacePosition);
                } else {
                    sb.insert(replacePosition, '_');
                }

                    if (replacePosition < s.length() || delete) {
                        editText.setText(sb.toString());
                        editText.setSelection(replacePosition);
                    } else {
                        editText.setText(text);
                        editText.setSelection(replacePosition - 1);
                    }
                }


            }

            delete = false;

        }

        @Override
        public void afterTextChanged(Editable s) {
        }
    });


}
Comments