Barcodes are a simple, convenient way of transferring complex or structured data from the real world to a device. ML Kit’s Barcode Scanning API allows your app to read most standard barcode formats without having users switch to a separate barcode-reading application.
Scanning barcodes can help users with simple identification and content tasks, such as looking up a product to purchase, accessing event details, or completing a form.
These design guidelines address barcode scanning using a live camera feed.
Design for this feature is based on the following principles: Instead of typing a search term, the device camera is used as a “remote control”...
Design for this feature is based on the following principles:
Navigate with a device camera
Instead of typing a search term, the device camera is used as a “remote control” to scan barcodes.
To educate users about how to scan barcodes with their camera, provide onboarding and persistent instructions.
Keep camera clear and legible
Align the camera UI components to the top and bottom edges of the screen, ensuring that text and icons remain legible when placed in front of an image.
Any non-actionable elements displayed in front of the live camera feed should be translucent to minimize obstructing the camera.
Using a camera to scan barcodes introduces unique usage requirements. Image quality needs to be adequate, and users need to be aware of how to fix image issues caused by lighting or too much distance from a barcode.
Error states should be communicated with multiple design cues (such as components and motion) and include explanations of how users can improve their search.
Live camera barcode scanning uses existing Material Design components and new elements specific to camera interaction. For code samples and demos of new elements (such as the barcode frame), check out the source code for the ML Kit Material Design showcase app on Android.
Key elements across the stages of a barcode scanning experience:
1. Top app bar
2. Barcode frame
4. Modal bottom sheet (Optional)
Top app bar
The top app bar displays information and actions relating to the current view. Related Link arrow_downward The top app bar provides persistent access to the...
The top app bar provides persistent access to the following actions:
- A button to exit the search experience
- A toggle to adjust the camera’s flash (to improve brightness)
- A Help section for troubleshooting search issues
The barcode frame is an area in the center of the screen where the user can scan a barcode. By default, the frame is a...
The barcode frame is an area in the center of the screen where the user can scan a barcode. By default, the frame is a square, but its size and aspect ratio should be adjusted by your app to match supported barcode types.
It serves three purposes:
- Confirmation: The frame shape fits the dimension of a single barcode, so it’s clear that only one barcode can be scanned at a time.
- Legibility: While simple barcode formats can be read from a distance, complex barcode formats (such as PDF417) may need a closer, higher-quality image to be accurately read. By placing a partial detection border over the barcode frame, the UI indicates that the user should move closer to scan.
- Activity: The border of the frame pulses during the “sensing” phase to indicate the app is looking for barcodes to scan.
States of the barcode frame:
1. Sensing uses a pulsing animation to indicate the app is looking for barcodes to scan
2. Display a partial border over the frame (along with a tooltip) to indicate a user needs to move closer to a barcode
3. Searching is expressed through an indeterminate progress indicator across the barcode frame
4. Errors transform the continuous barcode frame stroke style to a dotted style
Tooltips display informative text when users hover over, focus on, or tap an element. Related Link arrow_downward Tooltips display informative text to users. For example,...
Tooltips display informative text to users. For example, they express both states (displaying a message like “Searching…”) and prompt the user to the next step (displaying a message like, “Point your camera at a barcode”).
Modal bottom sheet
Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen. Related Link arrow_downward Modal bottom sheets provide access to...
Modal bottom sheets provide access to a barcode’s information while the user remains in the barcode scanning feature. The bottom sheet’s layout and content depend on the type of data returned by the barcode, for example:
- Structured data (such as contact information) can be displayed in text fields for scanning and editing
- Information from a database should be displayed in a style appropriate to viewing the content. Content types will vary. For example, social media content will have a different structure than content from a retail product.
If it’s faster or easier for the user to complete their task on another screen in an app, present the barcode information on that screen instead of a modal bottom sheet. Refer to the Experience section for more information on when and where in the app to communicate barcode information.
Live camera barcode scanning happens in three phases:
- Sense: Use the camera to look for input
- Recognize: Detect a barcode
- Communicate: Display barcode results in-line or on another screen
AI-powered systems can adapt over time. Prepare users for change—and help them understand how to train the system. Related Link arrow_downward “Sensing” refers to the...
“Sensing” refers to the camera looking for barcodes in the live camera feed. Barcode scanning begins when a user opens the barcode feature in an app.
During this phase, the app should:
- Describe how the feature works
- Communicate the app’s actions
- Guide adjustments to how the user controls the camera
Communicate that the app is looking for barcodes. The barcode frame uses a pulsing animation to indicate the app is “scanning” the camera feed, along with a tooltip prompting the user to center a barcode in the frame.
Environmental conditions can make it difficult to scan a barcode, such as locations that are too bright or too dark.
When a barcode has been detected by the camera, the app should: In this phase, a barcode is detected in the camera and read by...
When a barcode has been detected by the camera, the app should:
- Pause the camera and read the barcode’s value
- Display the value immediately if it’s structured data
- Search and display search progress if the barcode’s value needs to be looked up
In this phase, a barcode is detected in the camera and read by the Barcode Scanning API. The camera feed pauses to prevent scanning another barcode.
Barcodes containing structured data recognized by the API (such as location coordinates and calendar events) can be presented immediately to the user. If a barcode’s data is unstructured, its detailed information is retrieved from a database. The app displays a loading state while this information is retrieved.
The detection of a barcode doesn’t guarantee your app will find results. The following issues could occur:
- No relevant results: A barcode that scans successfully might not contain information relevant to your app or use case, such as scanning a barcode from an unrelated source.
- Lost network connection: If the barcode’s value is looked up in an online database, the data request can fail without an internet connection.
- Small barcode size: While simple barcode formats can be read from a distance, complex barcode formats (such as PDF417) may require a closer, higher-quality image to be read. To indicate the user must move closer to the barcode before it can be scanned, set a minimum scanning size for your app’s accepted barcode formats and use multiple design cues (such as in the barcode frame and tooltip).
Explaining predictions, recommendations, and other AI output to users is critical for building trust. Related Link arrow_downward Results from a barcode scan are displayed in...
Results from a barcode scan are displayed in a number of possible ways:
- In front of the camera (in a modal bottom sheet or dialog)
- Upon exiting the barcode scanning feature, on the screen where the barcode information can be used
To tailor the UI to your barcode use case, these navigation patterns and components are recommended:
Use case example
Remain in barcode scanner?
Results display location
Browse products in a store
Modal bottom sheet
Add a contact
Yes, until the user saves it
Modal bottom sheet or a full-screen dialog
Complete a form
No, return to the form
Fill the relevant fields in form for the user
Shrine Material theme
Shrine is a lifestyle and fashion brand that demonstrates how Material Design can be used in e-commerce. Related Link arrow_downward Barcode scanning is used in...
Barcode scanning is used in the Shrine app’s purchase flow.
Shrine’s barcode frame uses its On Primary color for its scrim. The frame border has sharp corners that express the brand logo’s geometric shape.
Shrine’s tooltip is emphasized by using custom colors, typography, and placement.