Basic UI Customization

On this page, explore the customization capabilities available for the Liveness Assessment user experience. The liveness assessment process consists of several steps, and in each step there are elements that can be customized.

Info

You can find the customization examples in the Architecture section.

Start Screen

This is the initial screen that opens once the liveness assessment process starts. It provides basic instructions on how a person can prepare for the assessment, and the Go button.

Button

For the Go button, you can customize text color, text font size, and background color:

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let uiConfiguration = UIConfiguration {
    $0.setColor(.white, forItem: .OnboardingScreenStartButtonTitle)
    $0.setFont(.systemFont(ofSize: 18.0), forItem: .OnboardingScreenStartButton)
    $0.setColor(.black, forItem: .OnboardingScreenStartButtonBackground)
}

FaceSDK.service.customization.configuration = uiConfiguration

RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor whiteColor] forItem:OnboardingScreenStartButtonTitle];
    [builder setFont:[UIFont systemFontOfSize:18.0] forItem:OnboardingScreenStartButton];
    [builder setColor:[UIColor blackColor] forItem:OnboardingScreenStartButtonBackground];
}];

RFSFaceSDK.service.customization.configuration = uiConfiguration;

val uiConfiguration = UiConfiguration.Builder()
        .setColor(CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_BACKGROUND, R.drawable.black)
        .setColor(CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_TITLE, R.color.white)
        .setFont(CustomizationFont.ONBOARDING_SCREEN_START_BUTTON, R.font.roboto)
        .build()

FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)

UiConfiguration uiConfiguration = new UiConfiguration.Builder()
        .setColor(CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_BACKGROUND, R.drawable.black)
        .setColor(CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_TITLE, R.color.white)
        .setFont(CustomizationFont.ONBOARDING_SCREEN_START_BUTTON, R.font.roboto)
        .build();

FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_BACKGROUND]: 0xff000000,
    [Enum.CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_TITLE]: 0xffffffff,
  },
  fonts: {
    [Enum.CustomizationFont.ONBOARDING_SCREEN_START_BUTTON]: { name: "sans-serif", size: 18 }
  }
}, _ => { }, _ => { })

FaceSDK.instance.customization.colors.onboardingScreenStartButtonBackground = Colors.black;
FaceSDK.instance.customization.colors.onboardingScreenStartButtonTitle = Colors.white;
FaceSDK.instance.customization.fonts.onboardingScreenStartButton = Font("sans-serif", size: 18);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_BACKGROUND]: 0xff000000,
    [Enum.CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_TITLE]: 0xffffffff,
  },
  fonts: {
    [Enum.CustomizationFont.ONBOARDING_SCREEN_START_BUTTON]: { name: "sans-serif", size: 18 }
  }
}, function (m) { }, function (e) { })

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_BACKGROUND]: 0xff000000,
    [Enum.CustomizationColor.ONBOARDING_SCREEN_START_BUTTON_TITLE]: 0xffffffff,
  },
  fonts: {
    [Enum.CustomizationFont.ONBOARDING_SCREEN_START_BUTTON]: { name: "sans-serif", size: 18 }
  }
})

// Android
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
    .SetColor(CustomizationColor.OnboardingScreenStartButtonBackground, 0xff0000)
    .SetColor(CustomizationColor.OnboardingScreenStartButtonTitle, 0xffffff)
    .SetFont(CustomizationFont.OnboardingScreenStartButton, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 18)
    .Build();

FaceSDK.Instance().Customization.SetUiConfiguration(uiConfiguration);

// iOS
RFSUIConfiguration uiConfiguration = RFSUIConfiguration.ConfigurationWithBuilderBlock((RFSUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.White, RFSCustomizationColor.OnboardingScreenStartButtonTitle);
    builder.SetFont(UIFont.SystemFontOfSize(18), RFSCustomizationFont.OnboardingScreenStartButton);
    builder.SetColor(UIColor.Black, RFSCustomizationColor.OnboardingScreenStartButtonBackground);
});

RFSFaceSDK.Service.Customization.Configuration = uiConfiguration;

Title and Subtitle

For the title and subtitle labels, you can set color and font size:

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let uiConfiguration = UIConfiguration {
    $0.setColor(.blue, forItem: .OnboardingScreenTitleLabelText)
    $0.setFont(.systemFont(ofSize: 20.0), forItem: .OnboardingScreenTitleLabel)
    $0.setColor(.green, forItem: .OnboardingScreenSubtitleLabelText)
    $0.setFont(.systemFont(ofSize: 16.0), forItem: .OnboardingScreenSubtitleLabel)
}

FaceSDK.service.customization.configuration = uiConfiguration

RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor blueColor] forItem:OnboardingScreenTitleLabelText];
    [builder setFont:[UIFont systemFontOfSize:20.0] forItem:OnboardingScreenTitleLabel];
    [builder setColor:[UIColor greenColor] forItem:OnboardingScreenSubtitleLabelText];
    [builder setFont:[UIFont systemFontOfSize:16.0] forItem:OnboardingScreenSubtitleLabel];
}];

RFSFaceSDK.service.customization.configuration = uiConfiguration;

val uiConfiguration = UiConfiguration.Builder()
        .setColor(CustomizationColor.ONBOARDING_SCREEN_TITLE_LABEL_TEXT, R.color.blue)
        .setFont(CustomizationFont.ONBOARDING_SCREEN_TITLE_LABEL, R.font.roboto)
        .setColor(CustomizationColor.ONBOARDING_SCREEN_SUBTITLE_LABEL_TEXT, R.color.green)
        .setFont(CustomizationFont.ONBOARDING_SCREEN_SUBTITLE_LABEL, R.font.roboto)
        .build()

FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)

UiConfiguration uiConfiguration = new UiConfiguration.Builder()
        .setColor(CustomizationColor.ONBOARDING_SCREEN_TITLE_LABEL_TEXT, R.color.blue)
        .setFont(CustomizationFont.ONBOARDING_SCREEN_TITLE_LABEL, R.font.roboto)
        .setColor(CustomizationColor.ONBOARDING_SCREEN_SUBTITLE_LABEL_TEXT, R.color.green)
        .setFont(CustomizationFont.ONBOARDING_SCREEN_SUBTITLE_LABEL, R.font.roboto)
        .build();

FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.ONBOARDING_SCREEN_TITLE_LABEL_TEXT]: 0xff0000ff,
    [Enum.CustomizationColor.ONBOARDING_SCREEN_SUBTITLE_LABEL_TEXT]: 0xff00ff00,
  },
  fonts: {
    [Enum.CustomizationFont.ONBOARDING_SCREEN_TITLE_LABEL]: { name: "sans-serif", size: 20 },
    [Enum.CustomizationFont.ONBOARDING_SCREEN_SUBTITLE_LABEL]: { name: "sans-serif", size: 16 }
  }
}, _ => { }, _ => { })

FaceSDK.instance.customization.colors.onboardingScreenTitleLabelText = Colors.blue;
FaceSDK.instance.customization.fonts.onboardingScreenTitleLabel = Font("sans-serif", size: 20);

