# UX & Branding

All the properties that define the layout are based on native Android xml files. Below we describe all the elements of the layout that can be customized and related configurations.

![](/files/kwSFtitq8fYGBI5NLLfi)

**Element 1**: Add the following item in your values/integers.xml. It applies to all the pages:

```xml
<item name="uq_status_bar_color" type="color">define_your_new_color</item>
```

**Element 2**: Add the following item in your values/integers.xml. It applies to all the pages:

```xml
<item name="uq_background_drawable" type="drawable">
        @drawable/your_vector_or_drawable_background
</item>
```

**Element 3**: Add the following item in your values/integers.xml. It applies to all the pages:

```xml
<item name="uq_back_arrow_style_image" type="drawable">
	@drawable/your_new_drawables_here
</item>
```

**Element 4**: Add the following item in your values/integers.xml. It applies to all the pages:

```xml
<item name="uq_logo_icon" type="drawable">@drawable/your_drawable</item>
```

If you want to hide the logs add the following style in your values/styles.xml:

```xml
<style name="uq_logo_style">
	<item name="android:visibility">gone</item>
</style>
```

## Instructions for Scanning

![](/files/PtXcF4MaQEuAXFbyGD7G)

**Element 5**: Add the following item in your values/integers.xml:

```xml
<item name="uq_animation_scan_id" type="raw">@raw/your_raw_gif</item>
<item name="uq_animation_scan_passport" type="raw">@raw/your_raw_gif</item>
```

**Note**: PNG and JPEG are supported as well

If you want to add additional styles you can add the following style in your values/styles.xml:

```xml
<style name="uq_help_scan_animation_style">
  Add your style here
</style>
```

**Element 6**: Add the following style in your values/styles.xml:

```xml
<style name="uq_help_text_title_style">
  Add your style here
</style>
```

```xml
<style name="uq_help_text_description_style">
  Add your style here
</style>
```

If you want to move the title and description above the animation, follow the steps below:&#x20;

* From our default style **uq\_help\_text\_title\_style** (you need to override the style as described above) remove @id/image
* To our default style **uq\_help\_scan\_animation\_style** (you need to override the style as described above) add @id/description

**Element 7**: Add the following style in your values/styles.xml:

```xml
<style name="uq_button_style">
  Add your style here
</style>
```

In order to change or hide the button arrow add the following item in your values/items.xml:

```xml
<item name="uq_button_arrow_image" type="drawable">
  Add your style here or "@null" to hide
</item>
```

## Instructions for Reading

![](/files/aqZxAJh3mYNXzdPumljO)

**Element 1**: Add the following style in your values/styles.xml:

```xml
<style name="uq_button_skip_style">
    Add your style here
</style>
```

**Element 2**: Add the following item in your values/integers.xml:

```xml
<item name="uq_animation_read_passport_nfc" type="raw">@raw/your_raw_gif</item>
```

```xml
<item name="uq_animation_read_id_nfc" type="raw">@raw/your_raw_gif</item>
```

**Element 3**: Add the following style in your values/styles.xml (Only available for passport):

```xml
<style name="uq_press_for_help_button_style">
    Add your style here
</style>
```

## Help for Reading of Passport

![](/files/ltosEuLCqSPUVZ31vmFp)

**Element 1**: Add the following item/s in your values/integers.xml:

```xml
<item name="uq_animation_read_passport_nfc_help_1" type="raw">@raw/your_raw_gif</item>
<item name="uq_animation_read_passport_nfc_help_2" type="raw">@raw/your_raw_gif</item>
<item name="uq_animation_read_passport_nfc_help_3" type="raw">@raw/your_raw_gif</item>
```

**Element 2**: Add the following style in your values/styles.xml:

```xml
<style name="uq_help_page_number">
	your style definition
</style>
```

**Element 3**: Add the following colors in your values/colors.xml:

```xml
<color name="uq_page_indicator_unselected_color">your colour</color>
<color name="uq_page_indicator_selected_color">your colour</color>
```

## Progress Screen

![](/files/qNnDiG9hqRLIGxdMI3Ut)

**Element 1**: Add the following style in your values/styles.xml:

```xml
<style name="uq_core_progress_bar_style">
	your style definition
</style>
```

**Element 2**: Add the following style in your values/styles.xml:

```xml
<style name="uq_core_progress_bar_text_style">
	your style definition
</style>
```

## **Consent for Background Check**

![](/files/pqWKf2nndje781rlk8Ia)

**Element 1**: Add the following style in your values/styles.xml:

```xml
<style name="uq_background_check_decline_button_style">
  Add your style here
</style>
```

**Element 2**: Add the following style in your values/styles.xml:

```xml
<style name="uq_background_check_confirm_button_style">
  Add your style here
</style>
```

## Face Match Error

![](/files/Px98uqWwaNBxgkPEw1wG)

