Choose the Right Scanner UI for Your Use Case#

In this guide, you will learn how to integrate the scanner into your app’s user interface to fit various use cases. You will first learn how to add the data capture view to your app and then how to further customize this view to provide the most intuitive and efficient user experience. This guide will cover three main ways of displaying the view in your app:

  • Display the scanner in full screen

  • Display the scanner in split screen

  • Display the scanner in a tab view

and two ways to customize its look and feel:

  • Implement an Aim and Scan UI

  • Overlay augmented reality on barcodes

Before you start…

To get the most out of this guide, please read the following:

Display the Data Capture View#

Display the Scanner in Full-Screen#

This scanning setup provides the end user with a full screen camera preview. It fits all use cases where additional information or actions are not required during scanning. Our Simple Sample uses this setup.

Display the Scanner in Split-Screen#

This setup provides the user with a split view where the scanner is using only part of the screen. It fits use cases where additional information is required while scanning, for instance, displaying the list of barcodes scanned. This setup is demonstrated in our View Sample.

Display the Scanner in a Tab View#

This setup provides the user with the ability to quickly switch between the scan view and another view. If fits use cases where the user might want to start the scanner at any time while using the app.

Customize the Data Capture View#

Use an Aim and Scan UI#

This setup provides the user with the ability to aim for a barcode and only read the barcode aimed for. This UI can be extremely helpful when numerous barcodes are densely packed.

To create the Aim and Scan UI, please follow these steps:

  1. Start the scanner in paused mode (camera preview on but not scanning).

  2. Use our laser UI to give the user a precise indication of where he should scan.

  3. Restrict the scanning area to a thin line in the center of the screen.

  4. Add a “Scan” button to resume the scanner on user tap. When the scanner is active, the button can be greyed out and display “Scanning”.

  5. When a barcode is scanned, pause or stop the scanner.