Sensibill Customization

Customize Sensibill Assets (Images / Strings)

When the Sensibill SDK is integrated and compiled with a host application, the resource folders from the SDK and host application are merged together. When merged, Sensibill SDK resources with the same name as resources in the host application are overridden with resources from the host. This behaviour allows for resources used by the Sensibill SDK to be overridden by integrating applications. By intentionally adding resources with the same identifier as resources in the SDK, drawables and string resources can be customized.

Customize Sensibill Images

The Sensibill SDK uses drawable resources to set the graphics used in the UI. To customize Images in the SDK:

1. Add the desired drawable to the host application drawable resource folder

2. Make sure the added drawable has the same file name as the drawable that is to be overridden in the SDK

Customize Sensibill Strings

The Sensibill SDK uses String resources to set text content used in the UI. To customize Strings in the SDK:

1. Add the desired string resource to the host application string XML file (typically strings.xml in values folder)

2. Make sure the added string resource has the same name as the string resource that is to be overridden in the SDK

<resources>
    ...
    <!--Sensibill String value to be overridden-->
    <string name="sb__sensibill_string_resource_to_override">My Customized string value</string>
</resources>

1. For localization, make sure to add the string resource to the string resource file in the correct localized value folder. (ie, values-es/string.xml for spanish translations)

Customize Sensibill Colours

To style SDK with brand colors, extend the Sensibill external theme Theme.Sensibill:

    <style name="Theme.Sensibill" parent="Base.Theme.Sensibill">
        ...
    </style>

The SDK has 16 colours which can be overridden in the Theme.Sensibill style. All elements in the SDK map to one of the 16 colours. For further details on the sensibill branding strategy, please refer to the provided style guide. The following is an example of a full re-branding of the Sensibill SDK:

    <style name="Theme.Sensibill" parent="Base.Theme.Sensibill">
        <item name="sb__brandBackground">@color/myBank_brandBackground</item>
        <item name="sb__brandForeground">@color/white</item>
        <item name="sb__brandForegroundDisabled">@color/myBank_brandBackground</item>
        <item name="sb__actionBackground">@color/myBank_actionBackground</item>
        <item name="sb__actionForeground">@color/white</item>
        <item name="sb__accentBackground">@color/myBank_accentBackground</item>
        <item name="sb__accentForeground">@color/black</item>
        <item name="sb__alternateBackground">@color/myBank_alternateBackground</item>
        <item name="sb__alternateForeground">@color/white</item>
        <item name="sb__errorBackground">@color/myBank_errorBackground</item>
        <item name="sb__errorForeground">@color/white</item>
        <item name="sb__disabledBackground">@color/myBank_disabledBackground</item>
        <item name="sb__disabledForeground">@color/white</item>
        <item name="sb__primaryBackground">@color/myBank_primaryBackground</item>
        <item name="sb__offPrimaryBackground">@color/white</item>
        <item name="sb__primaryForeground">@color/black</item>
        <item name="sb__primaryForegroundTwo">@color/myBank_primaryForegroundTwo</item>
        <item name="sb__primaryForegroundThree">@color/myBank_primaryForegroundThree</item>
        <item name="sb__primaryForegroundFour">@color/myBank_primaryForegroundFour</item>
    </style>

To brand the SDK for android versions less than 23, override the following colors to get the same effect:

<resources>
    <color name="sb__brand_background">@color/myBank_brandBackground</color>
    <color name="sb__action_background">@color/myBank_actionBackground</color>
    <color name="sb__accent_background">@color/myBank_accentBackground</color>
    <color name="sb__accent_foreground">@color/black</color>
    <color name="sb__alternate_foreground">@color/myBank_alternateBackground</color>
    <color name="sb__error_background">@color/myBank_errorBackground</color>
    <color name="sb__disabled_background">@color/myBank_disabledBackground</color>
    <color name="sb__primary_background">@color/myBank_primaryBackground</color>
    <color name="sb__primary_off_background">@color/white</color>
    <color name="sb__primary_foreground">@color/black</color>
    <color name="sb__primary_foreground_two">@color/myBank_primaryForegroundTwo</color>
    <color name="sb__primary_foreground_three">@color/myBank_primaryForegroundThree</color>
    <color name="sb__primary_foreground_four">@color/myBank_primaryForegroundFour</color>
    ...
</resources>

Legacy Capture-Specific Customization

NOTE: This section only applies to the Legacy Capture Flow

• To customize elements in the Capture portion of the SDK, additional attributes in the theme can be overridden
• In addition to the above attributes that can be overridden in Theme.Sensibill, the following can be used to customize capture specifically

    <style name="Theme.Sensibill" parent="Base.Theme.Sensibill">
        ...
         <!--Capture + Bounding Box Default Colors-->
        <item name="sb__sdk_capture_background">@color/your_capture_background</item>
        <item name="sb__sdk_capture_foreground">@color/your_capture_foreground</item>
        <item name="sb__sdk_capture_background_focused">@color/sb__brand_foreground_focused</item>
        <item name="sb__capture_action_background">@color/your_capture_action_background</item>
        <item name="sb__capture_action_foreground">@color/your_capture_action_background</item>
          
  
  
        <item name="sb__sdk_bounding_box_outline_color">@color/your_outline_color</item>
        <item name="sb__sdk_bounding_box_fill_color">@color/your_fill_color</item>
        <item name="sb__sdk_bounding_box_stroke_width">@integer/your_outline_stroke</item>
    </style>
  

Customize Sensibill Font

To customize font of the SDK, create a resource folder called assets with subfolder fonts.

Add a bold, italic and regular version of desired font to the fonts folder. Create three string resources of the path to each font, starting from the assets folder, for example:

    <string name="brand_font_regular">fonts/RNHouseSans-Regular.ttf</string>
    <string name="brand_font_bold">fonts/RNHouseSans-Bold.ttf</string>
    <string name="brand_font_italic">fonts/RNHouseSans-Italic.ttf</string>

Override the sb__font_regular, sb__font_italic, sb__font_bold properties of Theme.Sensibill with your string resources pointing to your desired fonts. For example:

    <style name="Theme.Sensibill" parent="Base.Theme.Sensibill">
        ...
        <item name="sb__font_regular">@string/brand_font_regular</item>
        <item name="sb__font_italic">@string/brand_font_italic</item>
        <item name="sb__font_bold">@string/brand_font_bold</item>
        ...
    </style>

---