Customizing the Scan User Interface

Customizing the Scandit Scan UI Elements

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

  • Torch Button (a button to switch the torch on/off)
  • Camera Direction Switch (a button to switch the camera direction)
  • Searchbar (for manual user input)
  • Sound (to configure the sound when a barcode is decoded)
  • Viewfinder (the white viewfinder target rectangle)


Adding your own UI Elements

If you want to add your own view on top of the scanner you can add them to the overlay view. The overlay view contains all the previously listed UI elements and is itself a RelativeLayout to which you can add any number of views yourself. If you are new to Android layouting please check out the Android Developer website (http://developer.android.com/guide/topics/ui/layout/relative.html).

// Cast the overlay view to a RelativeLayout.
RelativeLayout overlayView = (RelativeLayout) picker.OverlayView;
// Create your view, this can be a button, image, etc.
View yourView = new View(context);
// Create LayoutParams to place your view as wanted. Here we center it horizontally and set a
// bottom margin of 50 pixels.
RelativeLayout.LayoutParams rParams = new RelativeLayout.LayoutParams(width, height);
rParams.AddRule(LayoutRules.CenterHorizontal);
rParams.BottomMargin = 50;
// Add the view.
overlayView.AddView(yourView, rParams);