Classic UI
Our Classic UI components allow you to build custom screens which are flexible and fully customizable. It is a set of easy to integrate components (Views, Buttons, Handlers, Controllers, etc.) which can be embedded and extended in your custom screens.
For more details please see the documentation of our native Barcode Scanner SDKs for iOS and Android as well as our example apps.
For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.
BarcodeScannerView
BarcodeScannerView
extends BaseBarcodeScannerView
with additional functionality specific to barcode scanning scenarios.
Properties and Event Handlers
Properties
- BackgroundColor: Determines the background color of the scanner view. Defaults to
Colors.Transparent
. - OverlayTextEnabled: A boolean that indicates whether the text overlay is enabled on the scanner. Defaults to
true
. - OverlayConfiguration: Configures the overlay for the barcode scanner view.
- IsFlashEnabled: Controls the camera flash state.
- FinderConfiguration: Customizes the finder's appearance and behavior.
- CameraZoomRange: Sets the valid camera zoom factors.
- CameraZoomLevel: Adjusts the camera's zoom level.
- BarcodeFormats: Defines the barcode formats the scanner will recognize.
- AcceptedDocumentFormats: Filters which document formats to recognize.
- MinFocusDistanceLock: Locks the camera's minimum focus distance.
- CameraModule: Chooses the camera module (e.g.
Front
,Back
, orBackWidest
). Note: TheBackWidest
type is iOS only.
- BackgroundColor: Determines the background color of the scanner view. Defaults to
Event Handlers
- OnResumeHandler: Invoked in accordance with the view's lifecycle, specifically when the view appears or resumes.
- OnPauseHandler: Invoked in accordance with the view's lifecycle, specifically when the view disappears or pauses.
- StartDetectionHandler: Called to initiate barcode detection.
- StopDetectionHandler: Called to halt barcode detection.
- OnBarcodeScanResult: An event that fires when a barcode scan is successfully completed, returning the scan result.
- OnSelectBarcodeResult: An event that fires when a barcode is selected, returning the selection result.
BarcodeScanAndCountView
BarcodeScanAndCountView
extends the BaseBarcodeScannerView
to facilitate scenarios requiring both barcode scanning and counting.
Properties and Event Handlers
Properties
- BackgroundColor: Sets the background color of the view. Default is
Colors.Transparent
. - CheckMarkImageByteArray: A byte array for the custom check mark image to be displayed after a successful scan.
- OverlayConfiguration: Configures the overlay for the barcode scanner view.
- IsFlashEnabled: Controls the camera flash state.
- FinderConfiguration: Customizes the finder's appearance and behavior.
- CameraZoomRange: Sets the valid camera zoom factors.
- CameraZoomLevel: Adjusts the camera's zoom level.
- BarcodeFormats: Defines the barcode formats the scanner will recognize.
- AcceptedDocumentFormats: Filters which document formats to recognize.
- MinFocusDistanceLock: Locks the camera's minimum focus distance.
- CameraModule: Chooses the camera module (e.g.
Front
,Back
, orBackWidest
). Note: TheBackWidest
type is iOS only.
- BackgroundColor: Sets the background color of the view. Default is
Event Handlers
- StartDetectionHandler: Invoked to start the detection of barcodes.
- StopDetectionHandler: Invoked to stop the detection of barcodes.
- StartScanAndCountHandler: Begins the process of scanning and counting barcodes.
- ContinueScanningHandler: Continues the scanning and counting process without resetting the count.
- OnBarcodeScanResult: Event triggered upon a successful barcode scan.
- OnScanAndCountFinished Event triggered when the scan and count process is complete.
Integration prerequisites
Required: Permission validation
Classic components do not automatically validate camera access permissions. It's up to developers to request and secure these permissions within their applications. Before integrating camera functionalities, ensure that your app has obtained the necessary permissions to provide users with a seamless experience.
- MAUI
- .NET Android
- .NET iOS
For MAUI applications, please see our example on how to request camera permissions to ensure smooth operation:
loading...
Since Android 6.0 (API level 23) you also have to implement a suitable permission requesting and handling at runtime. For more details please see the Android docs "Request App Permissions"
private string[] permissions = new string[] { Manifest.Permission.Camera };
loading...
For NET.iOS application, please see our example on how to request camera permissions to ensure smooth operation:
loading...
For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.
Classic UI component: Barcode Scanner
- MAUI
- .NET Android
- .NET iOS
You can utilize the BarcodeScannerView
class from xmlns:classicComponent="clr-namespace:ScanbotSDK.MAUI.ClassicComponent;assembly=BarcodeSDK.MAUI"
to integrate barcode scanning functionality into your application seamlessly.
This component encapsulates the barcode scanning feature within a single UI component.
To ensure a smooth user experience, please encapsulate the
BarcodeScannerView
within theScanbotClassicUIContainer
. This approach helps to manage the camera preview and view hierarchy more effectively.A
ScanbotClassicUIContainer
must specifyHeightRequest
, when contained inStackLayout
,VerticalStackLayout
andHorizontalStackLayout
. If you fail to specify theHeightRequest
, theScanbotClassicUIContainer
will not render.We recommend using the
Border
layout over theFrame
layout, as suggested by Microsoft. TheBorder
layout is the preferred option for the MAUI applications. It provides improved flexibility and performance. Please refer to the Microsoft documentation here.
loading...
In the BarcodeClassicComponentPage
class, the cameraView
component is configured for barcode scanning. The SetupViews()
method initializes event handlers to process barcode scan results and configures the visual overlay for barcode detection.
loading...
Use the class BarcodeScannerView
which incapsulates the Barcode Scanning feature in one UI component. When using the BarcodeScannerView
component, it is not required to work directly with the Camera view or to set up a finder view separately. Simply follow the steps below and you are ready to go.
To start using the barcode feature, add the following view into your layout xml:
loading...
Then configure the view using the following calls:
loading...
Delegate the methods OnResume
and OnPause
in your Activity
class (or Fragment
) to BarcodeScannerView
:
loading...
The main class of the Classic UI is SBSDKBarcodeScannerViewController
.
Usually this view controller is embedded as a child view controller into another view controller, the parent view controller. The parent view controller usually acts as the delegate and processes the recognition results. You still have full control over the UI elements and can add additional views and buttons to your view controller. The classic component does not display results, instead it just forwards them to the delegate.
loading...
For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.
Classic UI component: Scan & Count
- MAUI
- .NET Android
- .NET iOS
Use the class BarcodeScanAndCountView
from xmlns:classicComponent="clr-namespace:ScanbotSDK.MAUI.ClassicComponent;assembly=BarcodeSDK.MAUI"
which incapsulates the Barcode Scanning ScanAndCount feature in one UI component. When using the BarcodeScanAndCountView
component, it is not required to work directly with the Camera view or to set up a finder view separately.
To ensure a smooth user experience, please encapsulate the
BarcodeScanAndCountView
within theScanbotClassicUIContainer
. This approach helps to manage the camera preview and view hierarchy more effectively.A
ScanbotClassicUIContainer
must specifyHeightRequest
, when contained inStackLayout
,VerticalStackLayout
andHorizontalStackLayout
. If you fail to specify theHeightRequest
, theScanbotClassicUIContainer
will not render.We recommend using the
Border
layout over theFrame
layout, as suggested by Microsoft. TheBorder
layout is the preferred option for the MAUI applications. It provides improved flexibility and performance. Please refer to the Microsoft documentation here.
To start using the barcode feature, add the following view into your xaml:
loading...
The cameraView
component in BarcodeScanAndCountClassicComponentPage
handles barcode scanning and counting smoothly.
It manages scan results, visual settings, and detection control.
When the page appears, scanning starts, and it stops when the page disappears. Also, it handles button states for user interaction.
loading...
To enhance the configuration of Overlay with manual barcode SelectionOverlay, you can modify the above code by adding additional parameters and settings according to your needs.
loading...
Use the class BarcodeScanAndCountView
which incapsulates the Barcode Scanning ScanAndCount feature in one UI component. When using the BarcodeScanAndCountView
component, it is not required to work directly with the Camera view or to set up a finder view separately. Simply follow the steps below and you are ready to go.
To start using the barcode feature, add the following view into your layout xml:
loading...
Then configure the view using the following calls:
loading...
Delegate the methods ScanAndCount
and ContinueScanning
in your Activity
class (or Fragment
) to BarcodeScannerView
:
loading...
The main class of the Classic UI is BarcodeScanAndCountComponentController
.
Usually this view controller is embedded as a child view controller into another view controller, the parent view controller. The parent view controller usually acts as the delegate and processes the recognition results. You still have full control over the UI elements and can add additional views and buttons to your view controller. The classic component does not display results, instead it just forwards them to the delegate.
loading...
For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.
Want to scan longer than one minute?
Generate a free trial license to test the Scanbot SDK thoroughly.
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.