Custom UI configurations of SDK for Android - ID Verification

ID Verification - KYC SDK for Android provides the setCustomUIConfig operation, which allows you to configure custom UI configurations, such as UI colors and icons, for SDK for Android by passing a file or a JSON string. KYC is short for Know Your Customer. This topic describes how to call the setCustomTxtConfig operation and provides sample code.

Note

To ensure that the custom UI configurations can take effect, we recommend that you update the SDK to the latest version before you call the operation. If the specified custom UI configurations conflict with the extended parameters of the verification operation, the custom UI configurations take precedence. Make sure that the custom UI configurations take precedence over all parameters of the verification operation to provide a consistent and intuitive user experience.

Overview

ID Verification - KYC SDK for Android provides the setCustomUIConfig operation, which allows you to configure custom UI colors and icons. You can call this operation to configure custom UI configurations by specifying the request parameters.

Usage notes

    /**
     * @return The error that is detected in the configuration file. 
     * @description This operation is used to configure custom UI configurations. 
     * @paramType The configuration type. The valid values are 
     * {@link IDTFacade.EXT_PARAMS_CONFIG_JSON} | {@link IDTFacade.EXT_PARAMS_CONFIG_ASSETS_NAME}). 
     *
     * @params {@link String} params The configuration. You can specify a value based on the value of paramType. 
     */
    public String setCustomUIConfig(@IDTFacade int paramType, String param) {
     ...
    }

Parameters

Parameter

Type

Description

paramType

int

The configuration type. Valid values:

IDTFacade.EXT_PARAMS_CONFIG_ASSETS_NAME: the application asset file. If you set paramType to this value, set param to the name of an application asset file.
IDTFacade.EXT_PARAMS_CONFIG_JSON: the JSON string. If you set paramType to this value, set params to a value in the JSON format.

param

String

The configuration. You can specify a value based on the value of paramType.

Return value

The return value. The value is a string. If the SDK encounters an error or exception when the SDK parses the value of param, a message is returned.

If the specified parameters are invalid, check the return value.

Sample code

// Specify the name of an application asset file.
String fileName = "DTFCustomUIConfig.json";
int paramType = IDTFacade.EXT_PARAMS_CONFIG_ASSETS_NAME;
String customUIErrMsg =  IdentityPlatform.getInstance().setCustomUIConfig(paramType, fileName);

// Specify a JSON string.
String jsonConfig = "<Custom UI configurations in the JSON format>";
int paramType = IDTFacade.EXT_PARAMS_CONFIG_JSON;
String customUIErrMsg =  IdentityPlatform.getInstance().setCustomUIConfig(paramType, jsonConfig);

Custom UI configurations

You can specify custom font colors and specific icons on the verification page. The following section provides a complete configuration example and the descriptions of the parameters.

Complete configuration example

