Custom UI configurations for the Android SDK - ID Verification

The ID Verification Android SDK provides the setCustomUIConfig interface for customizing user interface (UI) colors and icons. You can create custom UI configurations as a file or in JSON data format and pass them to the setCustomUIConfig interface to apply custom UI effects. This topic describes the UI customization interface and provides code examples.

Note

Some custom configurations may require an SDK upgrade. Upgrade the SDK to the latest version before you use these configurations. If custom user interface settings conflict with the extension parameters of the verification interface, the user interface settings take precedence. This ensures a consistent and intuitive user experience.

Interface description

The Android SDK provides the setCustomUIConfig interface for customizing UI colors and icons. Call this method and pass the required parameters to apply custom UI effects.

Interface definition

    /**
     * @return The exception information detected in the configuration file.
     * @description This interface is used to set a custom UI.
     * @paramType paramType The parameter type {@link IDTFacade}. Valid values:
     * {@link IDTFacade.EXT_PARAMS_CONFIG_JSON} | {@link IDTFacade.EXT_PARAMS_CONFIG_ASSETS_NAME}).
     *
     * @params {@link String} params The parameter value, which corresponds to paramType.
     */
    public String setCustomUIConfig(@IDTFacade int paramType, String param) {
     ...
    }

Parameters

Name

Type

Description

paramType

int

The type of the custom input parameter. Valid values:

IDTFacade.EXT_PARAMS_CONFIG_ASSETS_NAME: The app assets file type. Set param to the assets file name.
IDTFacade.EXT_PARAMS_CONFIG_JSON: A JSON string. Set param to data in JSON format.

param

String

The data to be passed in based on the value of paramType.

Response elements

This method returns a string. If an error or exception occurs when the SDK parses the content of the parameter, a message is returned.

If the configuration parameters are invalid, check the returned message for more information.

Sample code

// Pass the assets file name.
String fileName = "DTFCustomUIConfig.json";
int paramType = IDTFacade.EXT_PARAMS_CONFIG_ASSETS_NAME;
String customUIErrMsg =  IdentityPlatform.getInstance().setCustomUIConfig(paramType, fileName);

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

Custom UI configuration content

Custom UI configurations allow you to customize the font colors and certain icons on the authentication page. A complete example and detailed field descriptions are provided below.

Complete configuration example

{
  "faceConfig": {
    "exitIconBase64": "exit_icon_base64",
    "faceBGColor": "#FFFFFF",
    "faceTitleColor": "#000000",
    "faceTipColor": "#000000",
    "opFailedTitleColor": "#000000",
    "opFailedTipColor": "#000000",
    "opFailedConfirmColor": "#4FA3EC",
    "faceProgressStartColor":"#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"
  }
}

Detailed field descriptions

Module	Key	Screenshot
faceModule	faceBGColor
	exitIconBase64
	faceTitleColor
	faceTipColor
	interruptedAlertTitleColor
	interruptedAlertMessageColor
	interruptedAlertConfirmationColor
	permissionFailedAlertTitleColor
	permissionFailedAlertMessageColor
	permissionFailedAlert Confirm Color
	tooManyRetriesAlertTitleColor
	tooManyRetriesAlertMessageColor
	tooManyRetriesAlertConfirmColor
	faceProgressStartColor
	faceProgressEndColor
	exitAlertTitleColor
	exitAlertMessageColor
	exitAlertCancelColor
	exitAlertConfirmationColor
	timeoutAlertTitleColor
	timeoutAlertMessageColor
	timeoutAlertConfirmationColor
	verifyLoadingColor
	Verify NetworkErrorAlertTitleColor.
	verifyNetworkErrorAlertMessageColor
	verifyNetworkErrorAlertCancelColor
	verifyNetworkErrorAlert confirms the color
ocrModule	exitIconBase64
	ocrTitleColor
	ocr Border Color
	albumBase64
	takePhotoBase64
	submitBase64
	ocrSubmitTitleColor
	ocrLoadingColor
	failedAlertTitleColor
	failedAlertMessageColor
	failedAlertCancelColor
	failedAlertConfirmationColor
	ocrNetworkErrorAlertTitleColor
	OCR Network Error Alert Message Color
	ocrNetworkErrorAlertCancelColor
	ocrNetworkErrorAlertConfirmColor
	permissionFailedAlertTitleColor
	permissionFailedAlertMessageColor
	Permission Failed Alert: Confirm Color
	docErrorAlertTitleColor
	docErrorAlertMessageColor
	docErrorAlertCancelColor
	docErrorAlert Confirm Color
	restrictionsAlertTitleColor
	restrictionsAlertMessageColor
	restrictionsAlertConfirmationColor
	timeoutAlertTitleColor
	timeoutAlertMessageColor
	timeoutAlertConfirmationColor
	exitAlertTitleColor
	exitAlertCancelColor
	exitAlertConfirmationColor
	ocrMessageFailAlertTitleColor
	ocrMessageFailAlertCancelColor
	ocrMessageFailAlertConfirmColor
	ocrResultExitIconBase64
	ocrResultTitleColor
	ocrResultTipBGColor
	ocrResultTipColor
	ocrResultInfoTitleColor
	ocrResultInfoContentColor
	ocrResultConfirmBtnEnabledBGColor
	ocrResultConfirmBtnEnabledTitleColor
	ocrResultTipTitleColor
	ocrResultTipIconBase64
	ocrResultErrorTipBGColor
	ocrResultInfoBorderColor
	ocrResultConfirmBtnDisabledBGColor
	ocrResultConfirmBtnDisabledTitleColor
	ocrResultExitAlertTitleColor	ocrResultConfirmBtnDisabledTitleColor
	ocrResultExitAlertCancelColor
	ocrResultExitAlertConfirmationColor
	ocrResultInfoEmptyAlertTitleColor
	OCR Result Info Empty Alert Confirm Color
	ocrResultNetworkErrorAlertTitleColor
	ocrResultNetworkErrorAlertMessageColor
	ocrResultNetworkErrorAlert Confirm Color
	OCR Result Network Error Alert Cancel Color
	ocrResultInfoErrorAlertMessageColor
	ocrResultInfoErrorAlertConfirmColor