**Element 1, 2, 3, 4 and 5:** Add the following item/s in your values/integers.xml:

```xml
<item name="uq_face_perfect" type="drawable">@drawable/your_drawable</item>
<item name="uq_face_far_away" type="drawable">@drawable/your_drawable</item>
<item name="uq_face_too_close" type="drawable">@drawable/your_drawable</item>
<item name="uq_face_too_light" type="drawable">@drawable/your_drawable</item>
<item name="uq_face_too_dark" type="drawable">@drawable/your_drawable</item>
```

## Fonts

In order to override the default font family used in the SDK create the following files in your font/ directory and define your own font (see <https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml>):

* bold.xml
* medium.xml
* regular.xml
* semi\_bold.xml

## Default Style Definitions

Below you can find the default style definitions for the style names mentioned above:

```xml
<style name="uq_logo_style">
	<item name="android:visibility">visible</item>
</style>

<style name="uq_button_style">
	<item name="android:layout_width">wrap_content</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:padding">10dp</item>
	<item name="android:gravity">center</item>
	<item name="android:layout_gravity">center</item>
	<item name="android:foregroundGravity">center</item>
	<item name="android:layout_centerHorizontal">true</item>
	<item name="android:background">@drawable/uq_rounded_ripple</item>
	<item name="android:clickable">true</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="android:fontFamily">@font/uq_font_semi_bold</item>
	<item name="android:textSize">@dimen/uq_font_size_xxxlarge</item>
	<item name="android:includeFontPadding">false</item>
	<item name="android:drawableEnd">@drawable/uq_button_arrow_image</item>
	<item name="android:drawablePadding">@dimen/uq_spacing_medium</item>
</style>

<style name="uq_background_check_confirm_button_style">
	<item name="android:layout_height">wrap_content</item>
	<item name="android:layout_width">wrap_content</item>
	<item name="android:padding">10dp</item>
	<item name="android:gravity">center</item>
	<item name="android:foregroundGravity">center</item>
	<item name="android:clickable">true</item>
	<item name="android:background">@drawable/uq_rounded_ripple</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="android:fontFamily">@font/uq_font_semi_bold</item>
	<item name="android:drawableEnd">@drawable/uq_button_arrow_image</item>
	<item name="android:drawablePadding">15dp</item>
	<item name="android:textSize">@dimen/uq_font_size_xxxlarge</item>
	<item name="android:includeFontPadding">false</item>
	<item name="android:textAllCaps">false</item>
</style>

<style name="uq_background_check_decline_button_style">
	<item name="android:layout_width">wrap_content</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:padding">10dp</item>
	<item name="android:foregroundGravity">center</item>
	<item name="android:gravity">center</item>
	<item name="android:background">@drawable/uq_rounded_ripple</item>
	<item name="android:textColor">#9B9B9B</item>
	<item name="android:fontFamily">@font/uq_font_semi_bold</item>
	<item name="android:textSize">@dimen/uq_font_size_xxxlarge</item>
	<item name="android:includeFontPadding">false</item>
	<item name="android:textAllCaps">false</item>
</style>

<style name="uq_help_scan_animation_style">
	<item name="android:layout_height">0dp</item>
	<item name="layout_constraintHeight_percent">0.52</item>
	<item name="android:layout_width">0dp</item>
	<item name="layout_constraintWidth_percent">0.9</item>
	<item name="android:layout_marginTop">@dimen/_20sdp</item>
	<item name="android:paddingStart">@dimen/uq_spacing_huge</item>
	<item name="android:paddingEnd">@dimen/uq_spacing_huge</item>
</style>

<style name="uq_help_text_title_style">
	<item name="layout_constraintTop_toBottomOf">@+id/image</item>
	<item name="android:layout_width">match_parent</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:gravity">center</item>
	<item name="android:layout_marginStart">@dimen/uq_spacing_small</item>
	<item name="android:layout_marginEnd">@dimen/uq_spacing_small</item>
	<item name="android:layout_centerHorizontal">true</item>
	<item name="android:fontFamily">@font/uq_font_semi_bold</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="android:textSize">@dimen/uq_font_size_xxxxlarge</item>
</style>

<style name="uq_help_text_description_style">
	<item name="layout_constraintTop_toBottomOf">@+id/title</item>
	<item name="android:layout_width">match_parent</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:gravity">center</item>
	<item name="android:fontFamily">@font/uq_font_medium</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="android:textSize">@dimen/uq_font_size_medium</item>
	<item name="android:layout_marginTop">@dimen/uq_spacing_small</item>
	<item name="android:layout_marginStart">@dimen/uq_spacing_small</item>
	<item name="android:layout_marginEnd">@dimen/uq_spacing_small</item>
</style>

<style name="uq_help_page_number">
	<item name="android:layout_width">match_parent</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:fontFamily">@font/uq_font_regular</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="android:gravity">center_horizontal</item>
	<item name="android:textSize">@dimen/uq_font_size_small</item>
</style>

<style name="uq_button_skip_style">
	<item name="android:fontFamily">@font/uq_font_semi_bold</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="android:textSize">@dimen/uq_font_size_small</item>
</style>

<style name="uq_core_progress_bar_style">
	<item name="android:indeterminateDrawable">
    	@drawable/uq_core_progress_bar_circular
	</item>
	<item name="android:indeterminate">true</item>
	<item name="android:layout_width">wrap_content</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:mirrorForRtl">true</item>
</style>

<style name="uq_core_progress_bar_text_style">
	<item name="android:layout_marginTop">110dp</item>
	<item name="android:fontFamily">@font/uq_font_medium</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="android:textSize">@dimen/uq_font_size_xlarge</item>
</style>

<style name="uq_scan_upload_select_file">
	<item name="android:background">@drawable/uq_scan_upload_select_file_rounded_corner</item>
	<item name="android:foreground">?attr/selectableItemBackground</item>
	<item name="android:layout_width">match_parent</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="fontFamily">@font/uq_font_medium</item>
	<item name="android:textSize">@dimen/uq_font_size_medium</item>
</style>

<style name="uq_scan_upload_tip">
	<item name="android:background">@drawable/uq_scan_upload_tip_rounded_corner</item>
	<item name="android:foreground">?attr/selectableItemBackground</item>
	<item name="android:layout_width">match_parent</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:textColor">#37465B</item>
	<item name="fontFamily">@font/uq_font_medium</item>
	<item name="android:textSize">@dimen/uq_font_size_medium</item>
</style>

<style name="uq_scan_upload_select_file_selected">
	<item name="android:background">
    	@drawable/uq_scan_upload_select_file_selected_rounded_corner
	</item>
	<item name="android:foreground">?attr/selectableItemBackground</item>
	<item name="android:layout_width">match_parent</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="fontFamily">@font/uq_font_semi_bold</item>
	<item name="android:textSize">@dimen/uq_font_size_small</item>
</style>

<style name="uq_press_for_help_button_style">
	<item name="android:layout_width">wrap_content</item>
	<item name="android:layout_height">wrap_content</item>
	<item name="android:layout_centerHorizontal">true</item>
	<item name="android:background">@drawable/uq_rounded_ripple</item>
	<item name="android:fontFamily">@font/uq_font_semi_bold</item>
	<item name="android:textColor">@color/uq_text_color_theme</item>
	<item name="android:textSize">@dimen/uq_font_size_medium</item>
	<item name="android:paddingStart">@dimen/uq_spacing_small</item>
	<item name="android:paddingTop">3dp</item>
	<item name="android:paddingEnd">@dimen/uq_spacing_small</item>
	<item name="android:paddingBottom">3dp</item>
	<item name="layout_constraintBottom_toBottomOf">parent</item>
	<item name="layout_constraintEnd_toEndOf">parent</item>
	<item name="layout_constraintStart_toStartOf">parent</item>
	<item name="layout_constraintTop_toBottomOf">@+id/description</item>
</style>

<style name="uq_lookup_text_field_style" parent="Widget.AppCompat.EditText">
    <item name="android:padding">15dp</item>
    <item name="android:textSize">@dimen/uq_lookup_text_field_font_size</item>
    <item name="android:labelTextSize">@dimen/uq_lookup_text_field_placeholder_font_size</item>
    <item name="android:background">@drawable/custom_outline_background</item>
    <item name="android:singleLine">true</item>
    <item name="android:maxLines">1</item>
    <item name="android:imeOptions">actionDone</item>
</style>

<style name="uq_lookup_date_picker_style" parent="ThemeOverlay.MaterialComponents.Dialog">
    <item name="colorAccent">#3377FF</item>
</style>

<style name="uq_lookup_pin_view_style" parent="@style/PinWidget.PinView">
    <item name="piv_radius">@dimen/pv_pin_view_item_radius</item>
    <item name="android:textColor">@color/uq_lookup_text_field_text_color</item>
    <item name="android:textColorHint">@color/uq_lookup_text_field_placeholder_color</item>
    <item name="android:inputType">number</item>
    <item name="cursorWidth">@dimen/pv_pin_view_cursor_width</item>
    <item name="itemCount">6</item>
    <item name="itemHeight">48dp</item>
    <item name="itemRadius">@dimen/pv_pin_view_item_radius</item>
    <item name="itemSpacing">10dp</item>
    <item name="itemWidth">48dp</item>
    <item name="lineWidth">1dp</item>
    <item name="lineColor">@color/uq_lookup_text_field_border_color</item>
    <item name="viewType">rectangle</item>
</style>
```


---

# Agent Instructions: 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:

```
GET https://docs.uqudo.com/docs/kyc/uqudo-sdk/integration/android/ui-customisation/ux-and-branding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.