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:
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:
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
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:
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:
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
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:
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
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:
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
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
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
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.
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);