how to show 5 blank/digits with white spaces in android?

Question

I want to show this UI eventually

enter image description here i have this xml:

    <LinearLayout
        android:id="@+id/inputBox"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@drawable/input_box_idle" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center" >

            <EditText
                android:id="@+id/verificationCodeEditText1"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <EditText
                android:id="@+id/verificationCodeEditText2"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <EditText
                android:id="@+id/verificationCodeEditText3"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <EditText
                android:id="@+id/verificationCodeEditText4"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <EditText
                android:id="@+id/verificationCodeEditText5"
                style="@style/textOnBg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="-"
                android:textColor="#00bcfe"
                android:textSize="16dp"
                android:textStyle="italic" >
            </EditText>

            <!--
                 <EditText
        android:id="@+id/verificationCodeEditText"
        style="@style/textOnBg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="-   -   -   -"
        android:textColor="#00bcfe"
        android:textSize="16dp"
        android:textStyle="italic" >
    </EditText>
            -->

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

which gives that result:

enter image description here

I have tried to separate the editText to 5 editText controls

but how can I make them look like one transparent unit?

If I use only one editText - I have a problem that the user can override white spaces.

<style name="textOnBg" parent="android:Widget.TextView">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:shadowColor">#d3ebf3</item>
    <item name="android:shadowDx">0</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
    <item name="android:textColor">#2f4a53</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">18sp</item>
</style>

try this `android:background="@android:color/transparent"`for EditText — Ketan Ahir, Dec 19 '13 at 11:42
What happens if you write "\u0020-\u0020-\u0020-\u0020-\u0020"? Looks like you would like it to be a single EditText from you picture. — cYrixmorten, Dec 19 '13 at 11:55

score 0 · Answer 1 · answered Dec 19 '13 at 11:46

0

use following EditText

 <EditText
    android:id="@+id/edittext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:padding="10dp"
    android:text="-" />

answered Dec 19 '13 at 11:46

Ketan Ahir

6,678
1
23
45

score 0 · Answer 2 · edited May 23 '17 at 11:50

I would recommend to do this programmatically with a TextWatcher similar to what is done with this text watcher for a date "mask" answered here

https://stackoverflow.com/a/16889503/418505

This will allow you to configure a masking/spacing requirement for the input custom to your requirements (more importantly styling like you want)

edit for question:

TextWatcher mInputWatcher = new TextWatcher() {

    volatile boolean isInAfterTextChanged = false;

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

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

    @Override public void afterTextChanged(Editable s) {
        if (!isInAfterTextChanged) {
            isInAfterTextChanged = true;

            String unformattedInput = s.toString();
            String sanitizedInString = unformattedInput.replaceAll("[^\\d]", "");
            StringBuilder sb = new StringBuilder();
            int inputLength = sanitizedInString.length();
            for(int i = 0; i < 4; i++) {
                if(i < inputLength) {
                    sb.append(sanitizedInString.charAt(i));
                } else {
                    //If we are at the current input length, that means
                    //we need to empty the space for the cursor
                    if(i == inputLength) {
                        sb.append(" "); 
                    } else {
                        //Otherwise continue the mask
                        sb.append("-");     
                    }

                }
                //Add a space to separate each input if we are not on the last inut 
                if(i < 3) {
                    sb.append(" ");       
                } 
            }
            String formattedInput = sb.toString();
            mEditTextView.setText(formattedInput);
            //Set the selecion to the next input field
            mEditTextView.setSelection(inputLength * 2);
            //Reset the inAfterTextChange field
            isInAfterTextChanged = false;
        }
    }
}

This callback will allow you to hook into the user input and make sure they are entering the right kind of input, as well as style the current input like you desire.

A side effect of this implementation is that you can manage user input more simply as a single EditText rather than the individual boxes, unless you desire to treat each input as a separate box.

In the case of needing individual boxes, i would create a custom subclass of a view, which would extend a LinearLayout, which had a background (that you could steal from the default resources that android provides for edit text), and had a configurable way to initialize with N number of boxes needed that you could configure (either with custom attributes or from the code). Let me know if you have questions on implementation, i can supply examples of the like that fit your requirements.

how can I block the user from setting the selection mark on a white space? — Elad Benda2, Dec 21 '13 at 20:53
Edited the response, this illustrates how you can maintain control of where the selection of the edit text is placed (making sure it is in the right spot with respect to the mask). This is in the example code, `mEditTextView#setSelection` — Selecsosi, Dec 23 '13 at 20:03

how to show 5 blank/digits with white spaces in android?

2 Answers2