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

  • uq_face_perfect

  • uq_face_far_away

  • uq_face_too_close

  • uq_face_too_light

  • uq_face_too_dark

Last updated