{
  "faceConfig": {
    "exitIconBase64": "exit_icon_base64",
    "faceBGColor": "#FFFFFF",
    "faceTitleColor": "#000000",
    "faceTipColor": "#000000",
    "opFailedTitleColor": "#000000",
    "opFailedTipColor": "#000000",
    "opFailedConfirmColor": "#4FA3EC",
    "facePrgressStartColor":"#dfe6eb",
    "faceProgressEndColor": "#FF6A00",
    "exitAlertTitleColor": "#000000",
    "exitAlertMessageColor": "#000000",
    "exitAlertCancelColor": "#4FA3EC",
    "exitAlertConfirmationColor": "#4FA3EC",
    "timeoutAlertTitleColor": "#000000",
    "timeoutAlertMessageColor": "#000000",
    "timeoutAlertConfirmationColor": "#4FA3EC",
    "tooManyRetriesAlertTitleColor": "#000000",
    "tooManyRetriesAlertMessageColor": "#000000",
    "tooManyRetriesAlertConfirmColor": "#4FA3EC",
    "interruptedAlertTitleColor": "#000000",
    "interruptedAlertMessageColor": "#000000",
    "interruptedAlertConfirmColor": "#4FA3EC",
    "permissionFailedAlertTitleColor": "#000000",
    "permissionFailedAlertMessageColor": "#000000",
    "permissionFailedAlertConfirmColor": "#4FA3EC",
    "verifyNetworkErrorAlertTitleColor": "#000000",
    "verifyNetworkErrorAlertMessageColor": "#000000",
    "verifyNetworkErrorAlertConfirmColor": "#4FA3EC",
    "verifyNetworkErrorAlertCancelColor": "#4FA3EC",
    "verifyLoadingColor": "#585858"
  },
  "ocrConfig": {
    "exitIconBase64": "exit_icon_base64",
    "albumBase64": "album_base64",
    "takePhotoBase64": "take_photo_base64",
    "submitBase64": "submit_base64",
    "ocrResultExitIconBase64": "ocr_result_exit_icon_base64",
    "ocrResultTipIconBase64": "ocr_result_tip_icon_base64",
    "ocrTitleColor": "#FFFFFF",
    "ocrBorderColor": "#E3824C",
    "ocrSubmitTitleColor": "#FFFFFF",
    "ocrLoadingColor": "#FFFFFF",
    "failedAlertTitleColor": "#000000",
    "failedAlertMessageColor": "#000000",
    "failedAlertCancelColor": "#4FA3EC",
    "failedAlertConfirmationColor": "#4FA3EC",
    "timeoutAlertTitleColor": "#000000",
    "timeoutAlertMessageColor": "#000000",
    "timeoutAlertConfirmationColor": "#4FA3EC",
    "exitAlertTitleColor": "#000000",
    "exitAlertCancelColor": "#4FA3EC",
    "exitAlertConfirmationColor": "#4FA3EC",
    "ocrResultTitleColor": "#000000",
    "ocrResultTipBGColor": "#DFDFDF",
    "ocrResultTipColor": "#000000",
    "ocrResultInfoTitleColor": "#000000",
    "ocrResultInfoContentColor": "#F6F6F6",
    "ocrResultInfoBorderColor": "#E3824C",
    "ocrResultTipTitleColor": "#D59F9E",
    "ocrResultErrorTipBGColor": "#F6DAD5",
    "ocrResultConfirmBtnDisabledBGColor": "#DADADA",
    "ocrResultConfirmBtnDisabledTitleColor": "#FFFFFF",
    "ocrResultConfirmBtnEnabledBGColor": "",
    "ocrResultConfirmBtnEnabledTitleColor": "#FFFFFF",
    "ocrResultExitAlertTitleColor": "#000000",
    "ocrResultExitAlertCancelColor": "#000000",
    "ocrResultExitAlertConfirmationColor": "#4FA3EC",
    "restrictionsAlertTitleColor": "#000000",
    "restrictionsAlertMessageColor": "#000000",
    "restrictionsAlertConfirmationColor": "#4FA3EC",
    "permissionFailedAlertTitleColor": "#000000",
    "permissionFailedAlertMessageColor": "#000000",
    "permissionFailedAlertConfirmColor": "#4FA3EC",
    "ocrNetworkErrorAlertTitleColor": "#000000",
    "ocrNetworkErrorAlertMessageColor": "#000000",
    "ocrNetworkErrorAlertCancelColor": "#4FA3EC",
    "ocrNetworkErrorAlertConfirmColor": "#4FA3EC",
    "docErrorAlertTitleColor": "#000000",
    "docErrorAlertMessageColor": "#000000",
    "docErrorAlertCancelColor": "#4FA3EC",
    "docErrorAlertConfirmColor": "#4FA3EC",
    "ocrResultNetworkErrorAlertTitleColor": "#000000",
    "ocrResultNetworkErrorAlertMessageColor": "#000000",
    "ocrResultNetworkErrorAlertConfirmColor": "#4FA3EC",
    "ocrResultNetworkErrorAlertCancelColor":"#000000",
    "ocrResultInfoErrorAlertMessageColor": "#000000",
    "ocrResultInfoErrorAlertConfirmColor": "#4FA3EC",
    "ocrResultInfoEmptyAlertTitleColor":"#000000",
    "ocrResultInfoEmptyAlertConfirmColor":"#FF6A00",
    "ocrMessageFailAlertTitleColor":"#FF0000",
    "ocrMessageFailAlertCancelColor": "#FFFF00",
    "ocrMessageFailAlertConfirmColor":"#FF33FF"
  }
}

