A. Top App Bar

The top app bar is composed of a “Back” icon button, title, flash toggle, and a gallery thumbnail for users who would like to upload an existing photo of a barcode.

B. Scan Window (Auto Capture Mode Only)

In auto capture mode, a scan window appears around the alignment guide to highlight areas that fall outside the boundaries for a successful scan. The scan window’s opacity level is configurable to accommodate user needs.

C. Alignment Guide (Auto Capture Mode Only)

In auto capture mode, the alignment guide indicates the target area for successfully scanning a barcode. Barcodes outside the alignment guide are not detected. The alignment guide can be resized to accommodate a variety of use cases.

D. Top App Bar

The zoom control allows users to zoom in or out by dragging the slider, or by interacting with the icon buttons within the control.

E. Auto/Manual Toggle

The auto/manual toggle enables users to switch between auto and manual capture modes.

Anatomy of the barcode scanner in auto capture mode

In auto capture mode, users can scan a barcode by positioning it within the on-screen alignment guide. Once the barcode is properly positioned, a green appears around it by default. As the scanner prepares to capture the barcode, the green line gradually becomes thicker, and the phone vibrates to confirm a successful scan.

Capturing a barcode with automatic scan mode

Users can switch to auto mode by tapping the toggle control. In manual capture mode, all detected barcodes are outlined in blue by default. Tapping a barcode changes its outline to green. Users can then tap the green-outlined barcode to scan it or select other barcodes to scan by tapping on them.

Capturing a barcode with manual scan mode

Users can zoom in and out by dragging the slider. Alternatively, they can tap either the “Zoom in” or ”Zoom out” icon button, with each tap adjusting the zoom by 5%.

Zooming in and out with manual capture mode