CODEWITHSUNDEEP
androidandroid-layouttextfield
JackyBoi
JackyBoi

Reputation: 2773

Android phone code

I am struggling to get the attached layout on the screen, especially the dashes where they will act like a single digit text field and since it is a code the next number have to jump to the next , textfield, if that is what I have to use. This is when the user recieves a code (4 digits) he have to enter it, but one number per field. enter image description here

I think the picture is self explanatory. Thankyou.

Upvotes: 0

Views: 42

Answers (2)

Amol Gursali
Amol Gursali

Reputation: 82

please Check below code that is working fine.just copy paste below code to your xml layout file.

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_test"
  android:layout_width="match_parent"
  android:layout_height="match_parent">



<LinearLayout
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="wrap_content"
        android:text="ENTER CODE"
        android:textSize="18sp"
        android:textColor="@android:color/holo_blue_dark"
        android:layout_gravity="center"
        android:layout_height="wrap_content" />


    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_margin="10dp"
        android:layout_gravity="center"
        android:layout_height="wrap_content">


        <EditText
            android:layout_width="0dp"
            android:layout_weight="1"
            android:imeOptions="actionNext"
            android:maxLength="1"
            android:inputType="number"
            android:layout_height="wrap_content" />


        <EditText
            android:layout_width="0dp"
            android:layout_weight="1"
            android:imeOptions="actionNext"
            android:maxLength="1"
            android:inputType="number"
            android:layout_height="wrap_content" />

        <EditText
            android:layout_width="0dp"
            android:layout_weight="1"
            android:imeOptions="actionNext"
            android:maxLength="1"
            android:inputType="number"
            android:layout_height="wrap_content" />

        <EditText
            android:layout_width="0dp"
            android:layout_weight="1"
            android:imeOptions="actionDone"
            android:maxLength="1"
            android:inputType="number"
            android:layout_height="wrap_content" />


    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:text="00:32"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:layout_height="wrap_content" />


    <TextView
        android:layout_width="wrap_content"
        android:text="Resend Code"
        android:textSize="15sp"
        android:textColor="@android:color/holo_blue_dark"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:layout_height="wrap_content" />


    <Button
        android:layout_width="match_parent"
        android:text="verify"
        android:layout_marginTop="10dp"
        android:background="@android:color/holo_blue_dark"
        android:layout_height="wrap_content" />

</LinearLayout>

set MaxLength=1 in edittext that did the trick and please give margin according to your requirement.

Upvotes: 0

Akshay Katariya
Akshay Katariya

Reputation: 1474

You can use this Library easy to implement & customize as per your need.

Upvotes: 1

Related Questions