Barcode Scanner RTU UI Components | Android Document Scanner
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 cases and tasks in the 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 will have to 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-bundle
. Add it as a dependency to your project:
implementation("io.scanbot:rtu-ui-v2-bundle:$scanbotSdkVersion")
Get the latest $scanbotSdkVersion
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.
- AndroidX Result API
- old 'startActivityForResult' approach
loading...
loading...
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 theresultCode
value exposes a BooleanresultOk
property. This will be true ifresultCode
equalsActivity.RESULT_OK
;when you only expect
Activity.RESULT_OK
result code - you can use theAppCompatActivity.registerForActivityResultOk
extension method instead ofregisterForActivityResult
- it will be triggered only when there is a non-nullable result entity present.
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.
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 as part of an action bar.
Example for configuring the action bar
loading...
Use cases
Single scan with confirmation dialog
The single-scan mode is perfect 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
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, an option to configure the counting mode is also provided. 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 barcodes with unique values.
If a second 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...
Barcode sheet mode
The bottom sheet used to display previews for the scanned barcodes have 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.
Example for configuring the preview mode
loading...
AR Overlay
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 yet to be scanned barcodes. Barcodes can be selected automatically or by tapping on the barcode overlay.
Example for configuring the AR Overlay
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 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
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 is built using Android Jetpack Compose technology, in the example below we showcase the code where it is wrapped into ComposeView
. This allows you to integrate the RTU UI Barcode Scanner code both into a "traditional" Android XML-powered layout and into UI built with Jetpack Compose.
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.
loading...
Full example source code of the RTU UI Barcode Scanner
For a full example implementation, please refer to our source code demo.
Full API reference
Full API references for the result class are available here.
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 the RTU UI v.2.0 in the future.
Want to scan longer than one minute?
Generate your free "no-strings-attached" Trial License and properly test the Scanbot SDK.
Get your free Trial LicenseWhat do you think of this documentation?
What can we do to improve it? Please be as detailed as you like.