Customization

Customize your FaceLivenessDetector

Start View

FaceLivenessDetector contains an initial (start) view with instructions and information about the Face Liveness check for the end user. By default, the start view is shown before the Face Liveness check. The start view can be disabled, allowing you to provide your own start view before FaceLivenessDetector is displayed in the app:

FaceLivenessDetector(
    sessionId = <session ID>,
    region = <region>,
    disableStartView = true,
    onComplete = {
        Log.i("MyApp", "Face Liveness flow is complete")
    },
    onError = { error ->
        Log.e("MyApp", "Error during Face Liveness flow", error)
    }
)

Challenge Options

Certain liveness challenges have client-side options that you can configure based on your business requirements. For example, you can configure the FaceMovement challenge to use either the device's front-facing camera or back-facing camera.

FaceLivenessDetector(
    sessionId = <session ID>,
    region = <region>,
    challengeOptions = ChallengeOptions(
        faceMovement = LivenessChallenge.FaceMovement(camera = Camera.Back)
    ),
    onComplete = {
        Log.i("MyApp", "Face Liveness flow is complete")
    },
    onError = { error ->
        Log.e("MyApp", "Error during Face Liveness flow", error)
    }
)

When the FaceLivenessDetector is rendered, Rekognition will mark the session ID as used and any future usages of the FaceLivenessDector will require a new session ID. So if you want to change which camera is used for the FaceMovement challenge at runtime, you will need to create a new liveness session and pass the new session ID into the FaceLivenessDetector with the new Camera option.

Internationalization (I18n)

The text in FaceLivenessDetector is defined as string resources in the component's strings.xml file. These values can be translated/overwritten by following the instructions here.

Theming

FaceLivenessDetector supports Material3 theming, allowing you to theme FaceLivenessDetector to match the look and feel of your app. To theme FaceLivenessDetector according to your app's theme, wrap FaceLivenessDetector in your app's theme:

@Composable
fun MyTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        // Override colorScheme with custom colors
        colorScheme = LivenessColorScheme.default(),
        // Override shapes with custom shapes
        shapes = MaterialTheme.shapes,
        // Override typography with custom typography
        typography = MaterialTheme.typography,
        content = content
    )
}

MyTheme {
   FaceLivenessDetector(...)
}

Amplify UI Face Liveness provides a Material3 color scheme for light mode and dark mode.

Light mode:

primary
Color(0xFF047D95)
onPrimary
Color.White
background
Color.White
onBackground
Color(0xFF0D1926)
surface
Color.White
onSurface
Color(0xFF0D1926)
error
Color(0xFF950404)
onError
Color.White
errorContainer
Color(0xFFF5D9BC)
onErrorContainer
Color(0xFF663300)

Dark mode:

primary
Color(0xFF7DD6E8)
onPrimary
Color(0xFF0D1926)
background
Color(0xFF0D1926)
onBackground
Color.White
surface
Color(0xFF0D1926)
onSurface
Color.White
error
Color(0xFFEF8F8F)
onError
Color(0xFF0D1926)
errorContainer
Color(0xFF663300)
onErrorContainer
Color(0xFFEFBF8F)

To theme FaceLivenessDetector using the Amplify UI Face Liveness color scheme, wrap FaceLivenessDetector in a MaterialTheme and pass LivenessColorScheme for the theme's color scheme:

MaterialTheme(
    colorScheme = LivenessColorScheme.default()
) {
    FaceLivenessDetector(...)
}

If no theme is provided, FaceLivenessDetector uses the default MaterialTheme values.

Best Practices

The get ready screen has been optimized for increasing the end user's success rate and we strongly discourage making any changes to that screen.
We do not recommend modifying the countdown time, face fit timeout, and oval size, as they affect the security and accuracy of the Face Liveness check.