Toolbar

Current UI (ver 8.1+)Deprecated UI (pre 8.1)

Camera frame screen in the current UI design with all buttons highlighted

Camera frame screen in the deprecated UI design with all buttons highlighted

Change the size of the toolbar (the area where the buttons are located):

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.toolbarSize = 46.0

[RGLDocReader shared].customization.toolbarSize = 46.0;

DocumentReader.Instance().customization().edit().setToolbarSize(46.0F).apply()

DocumentReader.Instance().customization().edit().setToolbarSize(46.0F).apply();

DocumentReader.instance.customization.toolbarSize = 46;

DocumentReader.instance.customization.toolbarSize = 46.0

DocumentReader.setCustomization({
    toolbarSize: 46.0,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    toolbarSize: 46.0
});

DocumentReader.setCustomization({
    toolbarSize: 46.0,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetToolbarSize((Java.Lang.Float)46.0F).Apply();

// iOS
RGLDocReader.Shared.Customization.ToolbarSize = 46.0F;

Torch
Close
Capture
Camera Switch
Camera Frame Switch

Torch

Current UI (ver 8.1+)Deprecated UI (pre 8.1)

The Torch button is hidden by default.

The Torch button is displayed by default.

Show/hide the Torch icon:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.functionality.showTorchButton = true

[RGLDocReader shared].functionality.showTorchButton = YES;

DocumentReader.Instance().functionality().edit().setShowTorchButton(true).apply()

DocumentReader.Instance().functionality().edit().setShowTorchButton(true).apply();

DocumentReader.instance.functionality.showTorchButton = true;

DocumentReader.instance.functionality.showTorchButton = true

DocumentReader.setFunctionality({
    showTorchButton: true,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setFunctionality({
    showTorchButton: true
});

DocumentReader.setFunctionality({
    showTorchButton: true,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Functionality().Edit().SetShowTorchButton(true).Apply();

// iOS
RGLDocReader.Shared.Functionality.ShowTorchButton = true;

Change the Torch icon for both ON and OFF states:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

// For the ON state
DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setImage(UIImage(named: "torch_button_on")!, forItem: .RGLCustomizationImageTorchButtonOn)
}

// For the OFF state
DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setImage(UIImage(named: "torch_button_off")!, forItem: .RGLCustomizationImageTorchButtonOff)
}

// For the ON state
UIImage *torchButtonOn = [[UIImage imageNamed:@"torch_button_on"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setImage:torchButtonOn forItem:RGLCustomizationImageTorchButtonOn];
}];

// For the OFF state
UIImage *torchButtonOff = [[UIImage imageNamed:@"torch_button_off"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setImage:torchButtonOff forItem:RGLCustomizationImageTorchButtonOff];
}];

// For the ON state
DocumentReader.Instance().customization().edit().setImage(CustomizationImage.TORCH_BUTTON_ON, getDrawable(R.drawable.torch_button_on)).apply()

// For the OFF state
DocumentReader.Instance().customization().edit().setImage(CustomizationImage.TORCH_BUTTON_OFF, getDrawable(R.drawable.torch_button_off)).apply()

// For the ON state
DocumentReader.Instance().customization().edit().setImage(CustomizationImage.TORCH_BUTTON_ON, getDrawable(R.drawable.torch_button_on)).apply();

// For the OFF state
DocumentReader.Instance().customization().edit().setImage(CustomizationImage.TORCH_BUTTON_OFF, getDrawable(R.drawable.torch_button_off)).apply();

// For the ON state
DocumentReader.instance.customization.images.torchButtonOn = onImage;

// For the OFF state
DocumentReader.instance.customization.images.torchButtonOff = offImage;

// For the ON state
DocumentReader.instance.customization.images.torchButtonOn = onBase64;

// For the OFF state
DocumentReader.instance.customization.images.torchButtonOff = offBase64;

// For the ON state
DocumentReader.setCustomization({
  images: {
    torchButtonOn: onBase64,
  }
}, _ => { }, _ => { });

// For the OFF state
DocumentReader.setCustomization({
  images: {
    torchButtonOff: offBase64,
  }
}, _ => { }, _ => { });

// For the ON state
DocumentReader.setCustomization({
  images: {
    torchButtonOn: onBase64,
  }
})

// For the OFF state
DocumentReader.setCustomization({
  images: {
    torchButtonOff: offBase64,
  }
})

// For the ON state
DocumentReader.setCustomization({
  images: {
    torchButtonOn: onBase64,
  }
}, function (m) { }, function (e) { });

// For the OFF state
DocumentReader.setCustomization({
  images: {
    torchButtonOff: offBase64,
  }
}, function (m) { }, function (e) { });

// Android
// For the ON state
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.TorchButtonOn, onImage).Apply();

// For the OFF state
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.TorchButtonOff, offImage).Apply();

