Customize the scan UI

Presenting the SBSBarcodePicker view

The SBSBarcodePicker view can be presented as a modal view controller, as a subview, in a navigation controller or in a tab view controller. For more details, see the following page:

Show the scanner

Customizing the Scandit Scan UI Elements

The Scandit Barcode Scanner has methods to enable/disable/configure the following UI elements (see the API of the ScanditSDKOverlayController for more details):

  • Torch Button (a button to switch the torch on/off)
  • Camera Direction Switch (a button to switch the camera direction)
  • Toolbar (modal view controller only)
  • Sound (to configure the sound when a barcode is decoded)
  • Viewfinder (the white viewfinder target rectangle)

The SBSOverlayController has methods to enable/disable the above UI elements and methods to customize their location in the Scan UI and their appearance.

Add your own UI Elements

There are three different approaches to add your own UI elements to the scan user interface:

  • Add the ScanditSDKBarcodePicker as a subview and add additional ui elements as separate views in the view hierarchy.
  • Add subviews to the default ScanditSDKOverlayController


    SBSBarcodePicker *picker = [[SBSBarcodePicker alloc] initWithSettings:yourSettings];
    UIView *yourCustomView = [[UIView alloc] initWithFrame:CGRectMake(40, 200, 100, 100)];
    [picker.overlayController.view addSubview:yourCustomView];


    let picker = SBSBarcodePicker(settings: SBSScanSettings.default())
    let customView = UIView(frame: CGRect(x: 40, y: 200, width: 100, height: 100))
  • Subclass the SBSOverlayController. Create your own class that inherits from SBSOverlayController, add your UI elements of choice and set this overlay controller as the picker's overlay via


    picker.overlayController = subclassedOverlayController;


    picker.overlayController = subclassedOverlayController