TextInputEditText fix character length with custom design underline

Question

I want to design like below :

Before enter user input :

User input numbers

Is it possible to extend TextInputEditText to achieve this request?

I have been looking for the design discussion,

how can i underline each character in edittext?

Can I underline text in an android layout?

But it seems not quite match what I want.

First I thought that I would use the letterSpacing, but the underline has the problem. Also for different screen resolution and font size, the letterSpacing can be the problem, it cannot fit into one line. I need to make sure it would be in one line.

Any suggestion to achieve that? If had better way, i would like to avoid using four edit text to achieve, is it possible to modify in one editText?

you can make this view by using 4 different edit text and manage focus of each edit text programmatically . to get the value from edittext merge values of each textbox. set maximumlenth of each text box is 1 — Aashutosh Kumar, May 31 '17 at 05:16
Thanks a lot. This implementation comes to my mind also. I am just curious to know is there any other more elegant ways to handle such UI request? — rodent_la, May 31 '17 at 06:16

score 0 · Accepted Answer · edited May 31 '17 at 12:26

try this my friend

create one xml layout file like this

                <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="30dp"
                android:layout_marginLeft="60dp"
                android:layout_marginRight="60dp"
                android:layout_marginTop="20dp"
                android:orientation="horizontal"
                android:weightSum="4">

                <EditText
                    android:id="@+id/edDigit1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:hint="1"
                    android:imeOptions="actionNext"
                    android:inputType="number"
                    android:maxLength="1" />

                <EditText
                    android:id="@+id/edDigit2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:hint="2"
                    android:imeOptions="actionNext"
                    android:inputType="number"
                    android:maxLength="1" />

                <EditText
                    android:id="@+id/edDigit3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:hint="3"
                    android:imeOptions="actionNext"
                    android:inputType="number"
                    android:maxLength="1" />

                <EditText
                    android:id="@+id/edDigit4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:hint="4"
                    android:imeOptions="actionNext"
                    android:inputType="number"
                    android:maxLength="1" />

            </LinearLayout>

**now in your activity file**

      EditText edDigit1, edDigit2, edDigit3, edDigit4;
      edDigit1 = (EditText) findViewById(R.id.edDigit1);
      edDigit2 = (EditText) findViewById(R.id.edDigit2);
      edDigit3 = (EditText) findViewById(R.id.edDigit3);
      edDigit4 = (EditText) findViewById(R.id.edDigit4);

     edDigit1.addTextChangedListener(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) {
                if (edDigit1.getText().toString().equals("")) {
                    edDigit1.requestFocus();
                } else {
                    edDigit2.requestFocus();
                }

            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
        edDigit2.addTextChangedListener(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) {
                if (edDigit2.getText().toString().equals("")) {
                    edDigit2.requestFocus();
                } else {
                    edDigit3.requestFocus();
                }

            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
        edDigit3.addTextChangedListener(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) {
                if (edDigit3.getText().toString().equals("")) {
                    edDigit3.requestFocus();
                } else {
                    edDigit4.requestFocus();
                }


            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

Thanks a lot. I will try it. – rodent_la May 31 '17 at 16:16 — rodent_la, May 31 '17 at 16:16

TextInputEditText fix character length with custom design underline

1 Answers1