Parameter description

Module	key	Snapshot
faceModule	faceBGColor
	exitIconBase64
	faceTitleColor
	faceTipColor
	interruptedAlertTitleColor
	interruptedAlertMessageColor
	interruptedAlertConfirmColor
	permissionFailedAlertTitleColor
	permissionFailedAlertMessageColor
	permissionFailedAlertConfirmColor
	tooManyRetriesAlertTitleColor
	tooManyRetriesAlertMessageColor
	tooManyRetriesAlertConfirmColor
	faceProgressStartColor
	faceProgressEndColor
	exitAlertTitleColor
	exitAlertMessageColor
	exitAlertCancelColor
	exitAlertConfirmationColor
	timeoutAlertTitleColor
	timeoutAlertMessageColor
	timeoutAlertConfirmationColor
	verifyLoadingColor
	verifyNetworkErrorAlertTitleColor
	verifyNetworkErrorAlertMessageColor
	verifyNetworkErrorAlertCancelColor
	verifyNetworkErrorAlertConfirmColor
ocrModule	exitIconBase64
	ocrTitleColor
	ocrBorderColor
	albumBase64
	takePhotoBase64
	submitBase64
	ocrSubmitTitleColor
	ocrLoadingColor
	failedAlertTitleColor
	failedAlertMessageColor
	failedAlertCancelColor
	failedAlertConfirmationColor
	ocrNetworkErrorAlertTitleColor
	ocrNetworkErrorAlertMessageColor
	ocrNetworkErrorAlertCancelColor
	ocrNetworkErrorAlertConfirmColor
	permissionFailedAlertTitleColor
	permissionFailedAlertMessageColor
	permissionFailedAlertConfirmColor
	docErrorAlertTitleColor
	docErrorAlertMessageColor
	docErrorAlertCancelColor
	docErrorAlertConfirmColor
	restrictionsAlertTitleColor
	restrictionsAlertMessageColor
	restrictionsAlertConfirmationColor
	timeoutAlertTitleColor
	timeoutAlertMessageColor
	timeoutAlertConfirmationColor
	exitAlertTitleColor
	exitAlertCancelColor
	exitAlertConfirmationColor
	ocrMessageFailAlertTitleColor
	ocrMessageFailAlertCancelColor
	ocrMessageFailAlertConfirmColor
	ocrResultExitIconBase64
	ocrResultTitleColor
	ocrResultTipBGColor
	ocrResultTipColor
	ocrResultInfoTitleColor
	ocrResultInfoContentColor
	ocrResultConfirmBtnEnabledBGColor
	ocrResultConfirmBtnEnabledTitleColo
	ocrResultTipTitleColor
	ocrResultTipIconBase64
	ocrResultErrorTipBGColor
	ocrResultInfoborderColor
	ocrResultConfirmBtnDisabledBGColor
	ocrResultConfirmBtnDisabledTitleColor
	ocrResultExitAlertTitleColor	ocrResultConfirmBtnDisabledTitleColor
	ocrResultExitAlertCancelColor
	ocrResultExitAlertConfirmationColor
	ocrResultInfoEmptyAlertTitleColor
	ocrResultInfoEmptyAlertConfirmColor
	ocrResultNetworkErrorAlertTitleColor
	ocrResultNetworkErrorAlertMessageColor
	ocrResultNetworkErrorAlertConfirmColor
	ocrResultNetworkErrorAlertCancleColor
	ocrResultInfoErrorAlertMessageColor
	ocrResultInfoErrorAlertConfirmColor