> For the complete documentation index, see [llms.txt](https://docs.caf.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.caf.io/caf-sdk/android/standalone-modules/caffacelivenesslite/ui-customization.md).

# Ui Customization

Face Liveness Lite lets you adapt the liveness screen to your brand: colors, title, logo, close icon, font and the mask effect.

Pass a `UiCustomization` through `CafLivenessConfig.uiCustomization`. Every field is optional — anything you leave out keeps the default appearance, so you can customize only what you need.

### Basic usage

```kotlin
val uiCustomization = UiCustomization(
    font = LivenessFont.ResFont(R.font.your_font),
    appBar = AppBarCustomization(
        title = "Identity check",
        titleColor = ContextCompat.getColor(context, R.color.white),
        color = ContextCompat.getColor(context, R.color.brand_navy),
        logoIcon = R.drawable.your_logo,
        closeButton = R.drawable.your_close_icon,
    ),
    mask = MaskCustomization(
        isBlurEnabled = true,
        color = ContextCompat.getColor(context, R.color.brand_navy),
    ),
    prompt = PromptCustomization(
        textColor = ContextCompat.getColor(context, R.color.white),
        backgroundColor = ContextCompat.getColor(context, R.color.brand_green),
        isRounded = true,
    ),
)

val config = CafLivenessConfig(
    mobileToken = mobileToken,
    personId = personId,
    uiCustomization = uiCustomization,
)

CafFaceLivenessLite.instance.startLiveness(context, config) { event ->
    // handle events
}
```

### UiCustomization

The root object. Each group is optional and can be omitted.

<table><thead><tr><th width="108.94921875">Parameter</th><th>Type</th><th width="102.421875">Default</th><th>Description</th></tr></thead><tbody><tr><td><code>font</code></td><td><code>LivenessFont?</code></td><td><code>null</code></td><td>Custom font applied to the title and the prompt text.</td></tr><tr><td><code>mask</code></td><td><code>MaskCustomization?</code></td><td><code>null</code></td><td>Appearance of the area around the face oval.</td></tr><tr><td><code>appBar</code></td><td><code>AppBarCustomization?</code></td><td><code>null</code></td><td>Title, colors, logo and close icon of the top bar.</td></tr><tr><td><code>prompt</code></td><td><code>PromptCustomization?</code></td><td><code>null</code></td><td>Appearance of the instruction box shown to the user.</td></tr></tbody></table>

### AppBarCustomization

The bar at the top of the liveness screen.

| Parameter     | Type                | Default                              | Description                                         |
| ------------- | ------------------- | ------------------------------------ | --------------------------------------------------- |
| `title`       | `String?`           | Empty                                | Title shown during the liveness scan.               |
| `titleColor`  | `@ColorInt Int?`    | White                                | Color of the title text.                            |
| `color`       | `@ColorInt Int?`    | Transparent                          | Background color of the top bar.                    |
| `logoIcon`    | `@DrawableRes Int?` | No logo                              | Logo displayed in the top bar.                      |
| `closeButton` | `@DrawableRes Int?` | Provider default (back arrow, white) | Icon of the button that closes the liveness screen. |

### MaskCustomization

The area outside the oval where the user positions their face.

| Parameter       | Type             | Default                | Description                                                                                              |
| --------------- | ---------------- | ---------------------- | -------------------------------------------------------------------------------------------------------- |
| `isBlurEnabled` | `Boolean`        | `true`                 | Whether the blur and vignette effects are applied outside the oval. Set to `false` for a flat overlay.   |
| `color`         | `@ColorInt Int?` | Semi-transparent black | Color of the area outside the oval. Use a color with alpha to keep the camera preview partially visible. |

### PromptCustomization

The box that displays instructions to the user during the scan.

| Parameter         | Type             | Default                | Description                                      |
| ----------------- | ---------------- | ---------------------- | ------------------------------------------------ |
| `textColor`       | `@ColorInt Int?` | White                  | Color of the instruction text.                   |
| `backgroundColor` | `@ColorInt Int?` | Semi-transparent black | Background color of the instruction box.         |
| `isRounded`       | `Boolean`        | `true`                 | Whether the instruction box has rounded corners. |

### LivenessFont

Applied to the title and the prompt text.

| Option                  | Parameter           | Description                                                   |
| ----------------------- | ------------------- | ------------------------------------------------------------- |
| `LivenessFont.ResFont`  | `@FontRes res: Int` | Font from your app resources, for example `R.font.your_font`. |
| `LivenessFont.PathFont` | `path: String`      | Font loaded from a file path.                                 |

```kotlin
UiCustomization(font = LivenessFont.ResFont(R.font.your_font))
```

### Colors, icons and fonts

* **Colors are color values, not color resources.** The fields are annotated `@ColorInt`, so resolve resources first with `ContextCompat.getColor(context, R.color.your_color)`, or use a literal such as `Color.WHITE` / `0xFF1B1B3A.toInt()`. Passing `R.color.your_color` directly will produce the wrong color.
* **Icons and fonts are resource ids** (`@DrawableRes`, `@FontRes`).
* **Invalid resources are ignored.** If an icon or font resource cannot be loaded, the liveness session continues with the default appearance instead of failing.
* **Setting a value to `null` means "use the default"**, not "hide it". Passing `closeButton = null` keeps the provider's default close icon rather than removing the button.

### What cannot be customized

Some aspects of the liveness screen are fixed by the SDK to protect the integrity of the verification:

* Screen orientation (always portrait).
* Screenshots (always disabled).
* The camera preview filter, which is defined by your account configuration.
* The instruction texts. These can be localized in the standard Android way — see [String localization](https://github.com/iProov/android#string-localization--customization).

### Accessibility

The default colors and contrast ratios are verified against **WCAG 2.1 AA** guidelines. Customizing colors can invalidate that compliance, so check the contrast between text and background — particularly `prompt.textColor` against `prompt.backgroundColor`, and `appBar.titleColor` against `appBar.color`.

Links:

{% content-ref url="/pages/SWa4fYvXU4QHS0rTEBa7" %}
[Face Liveness Lite](/caf-sdk/android/standalone-modules/caffacelivenesslite.md)
{% endcontent-ref %}

{% content-ref url="/pages/kzUUoJkdkppda386DUZv" %}
[Handling Failures](/caf-sdk/android/getting-started-with-the-sdk/handling-failures.md)
{% endcontent-ref %}

{% content-ref url="/pages/CjjPANiCm0TOnbldUgeg" %}
[Ui Customization](/caf-sdk/android/standalone-modules/caffacelivenesslite/ui-customization.md)
{% endcontent-ref %}

{% content-ref url="/pages/vsdoZhkDbnAXRhPVlR18" %}
[Changelog](/caf-sdk/android/standalone-modules/caffacelivenesslite/changelog.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.caf.io/caf-sdk/android/standalone-modules/caffacelivenesslite/ui-customization.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.