Patterns– Fingerprint

Fingerprint

Android only

Fingerprint detection may be used to unlock a device, sign in to apps, and authenticate purchases using Google Play and some third-party apps.

To authenticate purchases using Fingerprint, display the Fingerprint authentication dialog.

Fingerprint is not as secure as a strong PIN or password. Authentication alternatives include a user’s account password, an app PIN, and device credentials.

When to use

Upon opening the app
During your app’s purchase flow
In your app settings
After enrollment

Icon

Fingerprint icon size: 24dp
Circle surrounding icon: 40dp

Fingerprint detection in Material Design for secure access

Enrollment Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Before invoking Fingerprint in your app, you must get consent from the user that they want to use Fingerprint as an alternate way of authenticating themselves.

Possible times to invite users to try Fingerprint include:

  • Upon opening the app
  • During your app’s purchase flow
  • In your app settings
  • After enrollment

Upon opening the app

The user is offered the option to enroll their fingerprint right after logging in.

The user is offered the option to enroll their fingerprint right after creating their account.

During your app’s purchase flow

Enroll fingerprint for purchases with Material Design

The user is offered the option to enroll their fingerprint right after making a purchase with an existing account.

In your app settings

The user is offered the option to enable Fingerprint as their lock within an app’s settings.

After enrollment

After enrollment, present the Fingerprint dialog whenever you need authentication from the user.

Authentication Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Your app’s users can set up the option to log in or authenticate purchases using Fingerprint.

When a user action needs to be authenticated, display the Fingerprint authentication dialog in place of your login screen.

Title

Use the title to describe the action being performed, such as “Sign in.” The title should not be used to introduce Fingerprint.

Secondary text

Use the phase “Confirm fingerprint.” This wording maintains consistency with Android Settings.

You may combine the above text with the associated user action, such as “Confirm fingerprint to complete purchase.”

Material Design fingerprint confirmation dialog

Confirm fingerprint dialog

Material Design fingerprint confirmation dialog specs

Specifications for confirm fingerprint dialog:

Dialog left and right padding: 24dp
Dialog top padding: 24dp
Title bottom margin: 20dp
Subtitle bottom margin: 28dp
Fingerprint icon right margin: 16dp
Touch sensor height: 40dp
Touch sensor call to action top and bottom padding: 12dp
Button container height: 52dp
Button container bottom padding: 8dp
Button height: 36p
Button right and left padding: 8dp

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Default state

Ask the user to put their finger on the sensor.

User places finger on sensor for Material Design

Default state asking the user to put their finger on the sensor

Success state

Once the fingerprint is recognized, change the dialog to a success message and the image to the fingerprint icon with the check mark.

Specification:

  • Use your app’s primary color for the success text and icon, or Teal 500 (#009688)

Success states should avoid:

  • Displaying two success states simultaneously
  • Extensive transitions between default and success states
Material Design success: fingerprint recognized

Success message stating that the fingerprint has been recognized

Failure state

Upon failure, provide a clear indication that the user’s fingerprint was not recognized and that they should try again, using the error icon either with or without a status message.

Specification:

  • Use your app’s color assigned to failure states, or Deep Orange 600 (#F4511E)

Failure states should avoid:

  • Extensive transitions between default and failure states
Material Design error: Fingerprint not recognized

Error message stating the fingerprint was not recognized.

Exiting

Provide alternative ways to exit the dialog. At minimum, provide an affordance to close the Fingerprint dialog, such as a “Cancel” button.

Authentication alternatives

Fingerprint should not be the only way to authenticate. Provide alternative authentication methods, such as:

Fingerprint icon Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Usage and size

The Fingerprint icon should be displayed at the standard system icon size, 24dp, within a 40dp circle.

Fingerprint icon in Material Design, 24dp in 40dp circle

40dp circle

Fingerprint icon in Material Design, 24dp in 40dp circle

24dp system icon

Default icon

Users will be asked to look for this icon for places where they can use Fingerprint.

Specifications:

  • Circular background color: #607D8B
  • Works on white backgrounds
Material Design fingerprint icon for user authentication

Default icon

Material Design dialog box with default icon

Dialog box and default icon

Tinted icon

The circle surrounding the icon can be customized with a color that provides appropriate contrast against the lines of the Fingerprint icon.

Customize circle color for Fingerprint icon in Material Design

Contrast and tinted icons

Avoid multi-colored Fingerprint icon in Material Design

Don’t.

Don’t use a multi-colored Fingerprint icon.

UIs with light backgrounds

Use the Fingerprint icon with a dark circle background.

Specifications:

  • Color: #FFFFFF
  • Opacity: 100%
Material Design fingerprint icon on dark circle background

Dark circle background with the Fingerprint icon for a light background

UIs with dark backgrounds

Use the Fingerprint icon with a light circle background.

Specifications:

  • Color: #000000
  • Opacity: 54%

Icon with no circular background

Apps requiring a more versatile Fingerprint icon may eliminate the circular background.

Versatile Fingerprint icon without circular background in Material Design

Icon with no circular background

Dialog box with icon, no circular background, Material Design

Dialog box with icon with no circular background

Material Design fingerprint icon should not be tilted

Don’t.

Don’t tilt or distort the fingerprint icon.

Reauthentication Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Reauthentication applies when users need to confirm their identity before continuing.

Reauthentication uses:

  • To prevent unauthorized viewing of sensitive information
  • To guard against unauthorized purchases
  • When cryptographic keys expire and users are asked to reconfirm their identity
Material Design Reauthentication Dialog

Reauthentication dialog

Alternatively, if a user forgets about Fingerprint authentication, you can ask users to use their backup password and remind them of the Fingerprint option next time.

Material Design dialog for backup password

Dialog asking user for their backup password