FaceSDK.instance.customization.colors.onboardingScreenSubtitleLabelText = Colors.green;
FaceSDK.instance.customization.fonts.onboardingScreenSubtitleLabel = Font("sans-serif", size: 16);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.ONBOARDING_SCREEN_TITLE_LABEL_TEXT]: 0xff0000ff,
    [Enum.CustomizationColor.ONBOARDING_SCREEN_SUBTITLE_LABEL_TEXT]: 0xff00ff00,
  },
  fonts: {
    [Enum.CustomizationFont.ONBOARDING_SCREEN_TITLE_LABEL]: { name: "sans-serif", size: 20 },
    [Enum.CustomizationFont.ONBOARDING_SCREEN_SUBTITLE_LABEL]: { name: "sans-serif", size: 16 }
  }
}, function (m) { }, function (e) { })

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.ONBOARDING_SCREEN_TITLE_LABEL_TEXT]: 0xff0000ff,
    [Enum.CustomizationColor.ONBOARDING_SCREEN_SUBTITLE_LABEL_TEXT]: 0xff00ff00,
  },
  fonts: {
    [Enum.CustomizationFont.ONBOARDING_SCREEN_TITLE_LABEL]: { name: "sans-serif", size: 20 },
    [Enum.CustomizationFont.ONBOARDING_SCREEN_SUBTITLE_LABEL]: { name: "sans-serif", size: 16 }
  }
})

// Android
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
    .SetColor(CustomizationColor.OnboardingScreenTitleLabelText, 0x0000ff)
    .SetFont(CustomizationFont.OnboardingScreenTitleLabel, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 20)
    .SetColor(CustomizationColor.OnboardingScreenSubtitleLabelText, 0x00ff00)
    .SetFont(CustomizationFont.OnboardingScreenSubtitleLabel, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 16)
    .Build();

FaceSDK.Instance().Customization.SetUiConfiguration(uiConfiguration);

// iOS
RFSUIConfiguration uiConfiguration = RFSUIConfiguration.ConfigurationWithBuilderBlock((RFSUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Blue, RFSCustomizationColor.OnboardingScreenTitleLabelText);
    builder.SetFont(UIFont.SystemFontOfSize(20), RFSCustomizationFont.OnboardingScreenTitleLabel);
    builder.SetColor(UIColor.Green, RFSCustomizationColor.OnboardingScreenSubtitleLabelText);
    builder.SetFont(UIFont.SystemFontOfSize(16), RFSCustomizationFont.OnboardingScreenSubtitleLabel);
});

RFSFaceSDK.Service.Customization.Configuration = uiConfiguration;

Other Elements

The other Start screen customizable elements are the following:

• Screen background: Color
• Message text labels: Color, font size
• Images

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let uiConfiguration = UIConfiguration {
    $0.setColor(.lightGray, forItem: .OnboardingScreenBackground)
    $0.setColor(.green, forItem: .OnboardingScreenMessageLabelsText)
    $0.setFont(.systemFont(ofSize: 14.0), forItem: .OnboardingScreenMessageLabels)
    $0.setImage(UIImage(named: "custom_image_illumination")!, forItem: .OnboardingScreenIllumination)
    $0.setImage(UIImage(named: "custom_image_accessories")!, forItem: .OnboardingScreenAccessories)
    $0.setImage(UIImage(named: "custom_image_camera_level")!, forItem: .OnboardingScreenCameraLevel)
}

FaceSDK.service.customization.configuration = uiConfiguration

RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor lightGrayColor] forItem:OnboardingScreenBackground];
    [builder setColor:[UIColor greenColor] forItem:OnboardingScreenMessageLabelsText];
    [builder setFont:[UIFont systemFontOfSize:14.0] forItem:OnboardingScreenMessageLabels];
    [builder setImage:[UIImage imageNamed:@"custom_image_illumination"] forItem:OnboardingScreenIllumination];
    [builder setImage:[UIImage imageNamed:@"custom_image_accessories"] forItem:OnboardingScreenAccessories];
    [builder setImage:[UIImage imageNamed:@"custom_image_camera_level"] forItem:OnboardingScreenCameraLevel];
}];

RFSFaceSDK.service.customization.configuration = uiConfiguration;

val uiConfiguration = UiConfiguration.Builder()
        .setColor(CustomizationColor.ONBOARDING_SCREEN_BACKGROUND, R.color.background_color)

        .setColor(CustomizationColor.ONBOARDING_SCREEN_MESSAGE_LABELS_TEXT, R.color.message_color)
        .setFont(CustomizationFont.ONBOARDING_SCREEN_MESSAGE_LABELS, R.font.roboto)

        .setImage(CustomizationImage.ONBOARDING_SCREEN_ILLUMINATION, R.drawable.custom_image_illumination)
        .setImage(CustomizationImage.ONBOARDING_SCREEN_ACCESSORIES, R.drawable.custom_image_accessories)
        .setImage(CustomizationImage.ONBOARDING_SCREEN_CAMERA_LEVEL, R.drawable.custom_image_camera_level)
        .build()

FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)

UiConfiguration uiConfiguration = new UiConfiguration.Builder()
        .setColor(CustomizationColor.ONBOARDING_SCREEN_BACKGROUND, R.color.background_color)

        .setColor(CustomizationColor.ONBOARDING_SCREEN_MESSAGE_LABELS_TEXT, R.color.message_color)
        .setFont(CustomizationFont.ONBOARDING_SCREEN_MESSAGE_LABELS, R.font.roboto)

        .setImage(CustomizationImage.ONBOARDING_SCREEN_ILLUMINATION, R.drawable.custom_image_illumination)
        .setImage(CustomizationImage.ONBOARDING_SCREEN_ACCESSORIES, R.drawable.custom_image_accessories)
        .setImage(CustomizationImage.ONBOARDING_SCREEN_CAMERA_LEVEL, R.drawable.custom_image_camera_level)
        .build();

FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.ONBOARDING_SCREEN_BACKGROUND]: 0xffd3d3d3,
    [Enum.CustomizationColor.ONBOARDING_SCREEN_MESSAGE_LABELS_TEXT]: 0xff00ff00
  },
  fonts: {
    [Enum.CustomizationFont.ONBOARDING_SCREEN_MESSAGE_LABELS]: { name: "sans-serif", size: 14 }
  },
  images: {
    [Enum.CustomizationImage.ONBOARDING_SCREEN_ACCESSORIES]: base64ImageAccessories,
    [Enum.CustomizationImage.ONBOARDING_SCREEN_CAMERA_LEVEL]: base64ImageCameraLevel,
    [Enum.CustomizationImage.ONBOARDING_SCREEN_ILLUMINATION]: base64ImageIllumination
  }
}, _ => { }, _ => { })

FaceSDK.instance.customization.colors.onboardingScreenBackground = Colors.grey;

FaceSDK.instance.customization.colors.onboardingScreenMessageLabelsText = Colors.green;
FaceSDK.instance.customization.fonts.onboardingScreenMessageLabels = Font("sans-serif", size: 14);

FaceSDK.instance.customization.images.onboardingScreenIllumination = await rootBundle.load("custom_image_illumination.png");
FaceSDK.instance.customization.images.onboardingScreenAccessories = await rootBundle.load("custom_image_accessories.png");
FaceSDK.instance.customization.images.onboardingScreenCameraLevel = await rootBundle.load("custom_image_camera_level.png");

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.ONBOARDING_SCREEN_BACKGROUND]: 0xffd3d3d3,
    [Enum.CustomizationColor.ONBOARDING_SCREEN_MESSAGE_LABELS_TEXT]: 0xff00ff00
  },
  fonts: {
    [Enum.CustomizationFont.ONBOARDING_SCREEN_MESSAGE_LABELS]: { name: "sans-serif", size: 14 }
  },
  images: {
    [Enum.CustomizationImage.ONBOARDING_SCREEN_ACCESSORIES]: base64ImageAccessories,
    [Enum.CustomizationImage.ONBOARDING_SCREEN_CAMERA_LEVEL]: base64ImageCameraLevel,
    [Enum.CustomizationImage.ONBOARDING_SCREEN_ILLUMINATION]: base64ImageIllumination
  }
}, function (m) { }, function (e) { })

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.ONBOARDING_SCREEN_BACKGROUND]: 0xffd3d3d3,
    [Enum.CustomizationColor.ONBOARDING_SCREEN_MESSAGE_LABELS_TEXT]: 0xff00ff00
  },
  fonts: {
    [Enum.CustomizationFont.ONBOARDING_SCREEN_MESSAGE_LABELS]: { name: "sans-serif", size: 14 }
  },
  images: {
    [Enum.CustomizationImage.ONBOARDING_SCREEN_ACCESSORIES]: base64ImageAccessories,
    [Enum.CustomizationImage.ONBOARDING_SCREEN_CAMERA_LEVEL]: base64ImageCameraLevel,
    [Enum.CustomizationImage.ONBOARDING_SCREEN_ILLUMINATION]: base64ImageIllumination
  }
})

