Biometric authentication in Android Kotlin - UI Render Trace

Component - Biometric authentication

This UI component allows users to authenticate themselves using their fingerprint or face recognition. It shows a prompt asking the user to verify their identity biometrically, enhancing security and convenience.

Widget Tree

BiometricPromptDialog
├── TitleTextView
├── SubtitleTextView
├── DescriptionTextView
├── BiometricIconView
└── CancelButton

The biometric prompt dialog is the main container. It includes a title at the top, a subtitle below it, a description text explaining the request, a biometric icon (fingerprint or face), and a cancel button at the bottom.

Render Trace - 6 Steps

Step 1: BiometricPromptDialog

Step 2: TitleTextView

Step 3: SubtitleTextView

Step 4: DescriptionTextView

Step 5: BiometricIconView

Step 6: CancelButton

State Change - Re-render

Trigger:User successfully authenticates biometrically

Before

BiometricPromptDialog is visible, waiting for user input

→

After

BiometricPromptDialog is dismissed, app proceeds to authenticated state

Re-renders:The entire BiometricPromptDialog is removed from the screen

UI Quiz - 3 Questions

What happens when the biometric prompt dialog appears?

A A notification appears at the top of the screen

B The app navigates to a new screen with a login form

C A modal dialog overlays the app screen with instructions and a biometric icon

D The app closes automatically

Key Insight

Biometric authentication dialogs should be simple and clear, focusing user attention on the security action. Using a modal dialog with clear text and an icon helps users understand what to do quickly. Always provide a cancel option for user control.