Customization

This guide explains how to customize the appearance of the SDK in your Android applications. It is recommended to apply the modifications in both the light and dark (night) themes.

Colors and logo

To change the main colors and the SDK logo:

1. Create a file sdk_styles.xml in the client application.

2. Add or modify the value hex (RGB) color and logo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- SdkTheme -->
    <color name="sdkPrimaryColor">#7636FC</color>
    <color name="sdkSecondaryColor">#03DAC5</color>
    <color name="sdkBackgroundColor">#FFFFFF</color>
    <color name="sdkErrorColor">#DD3631</color>
    <!-- SdkColorsPalette -->
    <color name="sdkTitleTextColor">#1D2C4D</color>
    <color name="sdkBodyTextColor">#526080</color>
    <color name="sdkSuccessColor">#07A13A</color>
    <color name="sdkNeutralColor">#202C4B</color>
    <color name="sdkAccentColor">#EA7547</color>
    <color name="sdkTopIconsColor">#243760</color>
    <color name="sdkButtonTextColor">#FFFFFF</color>
    <!-- SDK BUTTONS -->
    <dimen name="sdk_buttons_corner_dimen">32dp</dimen>
    <!-- SDK LOGO -->
    <drawable name="sdk_logo">@drawable/ic_demo_logo</drawable>

  <!-- ..Add particulars of each component... -->

</resources>

• The main colors that also affect animations are: sdkPrimaryColor, sdkErrorColor, sdkSuccessColor, sdkNeutralColor, sdkAccentColor.

• To include the logo you must add the following line to the file, with the configured name.

<!-- SDK LOGO -->
<drawable name="sdk_logo">@drawable/logo_name</drawable>

Vector format (.xml).

The Selphi and SelphID components include their associated resource zip, which remains separate from this SDK feature.

Animations

The Lottie files can be overwritten by placing the new files in res/raw/ with the same names:

anim_cancelled.json
anim_success.json

Texts

Create an XML file with the strings to overwrite:

    <!-- Exit Alert -->
    <string name="fphi_exit_alert_title">Finish the process</string>
    <string name="fphi_exit_alert_question">Do you want to finish the process?</string>
    <string name="fphi_exit_alert_finish">Finish</string>
    <string name="fphi_exit_alert_cancel">Cancel</string>
    <!-- Permissions -->
    <string name="fphi_permissions_camera">In order to continue, &lt;b&gt;you need to allow access to the camera&lt;/b&gt;.</string>
    <string name="fphi_permissions_camera_alt">In order to continue, you need to allow access to the camera.</string>
    <string name="fphi_permissions_title">Permission denied</string>
    <string name="fphi_permissions_general">In order to continue, &lt;b&gt;you need to allow access to the permission needed.&lt;/b&gt;</string>
    <string name="fphi_permissions_general_alt">In order to continue, you need to allow access to the permission needed.</string>
    <string name="fphi_permissions_microphone">In order to continue, &lt;b&gt;allow access to the microphone.&lt;/b&gt;</string>
    <string name="fphi_permissions_microphone_alt">In order to continue, allow access to the microphone.</string>
    <string name="fphi_permissions_confirm">Retry</string>
    <string name="fphi_permissions_confirm_settings">Go to settings</string>
    <!-- Messages -->
    <string name="fphi_close">Close process</string>
    <string name="fphi_info">Show tutorial</string>
    <string name="fphi_finish">Finish</string>
    <string name="fphi_retry">Retry</string>
    <!-- Tutorial -->
    <string name="fphi_tutorial_skip">SKIP</string>
    <string name="fphi_tutorial_skip_alt">Skip advices</string>
    <string name="fphi_tutorial_next">NEXT</string>
    <string name="fphi_tutorial_next_alt">Next advice</string>
    <string name="fphi_tutorial_previous">PREVIOUS</string>
    <string name="fphi_tutorial_previous_alt">Previous advice</string>
    <string name="fphi_tutorial_finish">FINISH</string>
    <string name="fphi_tutorial_finish_alt">Finish advices</string>
    <!-- Check Network -->
    <string name="fphi_network_connection_error_title">Check your internet connection</string>
    <string name="fphi_network_connection_error_desc">Check that your connection is stable and try again.</string>
    <!-- Diagnostic -->
    <string name="fphi_timeout_error_title">Time exceeded</string>
    <string name="fphi_timeout_error_desc">We apologize. The capture could not be made</string>
    <string name="fphi_internal_error_title">There was a technical problem</string>
    <string name="fphi_internal_error_desc">We apologize. The capture could not be made</string>

Fonts

• Add the files .ttf in the folder res/font/.

• Assign the exact name expected by the SDK. If the name does not match, the font will not be applied.

Top bar icons

To customize the top bar icons, create the resources in res/drawable/ with the following names:

ic_fphi_close_arrow
ic_fphi_close
ic_fphi_info

Images for the permission request and diagnostics screens

To customize the images that appear on the permission request and diagnostics screens, create the resources in res/drawable/ with the following names:

ic_fphi_camera_permission
ic_fphi_connection_error
ic_fphi_mic_permission
ic_fphi_timeout_error
ic_fphi_error
ic_fphi_support