How to achieve this layout using single EditText

Question

How to acheive this type of Edit Text Using Single EditText.

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 1

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) {
    }
});