Color Configuration

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

Supported colors

The following is a list of all colors currently supported.

Color	Default Value	Description
docutain_colorPrimary	light: #4CAF50 dark: #4CAF50	Used to tint progress indicators, the text color of secondary or dialog buttons and the background color of primary buttons.
docutain_colorOnPrimary	light: #FFFFFF dark: #000000	Used to tint elements that reside on docutain_colorPrimary, like the icon and text of primary buttons. E.g. on the empty result screen or onboarding.
docutain_colorSecondary	light: #4CAF50 dark: #4CAF50	Used to tint selectable controls and the capture button.
docutain_colorOnSecondary	light: #FFFFFF dark: #000000	Used to tint elements that reside on docutain_colorSecondary, like the icon of the capture button.
docutain_colorScanButtonsLayoutBackground	light: #121212 dark: #121212	Used to tint the background of the scan buttons layout.
docutain_colorScanButtonsForeground	light: #FFFFFF dark: #FFFFFF	Used to tint the foreground of the scan buttons layout, like the torch button.
docutain_colorScanPolygon	light: #4CAF50 dark: #4CAF50	Used to tint the polygon overlay which highlights the currently detected document.
docutain_colorBottomBarBackground	light: #FFFFFF dark: #212121	Used to tint the bottom toolbar background of the image editing page.
docutain_colorBottomBarForeground	light: #323232 dark: #BEBEBE	Used to tint the buttons within the bottom toolbar of the image editing page.
docutain_colorTopBarBackground	light: #4CAF50 dark: #2a2a2a	Used to tint the top toolbar background.
docutain_colorTopBarForeground	light: #FFFFFF dark: #DEFFFFFF	Used to tint the buttons contained in the top toolbar.
docutain_colorTopBarTitle	light: #FFFFFF dark: #DEFFFFFF	Used to tint the text of the top toolbar title.

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.

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_colorOnPrimary">@color/colorOnPrimary</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>
    <item name="docutain_colorTopBarTitle">@color/colorTopBarTitle</item>
</style>

To tell the scanner to use your custom theme, set the theme attribute of the scan config.

Document Scan

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)
}

Photo Payment

import de.docutain.sdk.ui.ScanResult

val photoPaymentScanResult = registerForActivityResult(PhotoPaymentResult()) { result -> }

...

myButton.setOnClickListener {   
    val scanConfig = PhotoPaymentConfiguration()
    scanConfig.theme = R.style.your_custom_theme
    photoPaymentScanResult.launch(scanConfig)
}