Android Branding Colors

Global Theme

To style the SDK with your brand colors, override the Sensibill external theme Theme.Sensibill. See the design palette above for default colors.

Note: For the theme override to work correctly, you must name your style “Theme.Sensibill” and it must have the parent “Base.Theme.Sensibill”

<style name="Theme.Sensibill" parent="Base.Theme.Sensibill">
    <item name="sb__colourPrimary">@color/sb__primary</item>
    <item name="sb__colourPrimaryVariant">@color/sb__primary_variant</item>
    <item name="sb__colourOnPrimary">@color/sb__on_primary</item>

    <item name="sb__colourSecondary">@color/sb__secondary</item>
    <item name="sb__colourOnSecondary">@color/sb__on_secondary</item>

    <item name="sb__colourBackground">@color/sb__background</item>
    <item name="sb__colourOnBackground">@color/sb__on_background</item>

    <item name="sb__colourSurface">@color/sb__surface</item>
    <item name="sb__colourSurfaceVariant">@color/sb__surface_variant</item>
    <item name="sb__colourOnSurface">@color/sb__on_surface</item>
    <item name="sb__colourOnSurfaceFocus">@color/sb__on_surface_focus</item>

    <item name="sb__colourError">@color/sb__error</item>
    <item name="sb__colourOnError">@color/sb__on_error</item>
</style>

Custom Theme

In the Android resources, the Android Sensibill SDK provides numerous exposed styles for integrators to override in order to customize the visual experience of the SDK.

To begin creating a customized theme, create an XML file in the values resources folder (/android/app/src/main/res/values/) (create the folder if it does not already exist). It can be called styles.xml if a file of that name does not yet exist, or can be named something else such as sensibill_styles.xml.

Next, add a top level <resources> tag:

<resources>

</resources>

Finally, add the following style entry exactly to begin customizing the Capture Standalone Theme:

<resources>
    <style name="New.Theme.Sensibill.CaptureStandalone" parent="Base.New.Theme.Sensibill.CaptureStandalone" >

    </style>
</resources>

This style entry states that you want to customize the New.Theme.Sensibill.CaptureStandalone style, and that it extends the Base.New.Theme.Sensibill.CaptureStandalone style (our baseline theme). The New.Theme.Sensibill.CaptureStandalone style is used by all Sensibill Capture pages, and therefore they will inherit the custoimzation provided here.

Now that you have your empty style override entry, customization can begin by adding theme element overrides within it.

As an example, in order to change the primary colour to red, and the capture background colour to dark grey, your style file will end up looking like this:

<resources>
    <style name="New.Theme.Sensibill.CaptureStandalone" parent="Base.New.Theme.Sensibill.CaptureStandalone" >
    <!-- Main Theme Colours -->
    <item name="sb__colourPrimary">#FF0000</item>

    <!-- Capture Colours -->
    <item name="sb__colourCaptureBackground">#222222</item>
    </style>
</resources>

Capture Theme

The Sensibill Standalone Capture module doesn’t use the entirety of the Sensibill theme.

This section provides a detailed breakdown of all theme elements required to fully customize the Capture experience.

Within the descriptions, the “diagram” will refer to the diagram image near the top of the “Theme Customization” section of this page

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="New.Theme.Sensibill.CaptureStandalone" parent="Base.New.Theme.Sensibill.CaptureStandalone">

        <!-- Capture Theme -->
        <!--
            See diagram, `captureBackground` and `onCaptureBackground` are
            used for view "framing" within capture, as well as items that will be displayed
            on said frame.
        -->
        <item name="sb__colourCaptureBackground">#331111</item>
        <item name="sb__colourOnCaptureBackground">#AFDEDE</item>
        <item name="sb__colourOnCaptureBackgroundDisabled">#D4E2E2</item>



        <!-- Main SDK Theme -->
        <!--
            The `primary` and `onPrimary` colours are used for:
            - Primary buttons (see diagram)
            - Capture progress indicator (see diagram, `primary` only)
            - Crop bounds indicator (see diagram, `primary` only)
         -->
        <item name="sb__colourPrimary">#8B3B60</item>
        <item name="sb__colourOnPrimary">#FFFFFF</item>
        <!-- `primaryVariant` is used as the background for the capture tips screen -->
        <item name="sb__colourPrimaryVariant">#53283C</item>

        <!-- `secondary` and `onSecondary` colours are used for secondary buttons (see diagram) -->
        <item name="sb__colourSecondary">#3B8B66</item>
        <item name="sb__colourOnSecondary">#FFFFFF</item>

        <!-- 
            `surface` and `onSurface` colours are used for:
            - Default background and text colour of alert dialogs (popups)
            - Tips screen:
                - Unselected tab indicator (`surface` only)
                - "Next" button (`surface` background, `onSurface` text)
         -->
        <item name="sb__colourSurface">#FFE9B6</item>
        <item name="sb__colourOnSurface">#513F16</item>

    </style>
</resources>