Usage
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.
Principles
Design for this feature is based on the following principles...
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.
Provide feedback
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.
Components
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.
Top app bar
The top app bar provides persistent access to the following actions...
The top app bar provides persistent access to the following actions:
Barcode frame
ML Kit’s Object Detection & Tracking API contains an option to detect a “prominent object.”
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.
Tooltip
Tooltips display informative text to users.
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
Modal bottom sheets provide access to visual search results.
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:
Displaying results
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
Live camera barcode scanning happens in three phases:
Sense
Barcode scanning begins when a user opens the barcode feature in an app.
“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
Guide adjustments
Environmental conditions can make it difficult to scan a barcode, such as locations that are too bright or too dark.
Recognize
When a barcode has been detected by the camera, the app should...
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.
Make corrections
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).
Communicate
Results from a barcode scan are displayed in a number of possible ways...
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 |
Yes | 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 |
Theming
Shrine Material theme
Barcode scanning is used in the Shrine app’s purchase flow.
Barcode scanning is used in the Shrine app’s purchase flow.
Barcode Frame
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.
Tooltip
Shrine’s tooltip is emphasized by using custom colors, typography, and placement.