Customize MobbScan Default Interfaces · Mobbeel for developers

MobbScan provides you with different default interfaces in order to use the SDK in a faster and easier way. While the default MobbScan interface might suit your needs, the default colors might not.

MobbScan allows you to customize these colors since it treats colors as resources in the SDK which can actually be overridden for this purpose.

List of color resources

This is the list of the resources that you can customize from the default interfaces of MobbScan:

Resource name	What will affect	Default color
`background_default_color`	Color of the background of the detection screen	`#95000000`
`rectangle_default_color`	The starting color of the document detection rectangle	`#FFFFFF`
`rectangle_detect_color`	The color which the document detection rectangle will use when it is detecting the document	`#3FC336`
`text_color`	The color which the text on document detection will use	`#FFFFFF`
`mrz_text_green`	Color of the MRZ text displayed when detecting a document MRZ	`#ADFF2F`
`face_overlay_color`	Set background color on hexadecimal string	`#80FFFFFF`
`face_outline_color`	The starting color of the face detection progress outline	`#FFFFFF`
`face_progress_color`	The color of the progress bar of the face detection	`#55D672`
`face_recording_color`	The color of the face detection progress outline when the face is being recorded	`#E0263B`
`ms_face_overlay_color`	Color of the overlay view (RGB)	`##000000`
`ms_face_animation_line_color`	Color of the shape strokes of the animations (RGB)	`#FFFFFF`
`ms_face_text_color`	Feedback messages font color (RGB)	`#FFFFFF`
`ms_face_text_background_color`	Feedback messages font background color (RGB/RGBA)	`#000000`
`ms_face_text_shadow_color`	Feedback messages font shadow color (RGB/RGBA)	`#000000`
`unattended_spinner_color`	The color of the spinner at the beginning and end of the unattended activity	`#FF3D6B`
`unattended_action_title_color`	The color of the text on document detection will use	`#FFFFFF`
`unattended_countdown_color`	The color of the count down time text on the center of the screen	`#FFFFFF`
`unattended_configure_background_color`	The color of the background of the detection screen	`#FFFFFF`
`unattended_configure_title_color`	The color of the text that is showing with the spinner at the beginning and end of the unattended activity	`#2C2B2B`
`unattended_otp_text_color`	(OTP Step) Card background color	`#4287F5`

Unattended document confirmation screen

The default unattended flow also includes a built-in document confirmation screen so users can review the image that was just captured before continuing.

This screen uses theme keys instead of plain color resources. To customize it, redefine UnattendedVideoTheme in your app and inherit from Base.UnattendedVideoTheme:

<resources>
    <style name="UnattendedVideoTheme" parent="@style/Base.UnattendedVideoTheme">
        <!-- Add your overrides here -->
    </style>
</resources>

The following keys are available for that confirmation screen:

Key	Affects	Default
`unattended_document_confirmation_background_color`	Whole confirmation screen background	`#F2F2F2`
`unattended_document_confirmation_accent_color`	Spinner and base accent for inherited colors	`#4035C8`
`unattended_document_confirmation_title_text_color`	Title text	Inherits `accent`
`unattended_document_confirmation_preview_border_color`	Captured document preview border	Inherits `accent`
`unattended_document_confirmation_positive_button_text_color`	Primary button text	`#FFFFFF`
`unattended_document_confirmation_positive_button_background_color`	Primary button background, normal state	Inherits `accent`
`unattended_document_confirmation_positive_button_background_pressed_color`	Primary button background, pressed state	Inherits `accent`
`unattended_document_confirmation_positive_button_background_focused_color`	Primary button background, focused state	Inherits `accent`
`unattended_document_confirmation_positive_button_background_disabled_color`	Primary button background, disabled state	Inherits `accent`
`unattended_document_confirmation_negative_button_text_color`	Secondary button text	Inherits `accent`
`unattended_document_confirmation_negative_button_background_color`	Secondary button background, normal state	Inherits `background`
`unattended_document_confirmation_negative_button_background_pressed_color`	Secondary button background, pressed state	Inherits `background`
`unattended_document_confirmation_negative_button_background_focused_color`	Secondary button background, focused state	Inherits `background`
`unattended_document_confirmation_negative_button_border_color`	Secondary button border	Inherits `accent`
`unattended_document_confirmation_logo_tint_color`	Bottom logo tint	`#BDBDBD`

