Customization

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)
    }
)

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

1. 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.
2. 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.