Motassem Jalal
Motassem Jalal

Reputation: 1314

Android: Dashed line under EditText with fixed size

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.

Like this

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

Question 1

Question 2

Upvotes: 0

Views: 5353

Answers (3)

Fr099y
Fr099y

Reputation: 774

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

Upvotes: 1

Andy Developer
Andy Developer

Reputation: 3101

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.

enter image description here

Upvotes: 6

Chirag
Chirag

Reputation: 56925

Here is the one library that will resolve your problem.

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

Upvotes: 3

Related Questions