theming

const Home = () => { return ; };

Theming

In order to fit the Docutain Scanner SDK for Android into your corporate design, you have a bunch of options to alter the default theme of the ready to use UI components.

Color Theming

The following is a list of all color attributes currently supported.

<attr name="docutain_colorPrimary" />
<attr name="docutain_colorSecondary" />
<attr name="docutain_colorOnSecondary" />
<attr name="docutain_colorScanButtonsLayoutBackground" />
<attr name="docutain_colorScanButtonsForeground" />
<attr name="docutain_colorScanPolygon" />
<attr name="docutain_colorBottomBarBackground" />
<attr name="docutain_colorBottomBarForeground" />
<attr name="docutain_colorTopBarBackground" />
<attr name="docutain_colorTopBarForeground" />

Detailed explanation

docutain_colorPrimary is used to tint progress indicators and dialog buttons.

docutain_colorSecondary is used to tint selectable controls and the capture button.

docutain_colorOnSecondary is used to tint elements that reside on docutain_colorSecondary, like the icon of the capture button.

docutain_colorScanButtonsLayoutBackground is used to tint the background of the layout containing the buttons of the scan layout, like the capture button or torch button.

docutain_colorScanButtonsForeground is used to tint the foreground of the buttons of the scan layout, like the torch button.

docutain_colorScanPolygon is used to tint the polygon overlay which highlights the currently detected document.

docutain_colorBottomBarBackground is used to tint the bottom toolbar background of the image editing page.

docutain_colorBottomBarForeground is used to tint the buttons within the bottom toolbar of the image editing page.

docutain_colorTopBarBackground is used to tint the top toolbar background.

docutain_colorTopBarForeground is used to tint the elements contained in the top toolbar, like buttons and titles.

Defining a custom theme

In order to alter at least one of the colors mentioned above, you need to define a custom theme which uses DocutainSDK.Theme.Default as parent.

The following is an example which alters all currently available colors.

<style name="DocutainSDKTestApp.DocutainSDKTheme" parent="DocutainSDK.Theme.Default">
    <item name="docutain_colorPrimary">@color/colorPrimary</item>
    <item name="docutain_colorSecondary">@color/colorSecondary</item>
    <item name="docutain_colorOnSecondary">@color/colorOnSecondary</item>
    <item name="docutain_colorScanButtonsLayoutBackground">@color/colorScanButtonsLayoutBackground</item>
    <item name="docutain_colorScanButtonsForeground">@color/colorScanButtonsForeground</item>
    <item name="docutain_colorScanPolygon">@color/colorScanPolygon</item>
    <item name="docutain_colorBottomBarBackground">@color/colorBottomBarBackground</item>
    <item name="docutain_colorBottomBarForeground">@color/colorBottomBarForeground</item>
    <item name="docutain_colorTopBarBackground">@color/colorTopBarBackground</item>
    <item name="docutain_colorTopBarForeground">@color/colorTopBarForeground</item>
</style>

To tell the Docutain SDK to use your custom theme, set the theme attribute of the DocumentScannerConfiguration.

Kotlin

import de.docutain.sdk.ui.ScanResult

val documentScanResult = registerForActivityResult(ScanResult()) { result -> }

...

myButton.setOnClickListener {   
    val scanConfig = DocumentScannerConfiguration()
    scanConfig.theme = R.style.your_custom_theme
    documentScanResult.launch(scanConfig)
}

Java

import de.docutain.sdk.ui.ScanResult

private ActivityResultLauncher documentScanResult = registerForActivityResult(new ScanResult(),
    new ActivityResultCallback<Boolean>() { });

...

myButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        DocumentScannerConfiguration scanConfig = new DocumentScannerConfiguration();
        scanConfig.setTheme(R.style.your_custom_theme);
        documentScanResult.launch(scanConfig);
    }
});

Dark Mode

The Docutain Scanner SDK for Android also supports dark mode theming. The process is the same, just define different colors for the night version of your theme. The SDK decides which color to use depending on the device's sytem setting and it will change at runtime, if the device's display mode changes.

Document Scan Onboarding

If a user opens the scan page for the first time, an onboarding dialog appears. The displayed image can be customized by setting the onboardingImageSource of the DocumentScannerConfiguration.

Kotlin

import de.docutain.sdk.ui.ScanResult

val documentScanResult = registerForActivityResult(ScanResult()) { result -> }

...

myButton.setOnClickListener {   
    val scanConfig = DocumentScannerConfiguration()
    scanConfig.onboardingImageSource = R.drawable.your_custom_image_source
    documentScanResult.launch(scanConfig)
}

Java

import de.docutain.sdk.ui.ScanResult

private ActivityResultLauncher documentScanResult = registerForActivityResult(new ScanResult(),
    new ActivityResultCallback<Boolean>() { });

...

myButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        DocumentScannerConfiguration scanConfig = new DocumentScannerConfiguration();
        scanConfig.setOnboardingImageSource(R.drawable.your_custom_image_source);
        documentScanResult.launch(scanConfig);
    }
});

caution

If you are using a custom image, you are responsible to test wether the dialog layout is fine.