An Easy Way to Make Reactive Android Pin Code Feature with Secure Data

Many years ago, making pin code with secure data was not easy without Data Binding. You might create an XML file along with the custom view class, but with Data Binding, you can make a pin code feature easier.

I will demonstrate how to use Data Binding by making a pin code feature that updates the UI reactively according to data changed.

What's Android Data Binding?
The Data Binding Library is a support library that allows you to bind UI components in your layouts to data sources in your app using a declarative format rather than programmatically. -- Data Binding Library

I was thinking, “Why do we have to use Data Binding when we have Kotlin Syntactic where we can access UI components directly from fragment/activity?” Data Binding allows you to access ViewModel directly from the XML file reactively, and we can have a simple expression that doesn’t need any programmatic code inside fragment/activity.

How to implement it.

Let's start with PinCodeViewModel.kt which contains our add and remove pin code logic.

package com.him.secured_pincode.ui.main

import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class PinCodeViewModel : ViewModel() {

    val pinCode = MutableLiveData<String>().also {
        it.value = ""
    }

    val numPadListener = object : NumPadListener {
        override fun onNumberClicked(number: Char) {
            val existingPassCode = pinCode.value ?: ""
            val newPassCode = existingPassCode + number
            pinCode.postValue(newPassCode)
        }

        override fun onEraseClicked() {
            val droppedLast = pinCode.value?.dropLast(1) ?: ""
            pinCode.postValue(droppedLast)
        }
    }

}

Create pin code dots and change the color reactively

Create a layout_pin_code_dots.xml. The file contains the pin dots and changes each white dot to a purple dot when the user enters the pin code one by one by adding the simple expression into the dots like this:

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

    <data>

        <variable
            name="pinCode"
            type="androidx.lifecycle.MutableLiveData&lt;java.lang.String>" />
    </data>

....
        <View
            android:id="@+id/dot1"
            android:layout_width="@dimen/pincode_dot_size"
            android:layout_height="@dimen/pincode_dot_size"
            android:background="@drawable/pass_code_dot_selector"

<-- We will change the first dot to a purple dot when the user entered the first pin code -->
            android:enabled="@{pinCode.length() >= 1}" />

        <View
            android:id="@+id/dot2"
            android:layout_width="@dimen/pincode_dot_size"
            android:layout_height="@dimen/pincode_dot_size"
            android:layout_marginStart="16dp"
            android:background="@drawable/pass_code_dot_selector"
            android:enabled="@{pinCode.length() >= 2}" />
...

Create a num pad XML file and add a callback into each button where we can add pin code into the view model directly without having any extra code inside fragment/activity.

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

    <data>

        <variable
            name="numPadListener"
            type="com.him.secured_pincode.ui.main.NumPadListener" />

    </data>

...
        <Button
            style="@style/passCodeButton"
            android:onClick="@{(v) -> numPadListener.onNumberClicked('1')}"
            android:text="1" />

        <Button
            style="@style/passCodeButton"
            android:layout_marginStart="24dp"
            android:onClick="@{(v) -> numPadListener.onNumberClicked('2')}"
            android:text="2" />
...

That does it - this is how easy it is using Data Binding for making a pin code feature. Share if you have any other ideas - you can find the source code on Github

In the next part, I will demonstrate an easy way to secure your pin code on Android.

An Easy Way to Make Reactive Android Pin Code Feature with Secure Data

Him Sama

Join the conversation

Get our stories delivered