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?
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:
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.