Amplify UI

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

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.

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.