> For the complete documentation index, see [llms.txt](https://docs.vida.id/identity-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vida.id/identity-stack/verify/liveness/integration/liveness-sdk/android-sdk/customization/customization-through-xml.md).

# Customization through XML

The VIDA SDK exposes a set of UI attribute keys through its `attr.xml` resource file. By redefining these keys in your application's theme, your values take effect at runtime across the SDK's screens - no code changes required.

You can customize:

* Primary and secondary call-to-action (CTA) colors
* [Tutorial screen](#tutorial-screen) - [colors](#colors) and [text](#text)
* [Permission screen](#camera-permission-screen) - [colors](#colors-1) and [text](#text-1)
* [Camera preview screen](#camera-preview-screen) - [colors](#colors-2) and [text](#instruction-text)
* [Review screen](#review-screen) - [colors](#colors-3) and [text](#text-2)

## How to apply customizations

1. Open your `styles.xml` or `themes.xml` file in your Android project. 
2. Inside your theme, redefine the keys you want to override with your own values.

#### Example - changing the primary CTA background color:

```xml
<resources xmlns: tools="http://schemas.android.com/tools">
   <style name="VIDALivenessTheme" parent="VIDA.Liveness.Theme.Default">
           <item name="vida_primary_cta_background_color">@color/red_pilati_ff3232</item>
   </style>
</resources>
```

{% hint style="info" %}
Your theme must extend `VIDA.Liveness.Theme.Default`. Only the keys you redefine change; everything else falls back to the SDK defaults.
{% endhint %}

## Font customization (applies to every screen)

Every text element on every screen supports a matching font family and font size key. You don't need to look these up one by one — derive them from the text key:

<table><thead><tr><th width="175.4296875">To customize</th><th>Append to the text key</th><th>Format</th></tr></thead><tbody><tr><td>Font family</td><td><code>_font_family</code></td><td>string</td></tr><tr><td>Font size</td><td><code>_font_size</code></td><td>dimension</td></tr></tbody></table>

For example, the tutorial title (`vida_tutorial_screen_title_text`) becomes:

{% code expandable="true" %}

```xml
<attr name="vida_tutorial_screen_title_text_font_family" format="string"/>
<attr name="vida_tutorial_screen_title_text_font_size" format="dimension"/>
```

{% endcode %}

The tables below therefore list colors and text only - the font keys follow this pattern.

## **Tutorial Screen**

Adjust the look and feel of the initial tutorial screen - background, text, transaction ID display, and the "remove wearables" guidance.

<figure><img src="/files/DV83ip0P8NnSxs9Xv7Fv" alt="" width="563"><figcaption></figcaption></figure>

### Colors

<table><thead><tr><th width="273.140625">Element</th><th>Attribute key</th></tr></thead><tbody><tr><td>Background</td><td><code>vida_tutorial_screen_background_color</code></td></tr><tr><td>Title text</td><td><code>vida_tutorial_screen_title_text_color</code></td></tr><tr><td>Transaction ID background</td><td><code>vida_tutorial_screen_transaction_ID_background_color</code></td></tr><tr><td>Transaction ID text</td><td><code>vida_tutorial_screen_transaction_ID_text_color</code></td></tr><tr><td>Instruction text</td><td><code>vida_tutorial_screen_instruction_text_color</code></td></tr><tr><td>Warning text</td><td><code>vida_tutorial_screen_warning_text_color</code></td></tr><tr><td>Wearable text</td><td><code>vida_tutorial_screen_wearable_text_color</code></td></tr></tbody></table>

{% hint style="info" %}
All keys use `format="color"` .
{% endhint %}

### Text

<table><thead><tr><th width="273.140625">Element</th><th>Attribute key</th></tr></thead><tbody><tr><td>Title</td><td><code>vida_tutorial_screen_title_text</code></td></tr><tr><td>Transaction ID</td><td><code>vida_tutorial_screen_transaction_id_text</code></td></tr><tr><td>Instruction</td><td><code>vida_tutorial_screen_instruction_text</code></td></tr><tr><td>Warning</td><td><code>vida_tutorial_screen_warning_text</code></td></tr><tr><td>Wearing glasses message</td><td><code>vida_tutorial_screen_wearing_glass_text</code></td></tr><tr><td>Wearing hat message</td><td><code>vida_tutorial_screen_wearing_hat_text</code></td></tr><tr><td>Wearing scarf message</td><td><code>vida_tutorial_screen_wearing_scarf_text</code></td></tr><tr><td>Wearing mask message</td><td><code>vida_tutorial_screen_wearing_mask_text</code></td></tr><tr><td>Primary CTA</td><td><code>vida_tutorial_screen_primary_cta_text</code></td></tr></tbody></table>

{% hint style="info" %}
All keys use `format="string"` . Add `_font_family` / `_font_size` for font control.
{% endhint %}

## **Camera Permission Screen**

Customize the screen that requests camera access.

{% hint style="info" %}
By default the camera permission screen appears on top of the tutorial screen. Its background color can still be customized even when the tutorial screen is disabled via `setShowTutorialScreen(false)` .
{% endhint %}

<figure><img src="/files/FdnU0xBs1OR4A2OLkzN0" alt="" width="563"><figcaption></figcaption></figure>

By default the camera permission screen will be shown on top of the tutorial screen.

<figure><img src="/files/F8FTTXxRQwCoN47Vm7ZA" alt="" width="563"><figcaption></figcaption></figure>

### Colors

<table><thead><tr><th width="253.4453125">Element</th><th>Attribute key</th></tr></thead><tbody><tr><td>Background</td><td><code>vida_permission_screen_background_color</code></td></tr><tr><td>Title text</td><td><code>vida_permission_screen_title_text_color</code></td></tr><tr><td>Description text</td><td><code>vida_permission_screen_description_text_color</code></td></tr></tbody></table>

{% hint style="info" %}
All keys use `format="color"`.
{% endhint %}

### Text

<table><thead><tr><th width="253.4453125">Element</th><th>Attribute key</th></tr></thead><tbody><tr><td>Title</td><td><code>vida_permission_screen_title_text</code></td></tr><tr><td>Description </td><td><code>vida_permission_screen_description_text</code></td></tr><tr><td>Primary CTA</td><td><code>vida_permission_screen_primary_cta_text</code></td></tr><tr><td>Secondary CTA</td><td><code>vida_permission_screen_secondary_cta_text</code></td></tr></tbody></table>

{% hint style="info" %}
All keys use `format="string"` . Add `_font_family` / `_font_size` for font control.
{% endhint %}

## Camera Preview Screen&#x20;

Customize the camera capture screen - background, overlay, and the instruction messages shown while the user positions their face.

<figure><img src="/files/Wy6jTElSa1wVmC1Ai0fD" alt="" width="563"><figcaption></figcaption></figure>

### Colors

<table><thead><tr><th width="253.4453125">Element</th><th>Attribute key</th></tr></thead><tbody><tr><td>Background</td><td><code>vida_camera_screen_background_color</code></td></tr><tr><td>Instruction text </td><td><code>vida_camera_screen_instruction_text_color</code></td></tr><tr><td>Overlay background</td><td><code>vida_camera_screen_overlay_background_color</code></td></tr><tr><td>Stroke</td><td><code>vida_camera_screen_stroke_color</code></td></tr><tr><td>Animation stroke</td><td><code>vida_camera_screen_animation_stroke_color</code></td></tr></tbody></table>

{% hint style="info" %}
All keys use `format="color"` .
{% endhint %}

### **Instruction Text**

| Attribute Key                                                     | Bahasa String                      | English String                     |
| ----------------------------------------------------------------- | ---------------------------------- | ---------------------------------- |
| `vida_camera_screen_instructions_text_no_face`                    | Tempatkan wajah Anda dalam bingkai | Put your face in the frame         |
| `vida_camera_screen_instructions_text_frame_your_face_out_of_box` | Tempatkan wajah Anda dalam bingkai | Tempatkan wajah Anda dalam bingkai |
| `vida_camera_screen_instructions_text_face_detected`              | -                                  | -                                  |
| `vida_camera_screen_instructions_text_face_too_far`               | Mendekat                           | Move closer                        |
| `vida_camera_screen_instructions_text_face_too_close`             | Mundur                             | Move Back                          |
| `vida_camera_screen_instructions_text_face_not_straight`          | Hadapkan wajah ke layar            | Face the screen directly           |
| `vida_camera_screen_instructions_text__multiple_face_detected`    | Pastikan hanya satu wajah di layar | Keep one face in the frame         |
| `vida_camera_screen_instructions_text_eye_closed`                 | Buka mata Anda                     | Open your eyes                     |
| `vida_camera_screen_instructions_text_left_eye_closed`            | Buka mata Anda                     | Open your eyes                     |
| `vida_camera_screen_instructions_text_right_eye_closed`           | Buka mata Anda                     | Open your eyes                     |
| `vida_camera_screen_instructions_text_image_too_dark`             | Pindah ke tempat cerah             | Move to well-lit area              |
| `vida_camera_screen_instructions_text_eye_occlude`                | Lepaskan kacamata                  | Remove your glasses                |

{% hint style="info" %}
These messages guide the user during capture. All keys use `format="string"`.&#x20;

**Note**: Instruction font sizing has two levels: a per-state key (e.g. `vida_camera_screen_instructions_text_no_face_font_size`) and a general key `vida_camera_screen_instructions_text_font_size` that applies to all instruction states.
{% endhint %}

## **Review Screen**

Customize the screen where the user reviews the captured image - including the processing spinner, error text, and guidelines.

<figure><img src="/files/vQe4luUO5hRLpj9GrjV5" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/gsBFk6CLI3Ga9THYQVXb" alt="" width="563"><figcaption></figcaption></figure>

### Colors

<table><thead><tr><th width="240.71484375">Element</th><th>Attribute Key</th></tr></thead><tbody><tr><td>Background</td><td><code>vida_review_screen_background_color</code></td></tr><tr><td>Title text</td><td><code>vida_review_screen_title_text_color</code></td></tr><tr><td>Instruction text</td><td><code>vida_review_screen_instruction_text_color</code></td></tr><tr><td>Spinner - start</td><td><code>vida_review_screen_spinner_start_color</code></td></tr><tr><td>Spinner - center</td><td><code>vida_review_screen_spinner_center_color</code></td></tr><tr><td>Spinner - end</td><td><code>vida_review_screen_spinner_end_color</code></td></tr><tr><td>Error text</td><td><code>vida_review_screen_error_text_color</code></td></tr><tr><td>Guideline text</td><td><code>vida_review_screen_guideline_text_color</code></td></tr><tr><td>Guideline link</td><td><code>vida_review_screen_guideline_link_color</code></td></tr></tbody></table>

{% hint style="info" %}
All keys use `format="color"`.
{% endhint %}

#### Text

<table><thead><tr><th width="275.87890625">Element</th><th>Attribute Key</th></tr></thead><tbody><tr><td>Title</td><td><code>vida_review_screen_title_text</code></td></tr><tr><td>Instruction</td><td><code>vida_review_screen_instruction_text</code></td></tr><tr><td>CTA - Submit</td><td><code>vida_review_screen_cta_text_submit</code></td></tr><tr><td>CTA - Retake</td><td><code>vida_review_screen_cta_text_retake</code></td></tr><tr><td>CTA - Try again</td><td><code>vida_review_screen_cta_text_try_again</code></td></tr><tr><td>CTA - Try later</td><td><code>vida_review_screen_cta_text_try_later</code></td></tr><tr><td>Guideline text</td><td><code>vida_review_screen_guideline_text</code></td></tr><tr><td>Guideline message link</td><td><code>vida_review_screen_guideline_message_link</code></td></tr></tbody></table>

{% hint style="info" %}
All keys use `format="string"`. Add `_font_family` / `_font_size` for font control.
{% endhint %}

#### Error message text

<figure><img src="/files/wA2zQBUDRGh7P1TJUoOQ" alt="" width="563"><figcaption></figcaption></figure>

You can override the message shown for specific backend error codes. All keys use `format="string"`.

<table><thead><tr><th width="206.8359375">Error Code</th><th>Attribute Key</th></tr></thead><tbody><tr><td>1051</td><td><code>vida_review_screen_backend_error_message_1051</code></td></tr><tr><td>1052</td><td><code>vida_review_screen_backend_error_message_1052</code></td></tr></tbody></table>

{% hint style="info" %}
**Note**: The codes above are examples. Any backend or SDK error code marked `YES` in the Error Codes reference is customizable using the same `vida_review_screen_backend_error_message_<code>` pattern.
{% endhint %}

## Global Customization (All Screens)&#x20;

These keys apply consistently across every screen. All use `format="color"`.

<table><thead><tr><th width="296.74609375">Element</th><th>Attribute Key</th></tr></thead><tbody><tr><td>Primary CTA background</td><td><code>vida_primary_cta_background_color</code></td></tr><tr><td>Primary CTA text</td><td><code>vida_primary_cta_text_color</code></td></tr><tr><td>Secondary CTA background</td><td><code>vida_secondary_cta_background_color</code></td></tr><tr><td>Secondary CTA text</td><td><code>vida_secondary_cta_text_color</code></td></tr><tr><td>Back arrow</td><td><code>vida_back_cta_arrow_color</code></td></tr><tr><td>Spinner - start</td><td><code>vida_spinner_start_color</code></td></tr><tr><td>Spinner - center</td><td><code>vida_spinner_center_color</code></td></tr><tr><td>Spinner - end</td><td><code>vida_spinner_end_color</code></td></tr></tbody></table>