Blog Infos
Author
Published
Topics
Published

One-time password (OTP), also called dynamic password, one-time PIN, and one-time authorization code (OTAC), is password that is only valid for one login session. Most commonly, it is received in a format of 4 or 6 digit code, through SMS, and it used for implementation of two-factor authentication.

Implementing OTP support inside our mobile apps requires us to build a custom UI input field, which should be strictly customized for handling the received OTP code.

Motivation

Since Jetpack Compose is a new UI toolkit for Android development, I wanted to write an article regarding how we can make our own custom OTP input field using BasicTextField.

Custom OTP input

Creating input fields with Compose UI is quite simple. There is already an existing Material component called TextField, that we can use. It has a lot of built-in functionalities because it follows Material design principles. That also comes with some drawbacks, for example, if we wanted to customize our input field, we would have struggled to do so with TextField, because it isn’t as flexible.

That’s why we need another component that is a bit lower-level compared to TextField, but it enables us to customize it the way that suits us the best. I’m talking about BasicTextField.

Implementation

Firstly, lets implement a simple BasicTextField that enables it to open a keyboard with only numbers. We can do that by setting up the keybaordOptions parameter with keyboardType set to NumberPassword. If you’ve wondered why we use NumberPassword and not just Number, it is because the keyboard that is opened for the Number keyboard type contains dot, comma and dash characters, and we don’t need anything other than digits inside our OTP input field.

Next step we need to do is to implement more restrictions inside our input field. In case we know that our OTP must be a 6 digit code, our input field should be able to receive max 6 digits, and not allow user to input more than that.

To accomplish max characters restriction, we need to update our onValueChage behaviour with the additional check regarding the length of our new string. In case the new string contains more than 6 characters, we don’t want to update our otpValue. By doing that, we are going to ignore any user input for a 7th character.

Job Offers

Job Offers


    Android Test Automation Engineer

    Komoot
    Remote
    • Full Time
    apply now

    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

OUR VIDEO RECOMMENDATION

,

Branching out to Jetpack Compose

As one of the most widely used social media platforms, Twitter is always hunting for ways to better connect its users. In early 2021 the Client UI team at Twitter began the task of integrating…
Watch Video

Branching out to Jetpack Compose

Nacho López & Chris Banes
Staff Software Engineer
Twitter

Branching out to Jetpack Compose

Nacho López & Chr ...
Staff Software Engin ...
Twitter

Branching out to Jetpack Compose

Nacho López & C ...
Staff Software Engineer
Twitter

Jobs

Functionality-wise this seems like a decent OTP input field. But we really need to do something regarding its style.

Since OTP is an important step for user authorization, and sometimes the user is not familiar with this concept, it is quite necessary to design our input field in a way that it is clear what is expected from the user. In our case, we require our user to input a 6-digit code; this can be represented as six small blocks of input fields that the user needs to fill in.

The first thing that came up in my mind when thinking about how I could create this, was to implement six small TextFields and make them interact with each other. It is safe to say that is not a clean solution; it really looks like overkill, and it can get quite complex making the cursor transition between six TextFields.

That’s why I started to research the possibilities for styling our BasicTextField. It turns out, there is a parameter called decorationBox, that helps us to add decorations like images, hint, placeholder, background color, etc. It is a composable lambda, that contains access to innerTextField, that basically represents our original BasicTextField. Inside our decorationBox function, we can decorate our innerTextField, and change the way our BasicTextField looks. So, we end up rendering the composable inside our decorationBox on the screen instead of the regular BasicTextField.

OTP decorationBox

The idea here, is to utilize decorationBox by constructing the look of our OTP input the way we want it. In my example I’m going to make six Text composables with rounded borders, and they will display corresponding characters of the user’s OTP input value.

This can be done with Row composable that will use repeat six times, in order to make six Text components with Spacer between them (because our example covers the OTP code of six digits).

There is one more thing that we need to accomplish when building our custom Row with six Texts, we need to pass the right digits from our OTP input value to the corresponding Texts. Because we have index information in our repeat function, we are going to use it in order to get the corresponding character from the input string. The one thing we need to check here, is that the length of our input string can be shorter than six; in those cases, we need to pass empty string to Texts that are not filled at that moment.

The current solution looks quite nice, in my opinion, there is only one more improvement that would be nice to have and that is some indicator to show the currently focused field where we should place our next character that user inputs.

In order to get the currently focused place, we can just access the length of the current OTP input value, and that is the index of our currently focused field. Because we want to highlight it, we can make the color of its border a bit darker and we can increase the borders width.

Voila!

Final thoughts

I tried to show and explain to you how I made my own OTP input field. Hopefully you’ve learned a thing or two, and you are going to be able to use this knowledge to customize your own OTP input fields.

If you would like to access the source code, here is the Github repo of this example with a little bit cleaner code.

I want to thank you for your time! If you found this article helpful, please follow for more similar content, and if you prefer a bite-sized content about Android, you can consider following me on Twitter. In case you want to connect on a more professional level, here is my LinkedIn.

This article was originally published on proandroiddev.com on December 19, 2022

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE
blog
Yes! You heard it right. We’ll try to understand the complete OTP (one time…
READ MORE

Leave a Reply

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

Fill out this field
Fill out this field
Please enter a valid email address.

Menu