// Android
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
    .SetColor(CustomizationColor.OnboardingScreenBackground, 0xffffff)
    .SetColor(CustomizationColor.OnboardingScreenMessageLabelsText, 0x00ff00)
    .SetFont(CustomizationFont.OnboardingScreenMessageLabels, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 14)
    .SetImage(CustomizationImage.OnboardingScreenIllumination, drawable)
    .SetImage(CustomizationImage.OnboardingScreenAccessories, drawable)
    .SetImage(CustomizationImage.OnboardingScreenCameraLevel, drawable)
    .Build();

FaceSDK.Instance().Customization.SetUiConfiguration(uiConfiguration);

// iOS
RFSUIConfiguration uiConfiguration = RFSUIConfiguration.ConfigurationWithBuilderBlock((RFSUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.LightGray, RFSCustomizationColor.OnboardingScreenBackground);
    builder.SetColor(UIColor.Green, RFSCustomizationColor.OnboardingScreenMessageLabelsText);
    builder.SetFont(UIFont.SystemFontOfSize(14), RFSCustomizationFont.OnboardingScreenMessageLabels);
    builder.SetImage(uiImage, RFSCustomizationImage.OnboardingScreenIllumination);
    builder.SetImage(uiImage, RFSCustomizationImage.OnboardingScreenAccessories);
    builder.SetImage(uiImage, RFSCustomizationImage.OnboardingScreenCameraLevel);
});

RFSFaceSDK.Service.Customization.Configuration = uiConfiguration;

Session

The liveness assessment session is accompanied by an animation that demonstrates how to turn one's head. A blurred image of a person's face is displayed within a circle with animated and textual hints illustrated by colored target sectors around the circle:

Hint Label

For a hint label, you can customize text color, text font, and background color:

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let uiConfiguration = UIConfiguration {
    $0.setColor(.white, forItem: .CameraScreenFrontHintLabelText)
    $0.setFont(.systemFont(ofSize: 20.0), forItem: .CameraScreenHintLabel)
    $0.setColor(.black, forItem: .CameraScreenFrontHintLabelBackground)
}

FaceSDK.service.customization.configuration = uiConfiguration

RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor whiteColor] forItem:CameraScreenFrontHintLabelText];
    [builder setFont:[UIFont systemFontOfSize:20.0] forItem:CameraScreenHintLabel];
    [builder setColor:[UIColor blackColor] forItem:CameraScreenFrontHintLabelBackground];
}];

RFSFaceSDK.service.customization.configuration = uiConfiguration;

val uiConfiguration = UiConfiguration.Builder()
        .setColor(CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_TEXT, R.color.black)
        .setFont(CustomizationFont.CAMERA_SCREEN_HINT_LABEL, R.font.roboto)
        .setColor(CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_BACKGROUND, R.drawable.notification_background_white)
        .build()

FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)

UiConfiguration uiConfiguration = new UiConfiguration.Builder()
        .setColor(CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_TEXT, R.color.black)
        .setFont(CustomizationFont.CAMERA_SCREEN_HINT_LABEL, R.font.roboto)
        .setColor(CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_BACKGROUND, R.drawable.notification_background_white)
        .build();

FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_TEXT]: 0xffffffff,
    [Enum.CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_BACKGROUND]: 0xff000000
  },
  fonts: {
    [Enum.CustomizationFont.CAMERA_SCREEN_HINT_LABEL]: { name: "sans-serif", size: 20 }
  }
}, _ => { }, _ => { })

FaceSDK.instance.customization.colors.cameraScreenFrontHintLabelText = Colors.white;
FaceSDK.instance.customization.colors.cameraScreenFrontHintLabelBackground = Colors.black;
FaceSDK.instance.customization.fonts.cameraScreenHintLabel = Font("sans-serif", size: 20);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_TEXT]: 0xffffffff,
    [Enum.CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_BACKGROUND]: 0xff000000
  },
  fonts: {
    [Enum.CustomizationFont.CAMERA_SCREEN_HINT_LABEL]: { name: "sans-serif", size: 20 }
  }
}, function (m) { }, function (e) { })

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_TEXT]: 0xffffffff,
    [Enum.CustomizationColor.CAMERA_SCREEN_FRONT_HINT_LABEL_BACKGROUND]: 0xff000000
  },
  fonts: {
    [Enum.CustomizationFont.CAMERA_SCREEN_HINT_LABEL]: { name: "sans-serif", size: 20 }
  }
})

// Android
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
    .SetColor(CustomizationColor.CameraScreenFrontHintLabelText, 0xffffff)
    .SetFont(CustomizationFont.CameraScreenHintLabel, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 20)
    .SetColor(CustomizationColor.CameraScreenFrontHintLabelBackground, 0x000000)
    .Build();

FaceSDK.Instance().Customization.SetUiConfiguration(uiConfiguration);

// iOS
RFSUIConfiguration uiConfiguration = RFSUIConfiguration.ConfigurationWithBuilderBlock((RFSUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.White, RFSCustomizationColor.CameraScreenFrontHintLabelText);
    builder.SetFont(UIFont.SystemFontOfSize(20), RFSCustomizationFont.CameraScreenHintLabel);
    builder.SetColor(UIColor.Black, RFSCustomizationColor.CameraScreenFrontHintLabelBackground);
});

RFSFaceSDK.Service.Customization.Configuration = uiConfiguration;

Outline and Target Sector

The colors of the face circle outline and target sector can be customized:

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let uiConfiguration = UIConfiguration {
    $0.setColor(.green, forItem: .CameraScreenStrokeActive)
    $0.setColor(.green, forItem: .CameraScreenStrokeNormal)
    $0.setColor(.green.withAlphaComponent(0.35), forItem: .CameraScreenSectorTarget)
    $0.setColor(.green, forItem: .CameraScreenSectorActive)
}

FaceSDK.service.customization.configuration = uiConfiguration

RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor greenColor] forItem:CameraScreenStrokeActive];
    [builder setColor:[UIColor greenColor] forItem:CameraScreenStrokeNormal];
    [builder setColor:[[UIColor greenColor] colorWithAlphaComponent:0.35] forItem:CameraScreenSectorTarget];
    [builder setColor:[UIColor greenColor] forItem:CameraScreenSectorActive];
}];

RFSFaceSDK.service.customization.configuration = uiConfiguration;

val uiConfiguration = UiConfiguration.Builder()
        .setColor(CustomizationColor.CAMERA_SCREEN_STROKE_ACTIVE, R.color.gray)
        .setColor(CustomizationColor.CAMERA_SCREEN_STROKE_NORMAL, R.color.black)
        .setColor(CustomizationColor.CAMERA_SCREEN_SECTOR_ACTIVE, R.color.red)
        .setColor(CustomizationColor.CAMERA_SCREEN_SECTOR_TARGET, R.color.blue)
        .build()

FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)

UiConfiguration uiConfiguration = new UiConfiguration.Builder()
        .setColor(CustomizationColor.CAMERA_SCREEN_STROKE_ACTIVE, R.color.gray)
        .setColor(CustomizationColor.CAMERA_SCREEN_STROKE_NORMAL, R.color.black)
        .setColor(CustomizationColor.CAMERA_SCREEN_SECTOR_ACTIVE, R.color.red)
        .setColor(CustomizationColor.CAMERA_SCREEN_SECTOR_TARGET, R.color.blue)
        .build();

FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.CAMERA_SCREEN_STROKE_ACTIVE]: 0xff00ff00,
    [Enum.CustomizationColor.CAMERA_SCREEN_STROKE_NORMAL]: 0xff00ff00,
    [Enum.CustomizationColor.CAMERA_SCREEN_SECTOR_TARGET]: 0xff00ff00,
    [Enum.CustomizationColor.CAMERA_SCREEN_SECTOR_ACTIVE]: 0xff00ff00,
  }
}, _ => { }, _ => { })

FaceSDK.instance.customization.colors.cameraScreenStrokeActive = Colors.grey;
FaceSDK.instance.customization.colors.cameraScreenStrokeNormal = Colors.black;

FaceSDK.instance.customization.colors.cameraScreenSectorTarget = Colors.red;
FaceSDK.instance.customization.colors.cameraScreenSectorActive = Colors.blue;

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.CAMERA_SCREEN_STROKE_ACTIVE]: 0xff00ff00,
    [Enum.CustomizationColor.CAMERA_SCREEN_STROKE_NORMAL]: 0xff00ff00,
    [Enum.CustomizationColor.CAMERA_SCREEN_SECTOR_TARGET]: 0xff00ff00,
    [Enum.CustomizationColor.CAMERA_SCREEN_SECTOR_ACTIVE]: 0xff00ff00,
  }
}, function (m) { }, function (e) { })

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.CAMERA_SCREEN_STROKE_ACTIVE]: 0xff00ff00,
    [Enum.CustomizationColor.CAMERA_SCREEN_STROKE_NORMAL]: 0xff00ff00,
    [Enum.CustomizationColor.CAMERA_SCREEN_SECTOR_TARGET]: 0xff00ff00,
    [Enum.CustomizationColor.CAMERA_SCREEN_SECTOR_ACTIVE]: 0xff00ff00,
  }
})

// Android
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
    .SetColor(CustomizationColor.CameraScreenStrokeActive, 0x00ff00)
    .SetColor(CustomizationColor.CameraScreenStrokeNormal, 0x00ff00)
    .SetColor(CustomizationColor.CameraScreenSectorTarget, 0x00ff00)
    .SetColor(CustomizationColor.CameraScreenSectorActive, 0x00ff00)
    .Build();

FaceSDK.Instance().Customization.SetUiConfiguration(uiConfiguration);

// iOS
RFSUIConfiguration uiConfiguration = RFSUIConfiguration.ConfigurationWithBuilderBlock((RFSUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Green, RFSCustomizationColor.CameraScreenStrokeActive);
    builder.SetColor(UIColor.Green, RFSCustomizationColor.CameraScreenStrokeNormal);
    builder.SetColor(UIColor.Green, RFSCustomizationColor.CameraScreenSectorTarget);
    builder.SetColor(UIColor.Green, RFSCustomizationColor.CameraScreenSectorActive);
});

RFSFaceSDK.Service.Customization.Configuration = uiConfiguration;

Loading Results

During the loading of results, a processing spinner and a text label are displayed:

The customizable elements here are the following:

• Screen background: Color
• Processing spinner: Color
• Text label: Color, font size

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let uiConfiguration = UIConfiguration {
    $0.setColor(.lightGray, forItem: .ProcessingScreenBackground)
    $0.setColor(.green, forItem: .ProcessingScreenProgress)
    $0.setColor(.green, forItem: .ProcessingScreenTitleLabel)
    $0.setFont(.systemFont(ofSize: 20.0), forItem: .ProcessingScreenLabel)
}

FaceSDK.service.customization.configuration = uiConfiguration

RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor lightGrayColor] forItem:ProcessingScreenBackground];
    [builder setColor:[UIColor greenColor] forItem:ProcessingScreenProgress];
    [builder setColor:[UIColor greenColor] forItem:ProcessingScreenTitleLabel];
    [builder setFont:[UIFont systemFontOfSize:20.0] forItem:ProcessingScreenLabel];
}];

RFSFaceSDK.service.customization.configuration = uiConfiguration;

val uiConfiguration = UiConfiguration.Builder()
        .setColor(CustomizationColor.PROCESSING_SCREEN_BACKGROUND, R.color.light_gray)
        .setColor(CustomizationColor.PROCESSING_SCREEN_PROGRESS, R.color.title_color)
        .setColor(CustomizationColor.PROCESSING_SCREEN_TITLE, R.color.message_color)
        .setFont(CustomizationFont.PROCESSING_SCREEN, R.font.roboto)
        .build()

FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)

UiConfiguration uiConfiguration = new UiConfiguration.Builder()
        .setColor(CustomizationColor.PROCESSING_SCREEN_BACKGROUND, R.color.light_gray)
        .setColor(CustomizationColor.PROCESSING_SCREEN_PROGRESS, R.color.title_color)
        .setColor(CustomizationColor.PROCESSING_SCREEN_TITLE, R.color.message_color)
        .setFont(CustomizationFont.PROCESSING_SCREEN, R.font.roboto)
        .build();

FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.PROCESSING_SCREEN_BACKGROUND]: 0xffd3d3d3,
    [Enum.CustomizationColor.PROCESSING_SCREEN_PROGRESS]: 0xff00ff00,
    [Enum.CustomizationColor.PROCESSING_SCREEN_TITLE]: 0xff00ff00
  },
  fonts: {
    [Enum.CustomizationFont.PROCESSING_SCREEN]: { name: "sans-serif", size: 20 }
  }
}, _ => { }, _ => { })

FaceSDK.instance.customization.colors.processingScreenBackground = Colors.grey;
FaceSDK.instance.customization.colors.processingScreenProgress = Colors.green;
FaceSDK.instance.customization.colors.processingScreenTitleLabel = Colors.green;
FaceSDK.instance.customization.fonts.processingScreenLabel = Font("sans-serif", size: 20);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.PROCESSING_SCREEN_BACKGROUND]: 0xffd3d3d3,
    [Enum.CustomizationColor.PROCESSING_SCREEN_PROGRESS]: 0xff00ff00,
    [Enum.CustomizationColor.PROCESSING_SCREEN_TITLE]: 0xff00ff00
  },
  fonts: {
    [Enum.CustomizationFont.PROCESSING_SCREEN]: { name: "sans-serif", size: 20 }
  }
}, function (m) { }, function (e) { })

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.PROCESSING_SCREEN_BACKGROUND]: 0xffd3d3d3,
    [Enum.CustomizationColor.PROCESSING_SCREEN_PROGRESS]: 0xff00ff00,
    [Enum.CustomizationColor.PROCESSING_SCREEN_TITLE]: 0xff00ff00
  },
  fonts: {
    [Enum.CustomizationFont.PROCESSING_SCREEN]: { name: "sans-serif", size: 20 }
  }
})

// Android
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
    .SetColor(CustomizationColor.ProcessingScreenBackground, 0x000000)
    .SetColor(CustomizationColor.ProcessingScreenProgress, 0x00ff00)
    .SetColor(CustomizationColor.ProcessingScreenTitle, 0x00ff00)
    .SetFont(CustomizationFont.ProcessingScreen, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 20)
    .Build();

FaceSDK.Instance().Customization.SetUiConfiguration(uiConfiguration);

// iOS
RFSUIConfiguration uiConfiguration = RFSUIConfiguration.ConfigurationWithBuilderBlock((RFSUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Black, RFSCustomizationColor.ProcessingScreenBackground);
    builder.SetColor(UIColor.Green, RFSCustomizationColor.ProcessingScreenProgress);
    builder.SetColor(UIColor.Green, RFSCustomizationColor.ProcessingScreenTitleLabel);
    builder.SetFont(UIFont.SystemFontOfSize(20), RFSCustomizationFont.ProcessingScreenLabel);
});

RFSFaceSDK.Service.Customization.Configuration = uiConfiguration;

Result Screen

Depending on the result, either a Success or Retry result screen will be displayed in the final step.

Success

For the Success screen, the image and a screen background color can be customized:

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let uiConfiguration = UIConfiguration {
    $0.setImage(UIImage(named: "success_image")!, forItem: .SuccessScreenImage)
    $0.setColor(.lightGray, forItem: .SuccessScreenBackground)
}

FaceSDK.service.customization.configuration = uiConfiguration

RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
    [builder setImage:[UIImage imageNamed:@"success_image"] forItem:SuccessScreenImage];
    [builder setColor:[UIColor lightGrayColor] forItem:SuccessScreenBackground];
}];

RFSFaceSDK.service.customization.configuration = uiConfiguration;

val uiConfiguration = UiConfiguration.Builder()
        .setImage(CustomizationImage.SUCCESS_SCREEN_IMAGE, R.drawable.done_button)
        .setColor(CustomizationColor.SUCCESS_SCREEN_BACKGROUND, R.color.light_gray)
        .build()

FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)

UiConfiguration uiConfiguration = new UiConfiguration.Builder()
        .setImage(CustomizationImage.SUCCESS_SCREEN_IMAGE, R.drawable.done_button)
        .setColor(CustomizationColor.SUCCESS_SCREEN_BACKGROUND, R.color.light_gray)
        .build();

FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.SUCCESS_SCREEN_BACKGROUND]: 0xffd3d3d3
  },
  images: {
    [Enum.CustomizationImage.SUCCESS_SCREEN_IMAGE]: base64ImageSuccess
  }
}, _ => { }, _ => { })

FaceSDK.instance.customization.colors.successScreenBackground = Colors.grey;
FaceSDK.instance.customization.images.successScreenImage = await rootBundle.load("success_image.png");

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.SUCCESS_SCREEN_BACKGROUND]: 0xffd3d3d3
  },
  images: {
    [Enum.CustomizationImage.SUCCESS_SCREEN_IMAGE]: base64ImageSuccess
  }
}, function (m) { }, function (e) { })

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.SUCCESS_SCREEN_BACKGROUND]: 0xffd3d3d3
  },
  images: {
    [Enum.CustomizationImage.SUCCESS_SCREEN_IMAGE]: base64ImageSuccess
  }
})

// Android
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
    .SetImage(CustomizationImage.SuccessScreenImage, drawable)
    .SetColor(CustomizationColor.SuccessScreenBackground, 0x000000)
    .Build();

FaceSDK.Instance().Customization.SetUiConfiguration(uiConfiguration);

// iOS
RFSUIConfiguration uiConfiguration = RFSUIConfiguration.ConfigurationWithBuilderBlock((RFSUIConfigurationBuilder builder) =>
{
    builder.SetImage(uiImage, RFSCustomizationImage.SuccessScreenImage);
    builder.SetColor(UIColor.LightGray, RFSCustomizationColor.SuccessScreenBackground);
});

RFSFaceSDK.Service.Customization.Configuration = uiConfiguration;

Retry

The Retry screen provides guidelines on how to prepare for another attempt.

The reason why a person may not successfully pass the liveness assessment can be attributed to either the subject (for example, smiling, closed eyes, sunglasses, mask, headwear, etc.) or the environment (for example, problems with lighting, shadows, glare).

An image and a message label are provided for each of these cases. If the problem encompasses both cases, both images and messages will be displayed as shown in the screenshot below:

The customizable elements here are the following:

• Title text: Color, font size
• Subtitle text: Color, font size
• Subject retry image
• Environment retry image
• Hint text: Color, font size
• Screen background: Color
• Try again button: Text color, text font size, background color

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let uiConfiguration = UIConfiguration {
    $0.setColor(.blue, forItem: .RetryScreenTitleLabelText)
    $0.setFont(.systemFont(ofSize: 22.0), forItem: .RetryScreenTitleLabel)

    $0.setColor(.green, forItem: .RetryScreenSubtitleLabelText)
    $0.setFont(.systemFont(ofSize: 18.0), forItem: .RetryScreenSubtitleLabel)

    $0.setImage(UIImage(named: "custom_image_subject")!, forItem: .RetryScreenHintSubject)
    $0.setImage(UIImage(named: "custom_image_environment")!, forItem: .RetryScreenHintEnvironment)

    $0.setColor(.blue, forItem: .RetryScreenHintLabelsText)
    $0.setFont(.systemFont(ofSize: 16.0), forItem: .RetryScreenHintLabels)

    $0.setColor(.lightGray, forItem: .RetryScreenBackground)

    $0.setColor(.white, forItem: .RetryScreenRetryButtonTitle)
    $0.setFont(.systemFont(ofSize: 20.0), forItem: .RetryScreenRetryButton)
    $0.setColor(.black, forItem: .RetryScreenRetryButtonBackground)
}

FaceSDK.service.customization.configuration = uiConfiguration

RFSUIConfiguration *uiConfiguration = [RFSUIConfiguration configurationWithBuilderBlock:^(RFSUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor blueColor] forItem:RetryScreenTitleLabelText];
    [builder setFont:[UIFont boldSystemFontOfSize:22.0] forItem:RetryScreenTitleLabel];

    [builder setColor:[UIColor greenColor] forItem:RetryScreenSubtitleLabelText];
    [builder setFont:[UIFont systemFontOfSize:18.0] forItem:RetryScreenSubtitleLabel];

    [builder setImage:[UIImage imageNamed:@"custom_image_subject"] forItem:RetryScreenHintSubject];
    [builder setImage:[UIImage imageNamed:@"custom_image_environment"] forItem:RetryScreenHintEnvironment];

    [builder setColor:[UIColor blueColor] forItem:RetryScreenHintLabelsText];
    [builder setFont:[UIFont systemFontOfSize:16.0] forItem:RetryScreenHintLabels];

    [builder setColor:[UIColor lightGrayColor] forItem:RetryScreenBackground];

    [builder setColor:[UIColor whiteColor] forItem:RetryScreenRetryButtonTitle];
    [builder setFont:[UIFont systemFontOfSize:20.0] forItem:RetryScreenRetryButtonTitle];
    [builder setColor:[UIColor blackColor] forItem:RetryScreenRetryButtonBackground];    
}];

RFSFaceSDK.service.customization.configuration = uiConfiguration;

val uiConfiguration = UiConfiguration.Builder()
        .setColor(CustomizationColor.RETRY_SCREEN_TITLE_LABEL_TEXT, R.color.title_color)
        .setFont(CustomizationFont.RETRY_SCREEN_TITLE_LABEL, R.font.roboto)

        .setColor(CustomizationColor.RETRY_SCREEN_SUBTITLE_LABEL_TEXT, R.color.title_color)
        .setFont(CustomizationFont.RETRY_SCREEN_SUBTITLE_LABEL, R.font.roboto)

        .setImage(CustomizationImage.RETRY_SCREEN_HINT_ENVIRONMENT, R.drawable.ic_light)
        .setImage(CustomizationImage.RETRY_SCREEN_HINT_SUBJECT, R.drawable.ic_emotions)

        .setColor(CustomizationColor.RETRY_SCREEN_HINT_LABELS_TEXT, R.color.message_color)
        .setFont(CustomizationFont.RETRY_SCREEN_HINT_LABELS, R.font.roboto)

        .setColor(CustomizationColor.RETRY_SCREEN_BACKGROUND, R.color.background_color)

        .setColor(CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_TITLE, R.color.image_color)
        .setColor(CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_BACKGROUND, R.color.title_color)
        .setFont(CustomizationFont.RETRY_SCREEN_RETRY_BUTTON, R.font.roboto)
        .build()

FaceSDK.Instance().customization.setUiConfiguration(uiConfiguration)

UiConfiguration uiConfiguration = new UiConfiguration.Builder()
        .setColor(CustomizationColor.RETRY_SCREEN_TITLE_LABEL_TEXT, R.color.title_color)
        .setFont(CustomizationFont.RETRY_SCREEN_TITLE_LABEL, R.font.roboto)

        .setColor(CustomizationColor.RETRY_SCREEN_SUBTITLE_LABEL_TEXT, R.color.title_color)
        .setFont(CustomizationFont.RETRY_SCREEN_SUBTITLE_LABEL, R.font.roboto)

        .setImage(CustomizationImage.RETRY_SCREEN_HINT_ENVIRONMENT, R.drawable.ic_light)
        .setImage(CustomizationImage.RETRY_SCREEN_HINT_SUBJECT, R.drawable.ic_emotions)

        .setColor(CustomizationColor.RETRY_SCREEN_HINT_LABELS_TEXT, R.color.message_color)
        .setFont(CustomizationFont.RETRY_SCREEN_HINT_LABELS, R.font.roboto)

        .setColor(CustomizationColor.RETRY_SCREEN_BACKGROUND, R.color.background_color)

        .setColor(CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_TITLE, R.color.image_color)
        .setColor(CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_BACKGROUND, R.color.title_color)
        .setFont(CustomizationFont.RETRY_SCREEN_RETRY_BUTTON, R.font.roboto)
        .build();

FaceSDK.Instance().getCustomization().setUiConfiguration(uiConfiguration);

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.RETRY_SCREEN_TITLE_LABEL_TEXT]: 0xff00ff00,
    [Enum.CustomizationColor.RETRY_SCREEN_HINT_LABELS_TEXT]: 0xff0000ff,
    [Enum.CustomizationColor.RETRY_SCREEN_BACKGROUND]: 0xffd3d3d3,
    [Enum.CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_TITLE]: 0xffffffff,
    [Enum.CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_BACKGROUND]: 0xff000000
  },
  fonts: {
    [Enum.CustomizationFont.RETRY_SCREEN_TITLE_LABEL]: { name: "sans-serif", size: 22 },
    [Enum.CustomizationFont.RETRY_SCREEN_HINT_LABELS]: { name: "sans-serif", size: 16 },
    [Enum.CustomizationFont.RETRY_SCREEN_RETRY_BUTTON]: { name: "sans-serif", size: 20 }
  },
  images: {
    [Enum.CustomizationImage.RETRY_SCREEN_HINT_ENVIRONMENT]: base64ImageHintEnviroment,
    [Enum.CustomizationImage.RETRY_SCREEN_HINT_SUBJECT]: base64ImageHintSubject
  }
}, _ => { }, _ => { })

FaceSDK.instance.customization.colors.retryScreenTitleLabelText = Colors.blue;
FaceSDK.instance.customization.fonts.retryScreenTitleLabel = Font("sans-serif", size: 22);

FaceSDK.instance.customization.colors.retryScreenSubtitleLabelText = Colors.green;
FaceSDK.instance.customization.fonts.retryScreenSubtitleLabel = Font("sans-serif", size: 18);

FaceSDK.instance.customization.images.retryScreenHintSubject = await rootBundle.load("custom_image_subject.png");
FaceSDK.instance.customization.images.retryScreenHintEnvironment = await rootBundle.load("custom_image_environment.png");

FaceSDK.instance.customization.colors.retryScreenHintLabelsText = Colors.blue;
FaceSDK.instance.customization.fonts.retryScreenHintLabels = Font("sans-serif", size: 16);

FaceSDK.instance.customization.colors.retryScreenBackground = Colors.grey;

FaceSDK.instance.customization.colors.retryScreenRetryButtonTitle = Colors.white;
FaceSDK.instance.customization.fonts.retryScreenRetryButton = Font("sans-serif", size: 20);
FaceSDK.instance.customization.colors.retryScreenRetryButtonBackground = Colors.black;

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.RETRY_SCREEN_TITLE_LABEL_TEXT]: 0xff00ff00,
    [Enum.CustomizationColor.RETRY_SCREEN_HINT_LABELS_TEXT]: 0xff0000ff,
    [Enum.CustomizationColor.RETRY_SCREEN_BACKGROUND]: 0xffd3d3d3,
    [Enum.CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_TITLE]: 0xffffffff,
    [Enum.CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_BACKGROUND]: 0xff000000
  },
  fonts: {
    [Enum.CustomizationFont.RETRY_SCREEN_TITLE_LABEL]: { name: "sans-serif", size: 22 },
    [Enum.CustomizationFont.RETRY_SCREEN_HINT_LABELS]: { name: "sans-serif", size: 16 },
    [Enum.CustomizationFont.RETRY_SCREEN_RETRY_BUTTON]: { name: "sans-serif", size: 20 }
  },
  images: {
    [Enum.CustomizationImage.RETRY_SCREEN_HINT_ENVIRONMENT]: base64ImageHintEnviroment,
    [Enum.CustomizationImage.RETRY_SCREEN_HINT_SUBJECT]: base64ImageHintSubject
  }
}, function (m) { }, function (e) { })

FaceSDK.setCustomization({
  colors: {
    [Enum.CustomizationColor.RETRY_SCREEN_TITLE_LABEL_TEXT]: 0xff00ff00,
    [Enum.CustomizationColor.RETRY_SCREEN_HINT_LABELS_TEXT]: 0xff0000ff,
    [Enum.CustomizationColor.RETRY_SCREEN_BACKGROUND]: 0xffd3d3d3,
    [Enum.CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_TITLE]: 0xffffffff,
    [Enum.CustomizationColor.RETRY_SCREEN_RETRY_BUTTON_BACKGROUND]: 0xff000000
  },
  fonts: {
    [Enum.CustomizationFont.RETRY_SCREEN_TITLE_LABEL]: { name: "sans-serif", size: 22 },
    [Enum.CustomizationFont.RETRY_SCREEN_HINT_LABELS]: { name: "sans-serif", size: 16 },
    [Enum.CustomizationFont.RETRY_SCREEN_RETRY_BUTTON]: { name: "sans-serif", size: 20 }
  },
  images: {
    [Enum.CustomizationImage.RETRY_SCREEN_HINT_ENVIRONMENT]: base64ImageHintEnviroment,
    [Enum.CustomizationImage.RETRY_SCREEN_HINT_SUBJECT]: base64ImageHintSubject
  }
})

// Android
UiConfiguration uiConfiguration = new UiConfiguration.Builder()
    .SetColor(CustomizationColor.RetryScreenTitleLabelText, 0x0000ff)
    .SetFont(CustomizationFont.RetryScreenTitleLabel, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 22)

    .SetColor(CustomizationColor.RetryScreenSubtitleLabelText, 0x00ff00)
    .SetFont(CustomizationFont.RetryScreenSubtitleLabel, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 18)

    .SetImage(CustomizationImage.RetryScreenHintSubject, drawable)
    .SetImage(CustomizationImage.RetryScreenHintEnvironment, drawable)

    .SetColor(CustomizationColor.RetryScreenHintLabelsText, 0x0000ff)
    .SetFont(CustomizationFont.RetryScreenHintLabels, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 16)

    .SetColor(CustomizationColor.RetryScreenBackground, 0x000000)

    .SetColor(CustomizationColor.RetryScreenRetryButtonTitle, 0xffffff)
    .SetFont(CustomizationFont.RetryScreenRetryButton, Typeface.Create("sans-serif", TypefaceStyle.Normal))
    .SetFontSize(CustomizationFont.OnboardingScreenStartButton, 20)
    .SetColor(CustomizationColor.RetryScreenRetryButtonBackground, 0x000000)
    .Build();

FaceSDK.Instance().Customization.SetUiConfiguration(uiConfiguration);

// iOS
RFSUIConfiguration uiConfiguration = RFSUIConfiguration.ConfigurationWithBuilderBlock((RFSUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Blue, RFSCustomizationColor.RetryScreenTitleLabelText);
    builder.SetFont(UIFont.SystemFontOfSize(22), RFSCustomizationFont.RetryScreenTitleLabel);

    builder.SetColor(UIColor.Green, RFSCustomizationColor.RetryScreenSubtitleLabelText);
    builder.SetFont(UIFont.SystemFontOfSize(18), RFSCustomizationFont.RetryScreenSubtitleLabel);

    builder.SetImage(uiImage, RFSCustomizationImage.RetryScreenHintSubject);
    builder.SetImage(uiImage, RFSCustomizationImage.RetryScreenHintEnvironment);

    builder.SetColor(UIColor.Blue, RFSCustomizationColor.RetryScreenHintLabelsText);
    builder.SetFont(UIFont.SystemFontOfSize(16), RFSCustomizationFont.RetryScreenHintLabels);

    builder.SetColor(UIColor.Black, RFSCustomizationColor.RetryScreenBackground);

    builder.SetColor(UIColor.White, RFSCustomizationColor.RetryScreenRetryButtonTitle);
    builder.SetFont(UIFont.SystemFontOfSize(20), RFSCustomizationFont.RetryScreenRetryButton);
    builder.SetColor(UIColor.Black, RFSCustomizationColor.RetryScreenRetryButtonBackground);
});

RFSFaceSDK.Service.Customization.Configuration = uiConfiguration;

Process Management

You can control the ability to interrupt the process and choose whether to display the Start and Result screens.

Disable Interruptions

To remove the Close cross button, invoke:

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let configuration = LivenessConfiguration { 
    $0.isCloseButtonEnabled = false
}

FaceSDK.service.startLiveness(
    from: viewController,
    animated: true, 
    configuration: configuration,
    onLiveness: { response in

    },
    completion: nil
)

RFSLivenessConfiguration *configuration = [RFSLivenessConfiguration configurationWithBuilder:^(RFSLivenessConfigurationBuilder * _Nonnull builder) {
    [builder setCloseButtonEnabled:NO];
}];

[RFSFaceSDK.service startLivenessFrom:self animated:YES 
                    onLiveness:^(RFSLivenessResponse * _Nonnull repsonse) {

} completion:^{

}];

val configuration = LivenessConfiguration.Builder()
            .setCloseButtonEnabled(false)
            .build()
FaceSDK.Instance().startLiveness(
    context, configuration) { livenessResponse: LivenessResponse? -> }

LivenessConfiguration configuration = new LivenessConfiguration.Builder()
            .setCloseButtonEnabled(false)
            .build();
FaceSDK.Instance().startLiveness(context, configuration, livenessResponse -> {});

FaceSDK.startLiveness({
  closeButtonEnabled: false
}, _ => { }, _ => { })

var livenessResponse = await FaceSDK.instance.startLiveness(
  config: LivenessConfig(
    closeButtonEnabled: false,
  ),
);

FaceSDK.startLiveness({
  closeButtonEnabled: false
}, function (response) { }, function (e) { })

FaceSDK.startLiveness({
  closeButtonEnabled: false
})

// Android
LivenessConfiguration.Builder config = new();
config.SetCloseButtonEnabled(false);
FaceSDK.Instance().StartLiveness(Platform.AppContext, config.Build(), this);

// iOS
RFSFaceSDK.Service.StartLivenessFrom(CurrentPresenter, true, RFSLivenessConfiguration.ConfigurationWithBuilder((RFSLivenessConfigurationBuilder builder) =>
{
    builder.CloseButtonEnabled = false;
}), (RFSLivenessResponse response) =>
{
}, () => { });

Disable Start Screen

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let configuration = LivenessConfiguration { 
    $0.stepSkippingMask = [.onboarding]
}

FaceSDK.service.startLiveness(
    from: viewController,
    animated: true, 
    configuration: configuration,
    onLiveness: { response in

    },
    completion: nil
)

RFSLivenessConfiguration *configuration = [RFSLivenessConfiguration configurationWithBuilder:^(RFSLivenessConfigurationBuilder  * _Nonnull builder) {
    builder.stepSkippingMask = RFSLivenessStepSkipOnboarding;
}];

[RFSFaceSDK.service startLivenessFrom:viewController
                             animated:YES
                        configuration:configuration
                           onLiveness:^(RFSLivenessResponse * _Nonnull response) {

} completion:nil];

val configuration = LivenessConfiguration.Builder()
            .setSkipStep(LivenessSkipStep.ONBOARDING_STEP)
            .build()
FaceSDK.Instance().startLiveness(
    context, configuration
) { livenessResponse: LivenessResponse? -> }

LivenessConfiguration configuration = new LivenessConfiguration.Builder()
            .setSkipStep(LivenessSkipStep.ONBOARDING_STEP)
            .build();
FaceSDK.Instance().startLiveness(context, configuration, livenessResponse -> {});

FaceSDK.startLiveness({
  skipStep: [Enum.LivenessSkipStep.ONBOARDING_STEP]
}, response => { }, _ => { })

var livenessResponse = await FaceSDK.instance.startLiveness(
  config: LivenessConfig(
    skipStep: [LivenessSkipStep.ONBOARDING_STEP],
  ),
);

FaceSDK.startLiveness({
  skipStep: [Enum.LivenessSkipStep.ONBOARDING_STEP]
}, function (response) { }, function (e) { })

FaceSDK.startLiveness({
  skipStep: [Enum.LivenessSkipStep.ONBOARDING_STEP]
})

// Android
LivenessConfiguration.Builder config = new();
config.SetSkipStep(LivenessSkipStep.OnboardingStep);
FaceSDK.Instance().StartLiveness(Platform.AppContext, config.Build(), this);

// iOS
RFSFaceSDK.Service.StartLivenessFrom(CurrentPresenter, true, RFSLivenessConfiguration.ConfigurationWithBuilder((RFSLivenessConfigurationBuilder builder) =>
{
    builder.StepSkippingMask = RFSLivenessStepSkip.Onboarding;
}), (RFSLivenessResponse response) =>
{
}, () => { });

Disable Result Screen

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let configuration = LivenessConfiguration { 
    $0.stepSkippingMask = [.success]
}

FaceSDK.service.startLiveness(
    from: viewController,
    animated: true, 
    configuration: configuration,
    onLiveness: { response in

    },
    completion: nil
)

