UX & Branding

All the properties that define the layout are located in the file uq-styles.plist and uq-styles-dark.plist. Below we describe all the elements of the layout that can be customized and related properties.

Element 1:

None

Element 2:

uq_layout_background_image: name of the image in your application’s asset. If defined, it takes precedence on the other properties
uq_layout_background_color: background colour

Element 3:

uq_navigation_back_arrow_image
uq_navigation_item_tint_color

Element 4:

uq_layout_logo_image
uq_logo_image_hidden: YES if you want to hide the logo

Instructions for Scanning

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

uq_animation_scan_id: for any ID
uq_animation_scan_passport: for passport

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

uq_title_font_name
uq_title_font_weight
uq_title_font_size
uq_title_color
uq_title_text_uppercase
uq_description_font_name
uq_description_font_weight
uq_description_font_size
uq_description_color
uq_text_view_position: set to top if you want to have the text above the animation
uq_text_view_padding
uq_text_view_padding_top

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

uq_button_title_font_name
uq_button_title_font_weight
uq_button_title_font_size
uq_button_title_color
uq_button_border_color
uq_button_background_color
uq_button_border_width
uq_button_corner_radius
uq_button_height
uq_button_width
uq_button_background_image
uq_button_indicator_image
uq_button_indicator_image_hidden
uq_button_padding

Instructions for Reading

Element 1:

uq_button_skip_font_size
uq_button_skip_color

Element 2: Animation in GIF format (static PNG and JPEG is supported as well):

uq_animation_read_passport_nfc: for passport
uq_animation_read_id_nfc: for any ID

Element 3:

uq_press_for_help_button_title_font_name
uq_press_for_help_button_title_font_weight
uq_press_for_help_button_title_font_size
uq_press_for_help_button_title_color
uq_press_for_help_button_border_color
uq_press_for_help_button_background_color
uq_press_for_help_button_border_width
uq_press_for_help_button_corner_radius
uq_press_for_help_button_width
uq_press_for_help_button_title_underline

Help for Reading of Passport

Element 1: animation in GIF format. There are three animations from page 2 to 4. First page has a fixed image (static PNG and JPEG is supported as well):

uq_animation_read_passport_nfc_help_1
uq_animation_read_passport_nfc_help_2
uq_animation_read_passport_nfc_help_3

Element 2:

uq_page_number_color

Element 3:

uq_page_indicator_unselected_color
uq_page_indicator_selected_color

Progress Screen

Element 1 and 2:

uq_progress_bar_type - circular (default) flat (standard progress bar)
uq_progress_bar_text_position - bottom (default) top [applies to circular and flat]
uq_progress_bar_text_padding - the space between the progress bar and the text [applies to circular and flat]
uq_progress_bar_text_color - [applies to circular and flat]
uq_progress_bar_color - [applies to flat only]
uq_progress_bar_height - [applies to flat only]
uq_progress_bar_corner_radius - [applies to flat only]
uq_progress_bar_animation_duration - controls the speed of the animation in seconds, the higher the number the slower is the speed [applies to circular and flat]
uq_progress_bar_stripes_color - [applies to flat only]
uq_progress_bar_stripes_opacity - [applies to flat only]
uq_progress_bar_stripes_orientation - left | right | vertical [applies to flat only]
uq_progress_bar_circular_radius - [applies to circular only]
uq_progress_bar_circular_width - [applies to circular only]
uq_progress_bar_circular_start_color_opacity - [applies to circular only]
uq_progress_bar_circular_start_color - [applies to circular only]
uq_progress_bar_circular_end_color - [applies to circular only]
uq_progress_bar_circular_start_angle - [applies to circular only]
uq_progress_bar_circular_end_angle - [applies to circular only]
uq_progress_bar_circular_corner_round - [applies to circular only]

Element 1:

uq_background_check_decline_button_title_font_name
uq_background_check_decline_button_title_font_weight
uq_background_check_decline_button_title_font_size
uq_background_check_decline_button_title_color
uq_background_check_decline_button_border_color
uq_background_check_decline_button_background_color
uq_background_check_decline_button_border_width
uq_background_check_decline_button_corner_radius
uq_background_check_decline_button_height
uq_background_check_decline_button_width
uq_background_check_decline_button_background_image
uq_background_check_decline_button_indicator_image
uq_background_check_decline_button_indicator_image_hidden

Element 2:

uq_background_check_confirm_button_title_font_name
uq_background_check_confirm_button_title_font_weight
uq_background_check_confirm_button_title_font_size
uq_background_check_confirm_button_title_color
uq_background_check_confirm_button_border_color
uq_background_check_confirm_button_background_color
uq_background_check_confirm_button_border_width
uq_background_check_confirm_button_corner_radius
uq_background_check_confirm_button_height
uq_background_check_confirm_button_width
uq_background_check_confirm_button_background_image
uq_background_check_confirm_button_indicator_image
uq_background_check_confirm_button_indicator_image_hidden

Face Match Error

Element 1, 2, 3, 4 and 5: Define your own image in your application asset catalog (requires @1x @2x @3x version). JPEG and PNG are supported but we recommend PNG