Android EditText Circle Box Input

Question

I did a lot of research but couldn't find anything on the subject. I also no longer have a starting point for which keywords to look for.

My concern is to create an input field as can be seen in the picture. The user should be able to simply enter a number code here.

Surely there should be a library for this?

Answer 1

Well, there are some libraries for creating this type of EditText like OtpView and android-otpview-pinview but I did this manually by using some edittext attributes and addTextChangedListener().

First of all, Use android:inputType="number" and android:maxLength="1" to allow user to type only numbers.

Example:

1) XML file:

      <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:gravity="center"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/otp1"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionNext"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp2"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionNext"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp3"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionNext"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp4"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionDone"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp5"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionDone"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/otp6"
                android:layout_width="40dp"
                android:layout_height="45dp"
                android:backgroundTint="@color/login_start_color"
                android:gravity="center"
                android:imeOptions="actionDone"
                android:importantForAutofill="no"
                android:inputType="number"
                android:maxLength="1"
                android:textColor="@color/black"
                android:textColorHighlight="@color/darker_gray"
                android:textColorLink="@color/login_start_color"
                android:textCursorDrawable="@drawable/cursor_drawable"
                android:textSize="24sp"
                android:textStyle="bold" />
        </LinearLayout>

2) Add addTextChangedListener() for your all edittext to jump into next edittext automatically.

Java file:

private void setotpinput() {
    otp1.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 (!s.toString().trim().isEmpty()) {
                otp2.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });
    otp2.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 (!s.toString().trim().isEmpty()) {
                otp3.requestFocus();
            } else {
                otp1.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });
    otp3.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 (!s.toString().trim().isEmpty()) {
                otp4.requestFocus();
            } else {
                otp2.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });
    otp4.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 (!s.toString().trim().isEmpty()) {
                otp5.requestFocus();
            } else {
                otp3.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });
    otp5.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 (!s.toString().trim().isEmpty()) {
                otp6.requestFocus();
            } else {
                otp4.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });
    otp6.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 (!s.toString().trim().isEmpty()) {
                otp1.requestFocus();
            } else {
                otp5.requestFocus();
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });
}

Preview:

Answer 2

You can create circle editText by using following code.

shape.xml [res/drawble]

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

    <size
        android:width="50dp"
        android:height="50dp" />
    <stroke
        android:width="2dp"
        android:color="@color/black" />

</shape>

activity_main.xml

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shape"
    android:gravity="center"
    android:inputType="number"/>

If you need to use only one digit in the edit text use following attribute in your editText

android:maxLength="1"

Full Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:gravity="center"
        android:inputType="number"
        android:maxLength="1" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:gravity="center"
        android:inputType="number"
        android:maxLength="1"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:gravity="center"
        android:layout_marginLeft="8dp"
        android:inputType="number"
        android:maxLength="1"
        android:layout_marginStart="8dp" />

    <EditText
        android:id="@+id/editText4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:gravity="center"
        android:layout_marginStart="8dp"
        android:inputType="number"
        android:maxLength="1"
        android:layout_marginLeft="8dp" />

</LinearLayout>

Hope you helpful.