Steps To Create a Custom-Dialog-Box to Enter Four Digit OTP Number in Android

Dialog box is a small window that prompts the user to make a decision or enter additional information. A dialog does not fill the full-screen and is normally used for modal events that require users to take an action before they can proceed.

And a Custom-dialog-box is same as dialog-box only difference is that in custom dialog-box you design dialog-box  on  your requirement. For Example- create dialog-box to enter four digit OTP number  in Which  you  take  four edit Text  with  equal distance to enter password and take one  “submit “ button.

 To create Custom-dialog-box follows step-by-step:

i)First create a new project in android studio and design layout for dialogBox.

 Android Layout File:

XML file, for custom  dialog.

File : res/layout/custom_dialog.xml

To, design layout you set  accordingly  margin,padding-left,right,top and bottom,height and width etc.

<LinearLayout

android:id=“@+id/layout_header”
android:layout_width=“match_parent”
android:layout_height=“44sp”
android:background=“@color/light_green”>

<TextView
android:layout_width=“match_parent”
android:layout_height=“44sp”
android:gravity=“center”
android:text=“Enter One Time Password”
android:textColor=“@color/white”
android:textSize=“@dimen/dm_20sp” />

</LinearLayout>
<LinearLayout
android:id=“@+id/layout_otp”
android:layout_width=“match_parent”
android:layout_height=“@dimen/dm_90sp”
android:layout_below=“@+id/layout_header”
android:orientation=“horizontal”>

<EditText
android:id=“@+id/editTextone”
android:layout_width=“@dimen/dm_40sp”
android:layout_height=“@dimen/dm_42sp”
android:inputType=“numberPassword”
android:maxLength=“1”
android:nextFocusRight=“@+id/editText_two”>

<requestFocus />
</EditText>

<EditText
android:id=“@+id/editTexttwo”
android:layout_width=“@dimen/dm_40sp”
android:layout_height=“@dimen/dm_42sp”
android:inputType=“numberPassword”
android:maxLength=“1”/>

<EditText
android:id=“@+id/editTextthree”
android:layout_width=“@dimen/dm_40sp”
android:layout_height=“@dimen/dm_42sp”
android:inputType=“numberPassword”
android:maxLength=“1”/>

<EditText
android:id=“@+id/editTextfour”
android:layout_width=“@dimen/dm_40sp”
android:layout_height=“@dimen/dm_42sp”
android:inputType=“numberPassword”
android:maxLength=“1”/>

</LinearLayout>

<Button
android:layout_width=“match_parent”
android:layout_height=“@dimen/dm_42sp”
android:layout_below=“@+id/layout_otp”
android:text=“SUBMIT” />

ii) In Activity

First create Custom_DialogBox.java class and write the code below

File : Custom_DialogBox.java

First  use changedListener in  onCreate  method:

 editText_one.addTextChangedListener(this);
editText_two.addTextChangedListener(this);
editText_three.addTextChangedListener(this);
editText_four.addTextChangedListener(this); 

And final class of  “Custom_DialogBox.java ”  :-

public class Custom_dialogbox extends Dialog implements TextWatcher

 And then Create automatically override method for TextWatcher. 

@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {}

To enter only one value to edit Text and cursor move on next edit Text automatically and when we want to remove password one by one sequencially in which cursor move back automatically,to write the cobe below on this method: 

@Override
public void afterTextChanged(Editable editable) {if (editable.length() == 1) {
if (editText_one.length() == 1) {
editText_two.requestFocus();
}

if (editText_two.length() == 1) {
editText_three.requestFocus();
}
if (editText_three.length() == 1) {
editText_four.requestFocus();
}
} else if (editable.length() == 0) {
if (editText_four.length() == 0) {
editText_three.requestFocus();
}
if (editText_three.length() == 0) {
editText_two.requestFocus();
}
if (editText_two.length() == 0) {
editText_one.requestFocus();
}
}

 After you add this Custom_DialogBox.java class in your MainActivity.java

Custom_DialogBox custom_dialog = new Custom_DialogBox(this);
custom_dialog.show();

 Follow the above steps and see a custom-dialog-box accurately.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *