Classic UI | MAUI Barcode Scanner

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, or BackWidest). Note: The BackWidest type is iOS only.

• 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, or BackWidest). Note: The BackWidest type is iOS only.

• 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

For MAUI applications, please see our example on how to request camera permissions to ensure smooth operation:

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Common/Validation.cs

loading...

See full example on GitHub

.NET Droid

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 };

ScanbotBarcodeSDKExample/BarcodeSDK.NET.Droid.Example/Activities/ClassicComponents/BarcodeClassicComponentActivity.cs

loading...

See full example on GitHub

.NET iOS

For NET.iOS application, please see our example on how to request camera permissions to ensure smooth operation:

ScanbotBarcodeSDKExample/BarcodeSDK.NET.iOS.Example/Utils/Utilities.cs

loading...

See full example on GitHub

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.

Classic UI Component: Barcode Scanner

MAUI

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.

caution

• To ensure a smooth user experience, please encapsulate the BarcodeScannerView within the ScanbotClassicUIContainer. This approach helps to manage the camera preview and view hierarchy more effectively.

• A ScanbotClassicUIContainer must specify HeightRequest, when contained in StackLayout, VerticalStackLayout and HorizontalStackLayout. If you fail to specify the HeightRequest, the ScanbotClassicUIContainer will not render.

• We recommend using the Border layout over the Frame layout, as suggested by Microsoft. The Border layout is the preferred option for the MAUI applications. It provides improved flexibility and performance. Please refer to the Microsoft documentation here.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeClassicComponentPage.xaml

loading...

See full example on GitHub

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.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeClassicComponentPage.xaml.cs

loading...

See full example on GitHub

.NET Android

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:

ScanbotBarcodeSDKExample/BarcodeSDK.NET.Droid.Example/Resources/layout/barcode_classic_activity.xml

loading...

See full example on GitHub

Then configure the view using the following calls:

ScanbotBarcodeSDKExample/BarcodeSDK.NET.Droid.Example/Activities/ClassicComponents/BarcodeClassicComponentActivity.cs

loading...

See full example on GitHub

Delegate the methods OnResume and OnPause in your Activity class (or Fragment) to BarcodeScannerView:

ScanbotBarcodeSDKExample/BarcodeSDK.NET.Droid.Example/Activities/ClassicComponents/BarcodeClassicComponentActivity.cs

loading...

See full example on GitHub

.NET iOS

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.

ScanbotBarcodeSDKExample/BarcodeSDK.NET.iOS.Example/Controllers/BarcodeClassicComponentController.cs

loading...

See full example on GitHub

For a fully functional example, please see our example app scanbot-barcode-sdk-maui-example on GitHub.

Classic UI Component: Scan & Count

MAUI

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.

caution

• To ensure a smooth user experience, please encapsulate the BarcodeScanAndCountView within the ScanbotClassicUIContainer. This approach helps to manage the camera preview and view hierarchy more effectively.

• A ScanbotClassicUIContainer must specify HeightRequest, when contained in StackLayout, VerticalStackLayout and HorizontalStackLayout. If you fail to specify the HeightRequest, the ScanbotClassicUIContainer will not render.

• We recommend using the Border layout over the Frame layout, as suggested by Microsoft. The Border 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:

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeScanAndCountClassicComponentPage.xaml

loading...

See full example on GitHub

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.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeScanAndCountClassicComponentPage.xaml.cs

loading...

See full example on GitHub

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.

ScanbotBarcodeSDKExample/BarcodeSDK.MAUI.Example/Pages/BarcodeArOverlayClassicComponentPage.xaml.cs

loading...

See full example on GitHub

.NET Droid

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:

ScanbotBarcodeSDKExample/BarcodeSDK.NET.Droid.Example/Resources/layout/barcode_scan_and_count_activity.xml

loading...

See full example on GitHub

Then configure the view using the following calls:

ScanbotBarcodeSDKExample/BarcodeSDK.NET.Droid.Example/Activities/ClassicComponents/BarcodeScanAndCountActivity.cs

loading...

See full example on GitHub

Delegate the methods ScanAndCount and ContinueScanning in your Activity class (or Fragment) to BarcodeScannerView:

ScanbotBarcodeSDKExample/BarcodeSDK.NET.Droid.Example/Activities/ClassicComponents/BarcodeScanAndCountActivity.cs

loading...

See full example on GitHub

.NET iOS

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.

ScanbotBarcodeSDKExample/BarcodeSDK.NET.iOS.Example/Controllers/BarcodeScanAndCountComponentController.cs

loading...

See full example on GitHub

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 License

What do you think of this documentation?

What can we do to improve it? Please be as detailed as you like.

---