Skip to main content

Building an interface for cropping scanned documents with the Classic UI

The Classic UI Component of the cropping functionality is presented by two main views – EditPolygonImageView and MagnifierView. They provide the ability to precisely modify the adjustable cropping polygon on the screen.

To integrate the Classic UI Component of the cropping feature, you can take a look at our cropping example app or check the following step-by-step integration instructions.

Add the feature dependencies and initialize the SDK​

The Document Scanner is included in Scanbot SDK package 1. Therefore, add the dependency io.scanbot:sdk-package-1 or higher in your build.gradle:

implementation("io.scanbot:sdk-package-1:$latestSdkVersion")

The Scanbot SDK must be initialized before use. Add the following code snippet to your Application class:

Launching The Scanner
loading...
caution

Unfortunately, we have noticed that all devices using a Cortex A53 processor DO NOT SUPPORT GPU acceleration. If you encounter any problems, please disable GPU acceleration for these devices.

ScanbotSDKInitializer()
        .allowGpuAcceleration(false)

Add EditPolygonImageView to your layout​

<io.scanbot.sdk.ui.EditPolygonImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:edgeColor="#00cea6"
    app:cornerImageSrc="@drawable/ui_crop_corner_handle"
    app:edgeImageSrc="@drawable/ui_crop_side_handle"
    app:editPolygonHandleSize="48dp"
    app:magneticLineTreshold="10dp"
    app:editPolygonStrokeWidth="3dp"/>

The customizable attributes here are:

  • edgeColor: The color of the polygon line. Default is undefined - meaning no color.
  • cornerImageSrc: The image to be used as the polygon corner handle.
  • edgeImageSrc: The image to be used as the edge handle.
  • editPolygonHandleSize: Defines the touchable area size for the polygon edge and corner handles. Default is 48dp.
  • editPolygonStrokeWidth: The width of the polygon line. Default is 3dp.
  • magneticLineThreshold: The edge should be this close to the magnetic line to snap in place. Default is 10dp.
  • edgeColorOnLine: The color of the edge when it aligns with the detected magnetic line. Default is undefined - meaning no color change.

Set the detected polygon​

The default polygon for EditPolygonImageView can be received from DocumentScanner. DocumentScanner always returns the scanned contours information like lines and polygons. After the first scan you can set the scanned contour to EditPolygonImageView.

Set Scanned Contour to EditPolygonImageView
loading...

EditPolygonImageView supports the magnetic lines feature. To use it, you have to set the scanned horizontal and vertical lines:

Set Scanned Lines to EditPolygonImageView
loading...

Add the magnifying glass​

EditPolygonImageView supports a magnifying glass feature. To enable it, add io.scanbot.sdk.ui.MagnifierView to your custom layout.

<io.scanbot.sdk.ui.MagnifierView
    android:id="@+id/magnifier"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:magnifierImageSrc="@drawable/ui_crop_magnifier"
    app:magnifierRadius="36dp"
    app:magnifierMargin="16dp"
    app:magnifierEnableBounding="true"/>

The customizable attributes are:

  • magnifierImageSrc: The magnifier image. To be used as a mask. Make sure it has a transparent section to see the magnified content. No default value.
  • magnifierRadius: The magnifier's size. Default is 36dp.
  • magnifierMargin: The magnifier's margin (distance to the screen border). Default is 16dp.
  • magnifierEnableBounding: Bounce the magnifier to the opposite part of screen when editing the polygon's corner. Default is true.
Important

You should set up the MagnifierView every time editPolygonView is set with a new image:

Setup MagnifierView
loading...

Get the selected polygon​

If you want to get a selected polygon from EditPolygonImageView, just call:

Get Selected Polygon from EditPolygonImageView
loading...

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get your free Trial License

On this page