Home Customer Portal Book a Demo

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.

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

<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:

<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:

<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:

<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:

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

Instructions for Scanning

Element 5: Add the following item in your values/integers.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:

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

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

<style name="uq_help_text_title_style">
  Add your style here
</style>
<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:

  • 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:

<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:

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

Instructions for Reading

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

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

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

<item name="uq_animation_read_passport_nfc" type="raw">@raw/your_raw_gif</item>
<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):

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

Help for Reading of Passport

Element 1: Add the following item/s in your values/integers.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:

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

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

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

Progress Screen

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

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

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

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

Consent for Background Check

Element 1: Add the following style in your values/styles.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:

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

Face Match Error

Element 1, 2, 3, 4 and 5: Add the following item/s in your values/integers.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:

<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>
PreviousUI CustomisationNextDark / Night mode

Last updated