Android fingerprint

Fingerprint detection may be used to unlock a device, sign in to apps, and authenticate in-app purchases.


Standard fingerprint

Anatomy

The Fingerprint title describes the action being performed, such as “Sign in.” It shouldn’t be used to introduce Fingerprint. The secondary text uses the phase...

1. Title: The Fingerprint title describes the action being performed, such as “Sign in.” It shouldn’t be used to introduce Fingerprint.

2. User identity

3. Secondary text: The secondary text's function is to request user authorization for the use of fingerprint. The text can be altered as long as it is consistent with Android Settings.

4. Fingerprint icon
5. Fingerprint instruction text
6. Actions

Hardware sensor

When the user sees the Fingerprint icon without a circular background, it indicates they can touch the hardware sensor to have their fingerprint detected. The...

When the user sees the Fingerprint icon without a circular background, it indicates they can touch the hardware sensor to have their fingerprint detected.

Size

The Fingerprint icon should be displayed at the standard system icon size, 64dp.

64dp system icon

Layout

To communicate that the hardware fingerprint sensor needs to be touched, use a fingerprint icon without a circular background.

Icon with no circular background
Don'tDon’t tilt or distort the fingerprint icon.
Don'tDon’t add a circle behind the fingerprint icon.

Icon

When displayed on screen, the Fingerprint icon indicates that users can touch the screen itself (in the location indicated) to have their fingerprint detected. The...

When displayed on screen, the Fingerprint icon indicates that users can touch the screen itself (in the location indicated) to have their fingerprint detected.

Size

The Fingerprint icon should be displayed at the standard system icon size (36dp) within a 64dp circle.

The 36dp system icon with a 64dp circular background.
Bottom sheet dialog and fingerprint icon
Don'tDon’t change the size proportion between the system icon and the circular background.
Don'tDon’t compromise legibility by using low contrast (and low opacity) on the fingerprint icon.

Tinted icon

The circle surrounding the icon can be customized with a color, as long it it provides sufficient contrast against the fingerprint icon.

Contrast and tinted icons.
Don'tDon’t use a multicolored Fingerprint icon.

UIs with light backgrounds

On light backgrounds, use the Fingerprint icon with a dark circle background.

Specifications:

  • Color: #FFFFFF
  • Opacity: 100%

UIs with dark backgrounds

On dark backgrounds, use the Fingerprint icon with a light circle background.

Specifications:

  • Color: #000000
  • Opacity: 54%
A dark circle contains the Fingerprint icon on a light background.

States

The UI should ask the user to touch the sensor. Upon failure, provide a clear indication that the user’s fingerprint was not recognized and that...

Default state

The UI should ask the user to touch the sensor.

The default state, instructing the user to put their finger on the sensor.

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 for failure states, or Deep Orange 600 (#F4511E)

Failure states should avoid:

  • Elaborate transitions between the default and failure states
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 or tapping outside of the Fingerprint dialog.

Authentication alternatives

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


Enrollment

Before using fingerprint for authentication, the app must get the user's consent.

App settings

App settings provide a way to turn fingerprint authentication on or off.

Fingerprint authentication toggle

Authentication

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

When a user action needs to be authenticated, display the Fingerprint authentication dialog in place of your sign-in screen or during a purchase interaction.

After enrollment

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

Fingerprint dialog

During your app’s purchase flow

The user has the option to enroll their fingerprint right after making a purchase, using an existing account.

Purchase flow with Fingerprint

Specs

• Dialog left and right padding: 24dp
• Dialog top padding: 24dp
• Title bottom margin: 8dp
• Identity bottom margin: 8dp
• Secondary text bottom margin: 48dp
• Fingerprint icon bottom margin: 16dp
• Instruction text bottom margin: 24dp
• Button container height: 72dp

Up next