Ready-to-Use UI
We've improved the Ready-To-Use UI Components of our iOS and Android Barcode Scanner SDKs, which makes it even easier to provide your users with an intuitive scanning interface without having to build it yourself!
The Ready-To-Use UI (RTU UI) is an easy to integrate and highly-customizable high-level UI component that can handle most cases and tasks in barcode scanning.
The design and behavior of this component are based on our many years of experience as well as the feedback from our SDK customers.
Although the main idea of the RTU UI is to provide simple-to-integrate and simple-to-configure components, the customizing capabilities are almost infinite and should suit most of your needs. Should you need even more customization options, you can implement custom UI and business logic using our Classic SDK UI Components.
Change the visuals to suit your needs
In addition to a fresh new design, the RTU UI v.2.0 comes with new configuration options that enable you to quickly adapt its visual appearance:
Palette
Using the new palette feature, you can change the UI components' colors to match your brand design.
loading...
Localization
Using the new localization feature, you can easily localize the strings that are displayed on buttons, labels and text fields.
loading...
User guidance
Text elements like the on-screen user guidance can be adapted in form and color.
Example for configuring the user guidance
loading...
Top bar
You can choose how to display the top bar in your app: hidden, solid or gradient.
Example for configuring the top bar
loading...
Action bar
The zoom and flash buttons and a button to switch cameras are now included out of the box.
Example for configuring the action bar
loading...
Barcodes sheet mode
The multiple scanning mode supports two sheet modes: one with a collapsed list of scanned barcodes and one with just a button. The collapsedSheet can be
configured to small or large display mode.
Example for configuring the sheet mode
loading...
Use cases
Single scan with confirmation dialog
Single-scan mode is very easy for scanning single barcodes and is easily configurable according to your needs. It comes with the option of showing a confirmation sheet after the barcode is scanned. The confirmation sheet is also highly customizable, offering the ability to configure the barcode title and subtitle as well as the cancel and submit buttons.
Example for configuring the single-scan use case
loading...
Multiple scanning
Multiple scanning mode is very flexible and allows you to configure each component in several ways. The bottom sheet that is used to display previews for the scanned
barcodes have two modes collapsedSheet and button. In collapsedSheet mode, the bottom sheet is visible and collapsed and can be expanded by dragging it up,
also the button can show the overall barcodes count.
Multiple scanning also comes with the option to configure the counting mode: The counting mode can either be counting or unique. In counting mode, the scanner
scans barcodes with the same value again and counts the number of items. In unique mode, the scanner only scans the barcodes with unique values.
If another barcode has the same value, it won't scan again.
Additionally, the countingRepeatDelay can be used to set the time interval in milliseconds that must pass before counting a barcode again.
Example for configuring the multiple scanning use case
loading...
Find and Pick scanning
Using the Find and Pick scanning mode, you can set a list of expected barcodes to be scanned. In the list, you can provide for each barcode its value, title, image, and count.
The count simply means, the number of times a barcode needs to be scanned. You also have the flexibility of setting the allowPartialScan property of the use case, to complete
the scanning with partial results. The find and pick use case also makes it possible to provide an extensively elaborated visual experience using AR Overlays, by providing the ability to
properly distinguish between different barcodes (Not expected, expected but partially or fully scanned). The bottom sheet is also highly customizable and provides information of
the current state of the barcodes. You can also manually change the count of each barcode from the list, incrementally or by tapping the count and manually typing in the number.
Example for configuring the find and pick scanning use case
loading...
AR Overlay
The Barcode AR Overlay can be enabled to display and select detected barcodes in an augmented-reality fashion. Each detected barcode will be presented on the barcode overlay by a colored frame and text. Styles of the frames and text can be customized for scanned and not-scanned barcodes. Barcodes can be selected by tapping on the barcode overlay or automatically by the tracking controller.
Example for configuring the AR Overlay use case
loading...
SwiftUI Support
The RTU-UI V2 is also available natively for SwiftUI using SBSDKUI2BarcodeScannerView. The following example demonstrates how to integrate the RTU-UI V2 into a SwiftUI view.
Example: Using the RTU-UI V2 in SwiftUI
loading...
Display product information right in your scanning interface
Some use cases require the data connected to a barcode's value to be displayed to the user directly. That's why we've added the option to visualize this data in the scanning interface. For example, you can show a product image next to the article number encoded by the barcode.
This feature is also available for the SDK's AR Overlay, making it even easier for users to identify a barcode's contents in real time.
Example for mapping the item information
loading...
What do you think of this documentation?
What can we do to improve it? Please be as detailed as you like.