Skip to main content

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 (Activity) that can handle most barcode scanning use cases and tasks.

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, its customization capabilities are numerous and should suit most of your needs. To achieve an even higher degree of customization, you can implement a custom UI and business-logic using our Classic SDK UI Components.

Dependencies​

The RTU UI components are distributed as a separate package rtu-ui-v2-barcode. Add it as a dependency to your project:

implementation("io.scanbot:rtu-ui-v2-barcode:$scanbotBarcodeSdkVersion")

Get the latest $scanbotBarcodeSdkVersion from the Changelog.

Launching the RTU UI Barcode Scanner​

With just a few lines of code, you can integrate barcode scanning into your application's workflow. It is as easy as starting an Android activity.

Start RTU UI Barcode snippet
loading...
info

We offer some syntactic sugar for handling the result from RTU components via AndroidX Result API:

  • every RTU component's activity contains a Result class which, in turn, along with the resultCode value exposes a Boolean resultOk property. This will be true if resultCode equals Activity.RESULT_OK;

  • when you only expect Activity.RESULT_OK result code - you can use the AppCompatActivity.registerForActivityResultOk extension method instead of registerForActivityResult - it will be triggered only when there is a non-nullable result entity present.

caution

Always use the corresponding activity's static newIntent method to create intent when starting the RTU UI activity using deprecated startActivityForResult approach. Creating android.content.Intent object using its constructor (passing the activity's class as a parameter) will lead to the RTU UI component malfunctioning.

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.

Configuring RTU UI v2 palette snippet
loading...

Localization​

Using the new localization feature, you can easily localize the strings that are displayed on buttons, labels and text fields.

Configuring RTU UI v2 Barcode screen localization snippet
loading...

User Guidance​

Text elements like the on-screen user guidance can be adapted in form and color.

alt text

Example for configuring the user guidance​

Configuring RTU UI v2 user guidance snippet
loading...

Action Bar​

The zoom and flashlight buttons and a button to switch cameras are now included out of the box.

alt text

Example for configuring the action bar​

Configuring RTU UI v2 action bar snippet
loading...

Barcode sheet mode​

The bottom sheet used to display previews of the scanned barcodes has two modes: COLLAPSED_SHEET and BUTTON. In COLLAPSED_SHEET mode, the bottom sheet is visible and collapsed and can be expanded by dragging it up. In addition, the button can show the overall barcode count.

alt text alt text alt text

Example for configuring the preview mode​

Configuring RTU UI v2 Barcode multiple scanning sheet snippet
loading...

Use cases​

Single scan with confirmation dialog​

alt text

The single scan mode is optimized for scanning single barcodes and 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, the barcode subtitle, the cancel button, and the submit button.

Example for configuring the single scan mode​

Configuring RTU UI v2 Barcode single scan use case snippet
loading...

Multiple scanning​

alt text

The multiple scanning mode is very flexible and allows you to configure each component in several ways.

Firstly, it offers two display modes: one with a collapsed list of scanned barcodes and one with just a toggle button that brings up the list.

Secondly, there is an 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 the UNIQUE mode, the scanner only scans barcodes with unique values. If another barcode has the same value, it won't be scanned 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​

Configuring RTU UI v2 Barcode multiple scanning use case snippet
loading...

Find and Pick scanning​

alt text

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​

Configuring RTU UI v2 Barcode find and pick use case snippet
loading...

AR Overlay​

alt text alt text

The Barcode AR Overlay can be enabled to display and select recognized barcodes in an augmented-reality fashion. Each recognized barcode will be presented on the barcode overlay by a colored frame and text. The style of the frame and text can be customized for scanned and not-yet-scanned barcodes. Barcodes can be selected automatically or by tapping on the barcode overlay.

Example for configuring the AR Overlay​

Configuring RTU UI v2 Barcode AR overlay snippet
loading...

Display product information right in your scanning interface​

alt text alt text

Some use cases require the data connected to a barcode's value to be displayed to the user directly. That is why we have 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​

Configuring RTU UI v2 Barcode item mapping snippet
loading...

Integration as Sub Component​

Alongside providing an RTU UI Barcode Scanner as an Activity, we also issued a building block that is not wrapped into activity code. Instead, with a bit more complex integration, it can be built into your app's UI without the need to open a new Activity. This allows you to provide end users with a more seamless UI/UX flow.

Since our RTU UI Barcode Scanner is built with Android Jetpack Compose technology, in the example below we showcase the code wrapped into ComposeView. This enables you to integrate the RTU-UI barcode scanner code both into a "traditional" Android XML-powered layout and a UI built using Jetpack Compose.

RTU UI v2 Sub Component Barcode scanner snippet
loading...

In our case, the mentioned R.layout.doc_snippet_activity_artu_barcode_scanner layout is simple, but in a real application it can be more complex.

Example layout for RTU UI v2 Sub Component Barcode scanner snippet
loading...

Full example source code of the RTU UI Barcode Scanner​

You can refer to a full example implementation in our source code demo.

Full API reference​

You can find the full API reference for all classes using this link. Please note that there are two RTU UI packages - you should direct your attention to classes under io.scanbot.sdk.ui_v2 package. The other one - io.scanbot.sdk.ui. - contains the previous RTU UI implementation and will be fully replaced by v.2.0 in the future.

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get your free Trial License

What do you think of this documentation?

On this page

Scroll to top