// iOS
// For the ON state
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetImage(onImage, Constants.RGLCustomizationImageTorchButtonOn);
});

// For the OFF state
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetImage(offImage, Constants.RGLCustomizationImageTorchButtonOff);
});

Allows you to disable all validations of having a torch in case Android OS returns that it's not available, but it can be used when checks are skipped (Android-only):

Kotlin Java

DocumentReader.Instance().functionality().edit().setIsCameraTorchCheckDisabled(true).apply()

DocumentReader.Instance().functionality().edit().setIsCameraTorchCheckDisabled(true).apply();

Close

Show/hide the Close icon:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.functionality.showCloseButton = true

[RGLDocReader shared].functionality.showCloseButton = YES;

DocumentReader.Instance().functionality().edit().setShowCloseButton(true).apply()

DocumentReader.Instance().functionality().edit().setShowCloseButton(true).apply();

DocumentReader.instance.functionality.showCloseButton = true;

DocumentReader.instance.functionality.showCloseButton = true

DocumentReader.setFunctionality({
    showCloseButton: true,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setFunctionality({
    showCloseButton: true
});

DocumentReader.setFunctionality({
    showCloseButton: true,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Functionality().Edit().SetShowCloseButton(true).Apply();

// iOS
RGLDocReader.Shared.Functionality.ShowCloseButton = true;

Info

You can close the camera view manually by using the stopScanner() function.

Change the Close icon:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setImage(UIImage(named: "close_button")!, forItem: .RGLCustomizationImageCloseButton)
}

UIImage *closeButton = [[UIImage imageNamed:@"close_button"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setImage:closeButton forItem:RGLCustomizationImageCloseButton];
}];

DocumentReader.Instance().customization().edit().setImage(CustomizationImage.CLOSE_BUTTON, getDrawable(R.drawable.close_button)).apply()

DocumentReader.Instance().customization().edit().setImage(CustomizationImage.CLOSE_BUTTON, getDrawable(R.drawable.close_button)).apply();

DocumentReader.instance.customization.images.closeButton = image;

DocumentReader.instance.customization.images.closeButton = base64;

DocumentReader.setCustomization({
  images: {
    closeButton: base64,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  images: {
    closeButton: base64,
  }
})

DocumentReader.setCustomization({
  images: {
    closeButton: base64,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.CloseButton, image).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetImage(image, Constants.RGLCustomizationImageCloseButton);
});

Capture

Tapping the Capture button enables taking a picture and processing it as a single frame.

Show/hide the Capture button:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.functionality.showCaptureButton = true

[RGLDocReader shared].functionality.showCaptureButton = YES;

DocumentReader.Instance().functionality().edit().setShowCaptureButton(true).apply()

DocumentReader.Instance().functionality().edit().setShowCaptureButton(true).apply();

DocumentReader.instance.functionality.showCaptureButton = true;

DocumentReader.instance.functionality.showCaptureButton = true

DocumentReader.setFunctionality({
    showCaptureButton: true,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setFunctionality({
    showCaptureButton: true
});

DocumentReader.setFunctionality({
    showCaptureButton: true,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Functionality().Edit().SetShowCaptureButton(true).Apply();

// iOS
RGLDocReader.Shared.Functionality.ShowCaptureButton = true;

Set a time interval between the document detection moment and the Capture button appearance. By default, it is 5 seconds:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.functionality.showCaptureButtonDelayFromDetect = 5

[RGLDocReader shared].functionality.showCaptureButtonDelayFromDetect = 5;

DocumentReader.Instance().functionality().edit().setShowCaptureButtonDelayFromDetect(5).apply()

DocumentReader.Instance().functionality().edit().setShowCaptureButtonDelayFromDetect(5).apply();

DocumentReader.instance.functionality.showCaptureButtonDelayFromDetect = 5;

DocumentReader.instance.functionality.showCaptureButtonDelayFromDetect = 5

DocumentReader.setFunctionality({
    showCaptureButtonDelayFromDetect: 5,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setFunctionality({
    showCaptureButtonDelayFromDetect: 5
});

DocumentReader.setFunctionality({
    showCaptureButtonDelayFromDetect: 5,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Functionality().Edit().SetShowCaptureButtonDelayFromDetect(5).Apply();

// iOS
RGLDocReader.Shared.Functionality.ShowCaptureButtonDelayFromDetect = 5;

Set a time interval between the scanning process start and the Capture button appearance. By default, it is 10 seconds:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.functionality.showCaptureButtonDelayFromStart = 10

[RGLDocReader shared].functionality.showCaptureButtonDelayFromStart = 10;

DocumentReader.Instance().functionality().edit().setShowCaptureButtonDelayFromStart(10).apply()

DocumentReader.Instance().functionality().edit().setShowCaptureButtonDelayFromStart(10).apply();

DocumentReader.instance.functionality.showCaptureButtonDelayFromStart = 10;

DocumentReader.instance.functionality.showCaptureButtonDelayFromStart = 10

DocumentReader.setFunctionality({
    showCaptureButtonDelayFromStart: 10,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setFunctionality({
    showCaptureButtonDelayFromStart: 10
});

DocumentReader.setFunctionality({
    showCaptureButtonDelayFromStart: 10,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Functionality().Edit().SetShowCaptureButtonDelayFromStart(10).Apply();

// iOS
RGLDocReader.Shared.Functionality.ShowCaptureButtonDelayFromStart = 10;

Change the Capture icon:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setImage(UIImage(named: "capture_button")!, forItem: .RGLCustomizationImageCaptureButton)
}

UIImage *captureButton = [[UIImage imageNamed:@"capture_button"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setImage:captureButton forItem:RGLCustomizationImageCaptureButton];
}];

DocumentReader.Instance().customization().edit().setImage(CustomizationImage.CAPTURE_BUTTON, getDrawable(R.drawable.capture_button)).apply()

DocumentReader.Instance().customization().edit().setImage(CustomizationImage.CAPTURE_BUTTON, getDrawable(R.drawable.capture_button)).apply();

DocumentReader.instance.customization.images.captureButton = image;

DocumentReader.instance.customization.images.captureButton = base64;

DocumentReader.setCustomization({
  images: {
    captureButton: base64,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  images: {
    captureButton: base64,
  }
})

DocumentReader.setCustomization({
  images: {
    captureButton: base64,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.CaptureButton, image).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetImage(image, Constants.RGLCustomizationImageCaptureButton);
});

Camera Switch

Show/hide the Switch Camera button:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.functionality.showCameraSwitchButton = true

[RGLDocReader shared].functionality.showCameraSwitchButton = YES;

DocumentReader.Instance().functionality().edit().setShowCameraSwitchButton(true).apply()

DocumentReader.Instance().functionality().edit().setShowCameraSwitchButton(true).apply();

DocumentReader.instance.functionality.showCameraSwitchButton = true;

DocumentReader.instance.functionality.showCameraSwitchButton = true

DocumentReader.setFunctionality({
    showCameraSwitchButton: true,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setFunctionality({
    showCameraSwitchButton: true
});

DocumentReader.setFunctionality({
    showCameraSwitchButton: true,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Functionality().Edit().SetShowCameraSwitchButton(true).Apply();

// iOS
RGLDocReader.Shared.Functionality.ShowCameraSwitchButton = true;

Change the Camera Switch icon:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setImage(UIImage(named: "camera_switch_button")!, forItem: .RGLCustomizationImageSwitchButton)
}

UIImage *cameraSwitchButton = [[UIImage imageNamed:@"camera_switch_button"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setImage:camera_switch_button forItem:RGLCustomizationImageSwitchButton];
}];

DocumentReader.Instance().customization().edit().setImage(CustomizationImage.SWITCH_BUTTON, getDrawable(R.drawable.camera_switch_button)).apply()

DocumentReader.Instance().customization().edit().setImage(CustomizationImage.SWITCH_BUTTON, getDrawable(R.drawable.camera_switch_button)).apply();

DocumentReader.instance.customization.images.switchButton = image;

DocumentReader.instance.customization.images.switchButton = base64;

DocumentReader.setCustomization({
  images: {
    switchButton: base64,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  images: {
    switchButton: base64,
  }
})

DocumentReader.setCustomization({
  images: {
    switchButton: base64,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.SwitchButton, image).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetImage(image, Constants.RGLCustomizationImageSwitchButton);
});

Camera Frame Switch

Current UI (ver 8.1+)Deprecated UI (pre 8.1)

Starting from the SDK version 8.1 the Camera Frame Switch is deprecated and not used anymore.

Show/hide the Change Frame icon:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.functionality.showChangeFrameButton = true

[RGLDocReader shared].functionality.showChangeFrameButton = YES;

DocumentReader.Instance().functionality().edit().setShowChangeFrameButton(true).apply()

DocumentReader.Instance().functionality().edit().setShowChangeFrameButton(true).apply();

DocumentReader.instance.functionality.showChangeFrameButton = true;

DocumentReader.instance.functionality.showChangeFrameButton = true

DocumentReader.setFunctionality({
    showChangeFrameButton: true,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setFunctionality({
    showChangeFrameButton: true
});

DocumentReader.setFunctionality({
    showChangeFrameButton: true,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Functionality().Edit().SetShowChangeFrameButton(true).Apply();

// iOS
RGLDocReader.Shared.Functionality.ShowChangeFrameButton = true;

Change the Change Frame icon for both ON and OFF states:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

// For the ON state
DocReader.shared.customization.changeFrameButtonExpandImage = UIImage(named: "icon")

// For the OFF state
DocReader.shared.customization.changeFrameButtonCollapseImage = UIImage(named: "icon")

// For the ON state
[RGLDocReader shared].customization.changeFrameButtonExpandImage = [UIImage imageNamed:@"icon"];

// For the OFF state
[RGLDocReader shared].customization.changeFrameButtonCollapseImage = [UIImage imageNamed:@"icon"];

// For the ON state
DocumentReader.Instance().customization().edit().setChangeFrameExpandButtonImage(getDrawable(R.drawable.icon)).apply()

// For the OFF state
DocumentReader.Instance().customization().edit().setChangeFrameCollapseButtonImage(getDrawable(R.drawable.icon)).apply()

// For the ON state
DocumentReader.Instance().customization().edit().setChangeFrameExpandButtonImage(getResources().getDrawable(R.drawable.icon)).apply();

// For the OFF state
DocumentReader.Instance().customization().edit().setChangeFrameCollapseButtonImage(getResources().getDrawable(R.drawable.icon)).apply();

DocumentReader.instance.customization.changeFrameButtonExpandImage = await rootBundle.load("icon");
DocumentReader.instance.customization.changeFrameButtonCollapseImage = await rootBundle.load("icon");

DocumentReader.instance.customization.changeFrameButtonExpandImage = "Base64String"
DocumentReader.instance.customization.changeFrameButtonCollapseImage = "Base64String"

DocumentReader.setCustomization({
    changeFrameButtonExpandImage: "Base64String", //For the ON state
    changeFrameButtonCollapseImage: "Base64String" // For the OFF state,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    changeFrameButtonExpandImage: "Base64String", //For the ON state
    changeFrameButtonCollapseImage: "Base64String" // For the OFF state
});

DocumentReader.setCustomization({
    changeFrameButtonExpandImage: "Base64String", //For the ON state
    changeFrameButtonCollapseImage: "Base64String" // For the OFF state,
}, function (m) { }, function (e) { console.log(e); });

// Android
// For the ON state
DocumentReader.Instance().Customization().Edit().SetChangeFrameExpandButtonImage(GetDrawable(Resource.Drawable.icon)).Apply();

// For the OFF state
DocumentReader.Instance().Customization().Edit().SetChangeFrameCollapseButtonImage(GetDrawable(Resource.Drawable.icon)).Apply();

// iOS
// For the ON state
RGLDocReader.Shared.Customization.ChangeFrameButtonExpandImage = UIImage.FromBundle("Image");

// For the OFF state
RGLDocReader.Shared.Customization.ChangeFrameButtonCollapseImage = UIImage.FromBundle("Image");

Toolbar

Torch

Close

Capture

Camera Switch

Camera Frame Switch

Next Steps