Create your own customized pin code layout in 3 simple steps

There are several libraries you can use for verification or pin codes, as much as I am happy to relay on libraries, there is no better accomplishment than fulfilling the task yourself, allowing you to customize to your exact needs.

In this tutorial I will show how to create a 4-digit pin code reader in Kotlin in an easy, adjustable way following these 3 steps:

1. Create the xml file
2. Initialize the views
3. Implement Navigation between the editText views

The UI

I’ll start off with depicting what we want to achieve -a layout that lets the user insert 4 digits separately with a straight forward flow between them. This is different than having one editText box, which is one shared editable line for all the digits. Our look resembles a pin code or verification code where the user needs to insert a fixed number of digits when receiving an OTP or anything of the sort.

1. Create the xml file

The UI consists of 4 identical editText boxes in a horizontal linear layout, here is a snippet from the activity_main.xml file:

If the line android:maxLength=”2" has you puzzled, you are paying close attention! We will get back to that later.

2. Initialize the views

One of my main goals was to build a dynamic, modular code, hence I will be using loops to handle the editText views.

First, create a local array to hold the editText views, and a companion object for the number of digits:

In the OnCreate() method we use a loop that iterates through the linear layout’s children, verifying and casting them to editText views, and adding them to the array. We then assign Text Changed listeners.

3. Implement Navigation between the editText views

What’s left to take care of is hopping between the editText boxes, giving focus to the correct box, whether it is after insert, delete or user tapping on a view.

Let’s start with the afterTextChanged function:

Up until here this might seem like a straight forward task, but now things get a little bit complicated (but we have a happy ending, so stay with us!). EditText isn’t always so friendly, for instance, setting maxLength to 1, will not allow you to change the digit without deleting it first, which is not what we want. Therefore, we do a little trick, in the xml file, for every digit we set

android:maxLength="2"

and the moment the new number is inserted, the previous input is removed using the ‘swap a and b variables’ you were probably tested on in your first programming lesson.

And we add this piece of code to the afterTextChanged function:

The last case we must take care of is hitting the backspace, this we resolve using the keyboard events in the initialization of the editText views back in OnCreate():

Deleting the text in the previous editText will trigger the text listener, therefore we add

if (s.isBlank()) {
    return
}

to the afterTextChanged method.

Let’s put that function all together:

This code enables you to design as you’d like, according to your needs, and easily sticking to your app’s overall look. For instance:

> If you are using this code for inserting credit card digits you can initialize the editText hint with X’s.

> If you want the editText boxes to show dots as in passwords, rather than showing the inputted number change the inputType into:

android:inputType="numberPassword"

> You can also add a background drawable to make the box into a circle/ box you name it!

Some extra functions

Here are a few more functions that you might need to use for you pin code layout:

I hope this tutorial was useful and you enjoyed reading it. Feel free to ask questions and comment.