Skip to main content

Ready-to-Use UI

Our revamped Ready-To-Use UI Components for iOS, Android, and Web Document Scanner SDKs offer a refined and enhanced document scanning experience with built-in review capabilities. This version not only simplifies the integration process but also introduces a comprehensive document management interface. Users can now review scanned documents, rotate, crop, reorder, retake specific pages, and delete one or all pages directly within the scanner. Additionally, the scanning process is enriched with engaging animation feedback and document acknowledgment features, ensuring high-quality scans by allowing users to verify and decide whether to keep or retake the scanned image.

Although the main idea of the RTU UI is to provide simple-to-integrate and simple-to-configure components, its customization capabilities are numerous and should suit most of your needs. To achieve an even higher degree of customization, you can implement a custom UI and business-logic using our .NET(platform specific) Classic UI Components with MAUI Handlers.

Launching the scanner​

In this section, we'll show you how to start the Document Scanner with minimal code. We'll also describe how to configure it extensively later on.

Launching the Scanner
loading...

Change the visuals to suit your needs​

In addition to a fresh new design, the RTU UI v.2.0 comes with new configuration options that enable you to quickly adapt its visual appearance:

Palette​

Using the new palette feature, you can change the UI components' colors to match your brand design.

Localization​

Using the new localization feature, you can easily localize the strings that are displayed on buttons, labels and text fields.

Localization
loading...

Scanning flow​

Introduction​

The Introduction Screen guides the user by providing a step-by-step overview on how to use the scanner effectively. You can configure each step with your own custom text.

You can use the introductory text to highlight key features and the scanning process specific to your use case.

Introduction
loading...

IntroductionScreenConfiguration.

Scanning Screen​

The Scanning Screen is the most important part of the scanning flow and designed to provide a seamless and efficient document capture experience.

Here are some key features:

  • Import from gallery: Users can import images directly from their device’s gallery, allowing for the integration of existing photos into the document scanning workflow.
  • Page limit configuration: Developers can set a page limit for the number of pages that can be scanned in a single session, helping to manage document size and user expectations.
  • Capture feedback animation: The Scanning Screen offers configurable feedback animations. Choose between a checkmark animation or the document genie/funnel animation to enhance user interaction and provide visual confirmation of successful captures.
  • User guidance: The scanner overlays dynamic text instructions to guide the user through the scanning process. This guidance adapts to the current state, such as suggesting adjustments if the document is at a bad angle or if the lighting is insufficient. These states are predefined, allowing developers to set custom text for each state.

These features combine to create an intuitive and user-friendly scanning experience, ensuring high-quality document captures every time.

Scanning Screen
loading...

DocumentScanningFlow.

Acknowledge Screen​

The Acknowledge Screen is designed to ensure the quality of captured images. The Document Quality Analyzer runs a thorough check on the captured image to determine its suitability.

You can set the minimum quality required using the following ratings:

  • No Document
  • Very Poor
  • Poor
  • Reasonable
  • Good
  • Excellent

You can also configure when the Acknowledge Screen should be shown using the following modes:

  • Bad Quality: The screen is shown only if the minimum quality criteria is not met.
  • Always: The screen is shown after every capture, regardless of the image quality.
  • None: The screen is never shown, even if the minimum quality criteria is not met.

```csharp reference title="Acknowledge Screen"
https://github.com/doo/scanbot-sdk-maui-example/blob/v6.1.0_maui/MAUI/ReadyToUseUI.Maui/Snippets/AcknowledgeScreenSnippet.cs#L8C2-L48C3
```

[AcknowledgementScreenConfiguration](https://api-docs.scanbot.io/net/api/ScanbotSDK.MAUI/ScanbotSDK.MAUI.Document.AcknowledgementScreenConfiguration.html).

### Review Screen
 
<ReviewScreen/>

<img src={ReviewImage} width="361" />

```csharp reference title="Review Screen"
https://github.com/doo/scanbot-sdk-maui-example/blob/v6.1.0_maui/MAUI/ReadyToUseUI.Maui/Snippets/ReviewScreenSnippets.cs#L8C2-L66C3
```

### Crop Screen

<CropScreen/>

<img src={CropImage} width="361" />

```csharp reference title="Crop Screen"
https://github.com/doo/scanbot-sdk-maui-example/blob/v6.1.0_maui/MAUI/ReadyToUseUI.Maui/Snippets/CropScreenSnippet.cs#L8C2-L35C3
```

[CroppingScreenConfiguration](https://api-docs.scanbot.io/net/api/ScanbotSDK.MAUI/ScanbotSDK.MAUI.Document.CroppingScreenConfiguration.html).


### Reorder Screen

<Reorder/>

<img src={ReorderImage} width="361" />

```csharp reference title="Reorder"
https://github.com/doo/scanbot-sdk-maui-example/blob/v6.1.0_maui/MAUI/ReadyToUseUI.Maui/Snippets/ReorderScreenSnippet.cs#L8C2-L41C3
```

[ReorderPagesScreenConfiguration](https://api-docs.scanbot.io/net/api/ScanbotSDK.MAUI/ScanbotSDK.MAUI.Document.ReorderPagesScreenConfiguration.html).

## Common use cases

### Single-Page Scanning without review

<SinglePage/>

<img src={SingleScanningImage} width="361" />

```csharp reference title="Single Page"
https://github.com/doo/scanbot-sdk-maui-example/blob/v6.1.0_maui/MAUI/ReadyToUseUI.Maui/Snippets/SinglePageSnippet.cs#L9C2-L56C3
```

[DocumentScanningFlow](https://api-docs.scanbot.io/net/api/ScanbotSDK.MAUI/ScanbotSDK.MAUI.Document.DocumentScanningFlow.html).

### Multi-Page Scanning with review

<MultiPage/>

<img src={MultiScanningImage} width="361" />

```csharp reference title="Multi Page"
https://github.com/doo/scanbot-sdk-maui-example/blob/v6.1.0_maui/MAUI/ReadyToUseUI.Maui/Snippets/MultiPageSnippet.cs#L8C2-L28C3
```

[DocumentScanningFlow](https://api-docs.scanbot.io/net/api/ScanbotSDK.MAUI/ScanbotSDK.MAUI.Document.DocumentScanningFlow.html).

### Single-Page Scanning with Finder Overlay

<SingleFinder/>

<img src={SingleCornerFinderScanningImage} width="361" /> 
<img src={SingleStrokeFinderScanningImage} style={{marginLeft: 10}} width="361" />

```csharp reference title="Single Page With Finder Overlay"
https://github.com/doo/scanbot-sdk-maui-example/blob/v6.1.0_maui/MAUI/ReadyToUseUI.Maui/Snippets/SinglePageWithFinderSnippet.cs#L9C2-L56C3
```

[ViewFinderConfiguration](https://api-docs.scanbot.io/net/api/ScanbotSDK.MAUI/ScanbotSDK.MAUI.Common.ViewFinderConfiguration.html).

## Automatic Filtering

<AutomaticFiltering/>

```csharp reference title="Automatic Filtering"
https://github.com/doo/scanbot-sdk-maui-example/blob/v6.1.0_maui/MAUI/ReadyToUseUI.Maui/Snippets/AutomaticFilteringSnippet.cs#L8C2-L35C3
```

## Full example source code of the RTU UI Document Scanner

[All examples in public GitHub demo](https://github.com/doo/scanbot-sdk-maui-example/tree/main/MAUI/ReadyToUseUI.Maui/)

## Full API reference

[API reference](https://api-docs.scanbot.io/net/api/ScanbotSDK.MAUI/ScanbotSDK.MAUI.html)

<TrialCta/>

On this page