accent refers to unattended_document_confirmation_accent_color. background refers to unattended_document_confirmation_background_color.

Example:

<resources>
    <style name="UnattendedVideoTheme" parent="@style/Base.UnattendedVideoTheme">
        <item name="unattended_document_confirmation_background_color">@color/client_unattended_bg</item>
        <item name="unattended_document_confirmation_accent_color">@color/client_unattended_accent</item>
        <item name="unattended_document_confirmation_title_text_color">@color/client_unattended_title</item>
        <item name="unattended_document_confirmation_preview_border_color">@color/client_unattended_preview_border</item>

        <item name="unattended_document_confirmation_positive_button_text_color">@color/client_unattended_btn_primary_text</item>
        <item name="unattended_document_confirmation_positive_button_background_color">@color/client_unattended_btn_primary_bg</item>
        <item name="unattended_document_confirmation_positive_button_background_pressed_color">@color/client_unattended_btn_primary_pressed</item>
        <item name="unattended_document_confirmation_positive_button_background_focused_color">@color/client_unattended_btn_primary_focused</item>
        <item name="unattended_document_confirmation_positive_button_background_disabled_color">@color/client_unattended_btn_primary_disabled</item>

        <item name="unattended_document_confirmation_negative_button_text_color">@color/client_unattended_btn_secondary_text</item>
        <item name="unattended_document_confirmation_negative_button_background_color">@color/client_unattended_btn_secondary_bg</item>
        <item name="unattended_document_confirmation_negative_button_background_pressed_color">@color/client_unattended_btn_secondary_pressed</item>
        <item name="unattended_document_confirmation_negative_button_background_focused_color">@color/client_unattended_btn_secondary_focused</item>
        <item name="unattended_document_confirmation_negative_button_border_color">@color/client_unattended_btn_secondary_border</item>

        <item name="unattended_document_confirmation_logo_tint_color">@color/client_unattended_logo_tint</item>
    </style>
</resources>

<resources>
    <color name="client_unattended_bg">#F7F8FA</color>
    <color name="client_unattended_accent">#0057B8</color>
    <color name="client_unattended_title">#0057B8</color>
    <color name="client_unattended_preview_border">#0057B8</color>

    <color name="client_unattended_btn_primary_text">#FFFFFF</color>
    <color name="client_unattended_btn_primary_bg">#0057B8</color>
    <color name="client_unattended_btn_primary_pressed">#004A9A</color>
    <color name="client_unattended_btn_primary_focused">#004A9A</color>
    <color name="client_unattended_btn_primary_disabled">#7FA8D9</color>

    <color name="client_unattended_btn_secondary_text">#0057B8</color>
    <color name="client_unattended_btn_secondary_bg">#F7F8FA</color>
    <color name="client_unattended_btn_secondary_pressed">#EDEFF3</color>
    <color name="client_unattended_btn_secondary_focused">#EDEFF3</color>
    <color name="client_unattended_btn_secondary_border">#0057B8</color>

    <color name="client_unattended_logo_tint">#A7AFBE</color>
</resources>

List of dimens resources

This is the list of the resources that you can customize from the default interfaces of MobbScan:

Resource name	What will affect	Default size
`unattended_detection_action_text_size`	(Document Step) Feedback messages font size	`18sp`
`unattended_configure_service_text_size`	Size of the scanning and configuring text	`18sp`
`unattended_otp_text_size`	Feedback OTP messages font size	`30sp`
`rectangle_detector_border_size`	Size of the document detector border	`4dp`
`face_detector_border_size`	Size of the face detector border	`10dp`
`unattended_detection_countdown_text_size`	(Document Step) Countdown font size	`40sp`
`ms_document_text_size`	Feedback messages font size	`14sp`
`ms_face_text_shadow_offset`	Feedback messages font shadow offset	`[2,2]`

How to override the color resources

In order to override these resource values, you only have to follow the following steps:

Have a file called colors.xml in your res/values/ folder.

Create a color resource inside the file overriding the previous resource names as follows:

<resources>
    ...
    <color name="RESOURCE_NAME">#000000</color>
    ...
</resources>