Android: Dashed line under EditText with fixed size

Question

If I have an EditText that allows the user to enter only 6 digits. How can I create a line under each digit, with a small space between each one.

Other questions are addressing scenarios for a dashed line as a divider in a layout only.

Question 1

Question 2

Can you please explain little bit more what exactly you want. What I understood is you need edit text with only 6 digit length and with dashed line is it right? — Andy Developer, Jul 24 '17 at 07:25
@AndyDeveloper Yes that is exactly what I want. I'll add a photo to be more clearer — Motassem Jalal, Jul 24 '17 at 07:27
okey got it. One more question You need a dot line in each character or just simple dotted line for whole edittext. — Andy Developer, Jul 24 '17 at 07:30
may be you can add 6 different edittext in linearlayout with horizontal orientation and with max length only one and add style drawable to each edittext to create bottom line in your edit text. — KDeogharkar, Jul 24 '17 at 07:34

score 6 · Answer 1 · answered Jul 24 '17 at 07:49

First create a drawable file (myline.xml) which create the line.

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

<item
    android:bottom="1dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="@android:color/black"
            <!-- Change Gap & Width accroding to your need. -->
            android:dashGap="3.1dp"
            android:dashWidth="7dp" />
    </shape>
</item>

Now in your layout.xml use myline.xml in edit text background.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter Digit: "
        android:textColor="#000"
        android:textSize="18dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myline"
        android:lines="1"
        android:maxLength="6"
        android:text="123456"
        android:textColor="#000"
        android:textSize="18dp" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter Digit: "
        android:textColor="#000"
        android:textSize="18dp" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myline"
        android:lines="1"
        android:maxLength="6"
        android:text="123"
        android:textColor="#000"
        android:textSize="18dp" />
</LinearLayout>

And its done see the output in screenshot below.

Well this is good answer, but it will be too complicated because of sizes. I mean the same sizes you entered didn´t work for me. I believe it wont be the same for each device. — Motassem Jalal, Jul 24 '17 at 09:46

score 3 · Answer 2 · answered Jul 24 '17 at 07:38

3

Here is the one library that will resolve your problem.

https://android-arsenal.com/details/1/5999

answered Jul 24 '17 at 07:38

Chirag

56,621
29
151
198

This library provides exactly what I need, but I have one more question regarding it. It is written that I should add a listener to get the text. Is it possible to get in another way like a normal editText (using getText() method)? – Motassem Jalal Jul 24 '17 at 09:47
It may possible but for that you need to check the library code which is on github. I have not checked the code. – Chirag Jul 24 '17 at 10:01

score 1 · Answer 3 · answered Jul 24 '17 at 10:00

If EditText`s input is only number use this.

String zeroLeading = String.format("%06d", number)

This return zero leading with 6 lenth text. Then replace the zeros

zeroLeading = zeroLeading.replaceAll("0","_");

In some cases _ _ 2 0 4 5 like this. Bit different

String zeroLeading = String.format("%06d", number);
    int numberLen = (number+"").length();
    String underlineLeading = zeroLeading.substring(0, numberLen).replaceAll("0", "_")+zeroLeading.substring(numberLen, 6);

Android: Dashed line under EditText with fixed size

3 Answers3