RFSLivenessConfiguration *configuration = [RFSLivenessConfiguration configurationWithBuilder:^(RFSLivenessConfigurationBuilder  * _Nonnull builder) {
    builder.stepSkippingMask = RFSLivenessStepSkipSuccess;
}];

[RFSFaceSDK.service startLivenessFrom:viewController
                             animated:YES
                        configuration:configuration
                           onLiveness:^(RFSLivenessResponse * _Nonnull response) {

} completion:nil];

val configuration = LivenessConfiguration.Builder()
            .setSkipStep(LivenessSkipStep.SUCCESS_STEP)
            .build()
FaceSDK.Instance().startLiveness(
    context, configuration) { livenessResponse: LivenessResponse? -> }

LivenessConfiguration configuration = new LivenessConfiguration.Builder()
            .setSkipStep(LivenessSkipStep.SUCCESS_STEP)
            .build();
FaceSDK.Instance().startLiveness(context, configuration, livenessResponse -> {});

FaceSDK.startLiveness({
  skipStep: [Enum.LivenessSkipStep.SUCCESS_STEP]
}, response => { }, _ => { })

var livenessResponse = await FaceSDK.instance.startLiveness(
  config: LivenessConfig(
    skipStep: [LivenessSkipStep.SUCCESS_STEP],
  ),
);

FaceSDK.startLiveness({
  skipStep: [Enum.LivenessSkipStep.SUCCESS_STEP]
}, function (response) { }, function (e) { })

FaceSDK.startLiveness({
  skipStep: [Enum.LivenessSkipStep.SUCCESS_STEP]
})

// Android
LivenessConfiguration.Builder config = new();
config.SetSkipStep(LivenessSkipStep.SuccessStep);
FaceSDK.Instance().StartLiveness(Platform.AppContext, config.Build(), this);

// iOS
RFSFaceSDK.Service.StartLivenessFrom(CurrentPresenter, true, RFSLivenessConfiguration.ConfigurationWithBuilder((RFSLivenessConfigurationBuilder builder) =>
{
    builder.StepSkippingMask = RFSLivenessStepSkip.Success;
}), (RFSLivenessResponse response) =>
{
}, () => { });

Disable Both Start and Result Screens

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let configuration = LivenessConfiguration { 
    $0.stepSkippingMask = [.onboarding, .success]
}

FaceSDK.service.startLiveness(
    from: viewController,
    animated: true, 
    configuration: configuration,
    onLiveness: { response in

    },
    completion: nil
)

RFSLivenessConfiguration *configuration = [RFSLivenessConfiguration configurationWithBuilder:^(RFSLivenessConfigurationBuilder  * _Nonnull builder) {
    builder.stepSkippingMask = RFSLivenessStepSkipOnboarding | RFSLivenessStepSkipSuccess;
}];

[RFSFaceSDK.service startLivenessFrom:viewController
                             animated:YES
                        configuration:configuration
                           onLiveness:^(RFSLivenessResponse * _Nonnull response) {

} completion:nil];

val configuration = LivenessConfiguration.Builder()
            .setSkipStep(LivenessSkipStep.ONBOARDING_STEP, LivenessSkipStep.SUCCESS_STEP)
            .build()
FaceSDK.Instance().startLiveness(
    context, configuration) { livenessResponse: LivenessResponse? -> }

LivenessConfiguration configuration = new LivenessConfiguration.Builder()
            .setSkipStep(LivenessSkipStep.ONBOARDING_STEP, LivenessSkipStep.SUCCESS_STEP)
            .build();
FaceSDK.Instance().startLiveness(context, configuration, livenessResponse -> {});

FaceSDK.startLiveness({
  skipStep: [Enum.LivenessSkipStep.ONBOARDING_STEP, Enum.LivenessSkipStep.SUCCESS_STEP]
}, response => { }, _ => { })

var livenessResponse = await FaceSDK.instance.startLiveness(
  config: LivenessConfig(
    skipStep: [LivenessSkipStep.ONBOARDING_STEP, LivenessSkipStep.SUCCESS_STEP],
  ),
);

FaceSDK.startLiveness({
  skipStep: [Enum.LivenessSkipStep.ONBOARDING_STEP, Enum.LivenessSkipStep.SUCCESS_STEP]
}, function (response) { }, function (e) { })

FaceSDK.startLiveness({
  skipStep: [Enum.LivenessSkipStep.ONBOARDING_STEP, Enum.LivenessSkipStep.SUCCESS_STEP]
})

// Android
LivenessConfiguration.Builder config = new();
config.SetSkipStep(LivenessSkipStep.SuccessStep, LivenessSkipStep.SuccessStep);
FaceSDK.Instance().StartLiveness(Platform.AppContext, config.Build(), this);

// iOS
RFSFaceSDK.Service.StartLivenessFrom(CurrentPresenter, true, RFSLivenessConfiguration.ConfigurationWithBuilder((RFSLivenessConfigurationBuilder builder) =>
{
    builder.StepSkippingMask = RFSLivenessStepSkip.Success | RFSLivenessStepSkip.Success;
}), (RFSLivenessResponse response) =>
{
}, () => { });

Switch Camera Button: Face Detection

When using the Face Detection UI to capture an image, you can disable the Switch Camera button.

Note that this option is available only for the Face Detection UI. Due to security reasons, switching cameras in the Liveness Assessment module is not possible.

SwiftObjective-CKotlinJavaReact NativeFlutterCordovaIonic.NET MAUI

let configuration = FaceCaptureConfiguration {
    $0.isCameraSwitchButtonEnabled = true
}
FaceSDK.service.presentFaceCaptureViewController(from: self, animated: true, configuration: configuration1) { response in

}

RFSFaceCaptureConfiguration *configuration = [RFSFaceCaptureConfiguration configurationWithBuilder:^(RFSFaceCaptureConfigurationBuilder * _Nonnull builder) {
    builder.cameraSwitchButtonEnabled = YES;
}];
[RFSFaceSDK.service presentFaceCaptureViewControllerFrom:viewController
                                                animated:YES
                                          configuration:configuration
                                              onCapture:^(RFSFaceCaptureResponse * _Nonnull response) {

} completion:^{

}];

val configuration = FaceCaptureConfiguration.Builder().setCameraSwitchEnabled(false).build()
FaceSDK.Instance().presentFaceCaptureActivity(
    this@MainActivity, configuration
) { response: FaceCaptureResponse? -> }

FaceCaptureConfiguration configuration = new FaceCaptureConfiguration.Builder().setCameraSwitchEnabled(false).build();
FaceSDK.Instance().presentFaceCaptureActivity(MainActivity.this, configuration, (response) -> {
});

FaceSDK.startFaceCapture({
  cameraSwitchEnabled: true
}, response => { }, _ => { })

var faceCaptureResponse = await FaceSDK.instance.startFaceCapture(
  config: FaceCaptureConfig(
    cameraSwitchEnabled: true,
  ),
);

FaceSDK.startFaceCapture({
  cameraSwitchEnabled: true
}, function (response) { }, function (e) { })

FaceSDK.startFaceCapture({
  cameraSwitchEnabled: true
})

// Android
FaceCaptureConfiguration.Builder config = new();
config.SetCameraSwitchEnabled(true);
FaceSDK.Instance().PresentFaceCaptureActivity(Platform.AppContext, config.Build(), this);

// iOS
RFSFaceSDK.Service.PresentFaceCaptureViewControllerFrom(CurrentPresenter, true, RFSFaceCaptureConfiguration.ConfigurationWithBuilder((RFSFaceCaptureConfigurationBuilder builder) =>
{
    builder.CameraSwitchButtonEnabled = true
}), (RFSFaceCaptureResponse captureResponse) =>
{

}, null);