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.

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" />
...