Forum Libraries, Components, and Plugins

ScanditSDK - Custom Overlay?

I am trying to customize the scanner overlay and I came across this blog post:

The problem is, I cannot find any documentation or examples on how to achieve what has been done in the blog post. The bottom of the post says that methods exist within the SDK.

Anyone know where I can find some example code and/or documentation?



  • Hi. this is Christian from Scandit Support. You can add more views to the barcode picker's overlay by simply adding them as subviews via the normal iOS functions. There are no special functions that need to be exposed as the overlayController inherits from UIViewController. Here is a small code snippet that adds your own toolbar to the overlay view (it works the same with any view):

    UIToolbar toolbar = new UIToolbar(new RectangleF (0, 200, 320, 49));
    picker.OverlayController.View.AddSubview (toolbar);
    picker.OverlayController.View.BringSubviewToFront (toolbar);
  • DanielPottsDanielPotts CAMember

    Hi Christian. Thank you for your help. Is there a way to remove the default overlay and have just the camera? This will allow me to build the overlay completely custom. For example, I would like to remove the flashlight button but the best I can currently do is place something on top of it to hide it whereas ideally I would like nothing to be in it's location. Thanks!

  • FrancisFernandesFrancisFernandes CAMember
    edited October 2013

    You can just remove the subviews of OverlayController ie.

    foreach (var subview in picker.OverlayController.View.Subviews) {
         subview.RemoveFromSuperview ();
  • DanielPottsDanielPotts CAMember

    Thank you very much. Worked perfectly :)

  • MagnusAhlinMagnusAhlin GBMember ✭✭

    How would you make the existing tab-bar be visible while scanning?

  • What do you mean by existing tabbar?

  • DanielPottsDanielPotts CAMember

    So i'm trying to do the same thing on Android (remove all the subviews) but there is no OverlayController. Any ideas how to do this on Android? Cheers!

  • SharmaKarmaSharmaKarma GBMember

    I'm also trying to do the same thing on Android. Would be very thankful for any ideas :)

  • SharmaKarmaSharmaKarma GBMember

    OK - here is solution for Android.

    If you want to hide all views in the Overlay do this:

    ViewGroup o = (ViewGroup) mBarcodePicker.getOverlayView(); Integer c = o.getChildCount(); for (int i = 0; i < c; i++) { View v = o.getChildAt(i); v.setVisibility( View.GONE ); };

    If you want to keep the viewfinder, but hide everything else, do this:

    import com.mirasense.scanditsdk.gui.standard.ScanditSDKBarcodeIndicator; ViewGroup o = (ViewGroup) mBarcodePicker.getOverlayView(); Integer c = o.getChildCount(); for (int i = 0; i < c; i++) { View v = o.getChildAt(i); if ( v instanceof ScanditSDKBarcodeIndicator ){ // Do Nothing } else { v.setVisibility( View.GONE ); } };

    (You can do something similar to show or hide the viewfinder dynamically)

    However... if you are trying to hide the FLASH icon, then you will notice that it is still there.

    This is because that icon is NOT inside the Overlay. It is inside a SurfaceView, which is a sibling of Overlay.

    Scandit writes the camera stream to this View. It also writes the Flashlight Icon (if the phone has flashlight) and camera-switch icon (if phone has 2 cameras).

    As a developer, I do not think we can modify the the SurfaceView ourselves. The closed-source ScanditSDK writes to this View directly.

    One method you can do however is to replace the Flashlight Icon with a 1x1 px transparent png file.

    I have attached a zip file with files to replace scanditsdk-community-android_3.5.1/res/raw folder.

    Being 1x1 px should be hard to click. But you could cover that up with another view to block clicking if you need to be more neat.

    The ideal would be some way of telling ScanditSDK to disregard flashlight entirely.

    If anyone finds a more elegant way to do this please comment :)

  • SharmaKarmaSharmaKarma GBMember
    edited January 2014

    I have been very silly.

    To get rid of the flashlight icon there is a simple method.

    Pass 'torch=false' when initializing the barcodereader.

Sign In or Register to comment.