Android UI Customisation (SDK v3.x)

Android UI Customisation (SDK v3.x)

There are a number of pieces of the UI that can be customised in the SDK.  This should be done in conjunction with CSS customisation and iOS customisation.  To give the best user experience, you should make your CSS and SDK customisations consistently.  

To customise the native Android user interface, simply override the resources provided by the greenidsdk_resources module, in your application's /res/ folder.  Your build system will determine which resources are used in your app - resources that get included later in the build process will override earlier values. 

We recommend that you make any changes in your own application's /res/ folder, rather than changing the greenidsdk_resources module directly.  This makes it easier for you to update to later versions of the Android SDK without losing your local customisations.  

Warning: Before you start customising

When you are customising the SDK UI, there is potential for mistakes to be made.  If you find that your app is inoperable, we may ask you to revert to the original SDK files as a first step in diagnosing any issues,  and to remove any customised UI settings.  

We will be able to provide advice on customising the UI in the SDK, but there are limitations to what you can change in the UI.  

Note that users may change the font size on their phone.  Where possible the workflow will increase or decrease font size as requested by the user.  If you customise any text strings, keep in mind that it may be displayed at a different size on some users' phones. 

Note that the variables on this page are only some of the more prominent ones available for customising.  Always check the contents of the XML files in the greenidsdk_resources module for a complete list of customisable variables for wording, colours, and more.


Loading screen - Fonts, colours and loading image

The UI of the loading screens can be changed by putting values into XML files, located in the 'res' folder of your app.  Make sure you are changing your own copy of these files.  Don't modify the SDK files directly, as that will make future upgrades harder for you.  

You can look inside the  greenidsdk_resources module to get examples for these files and values.  

Adding theses keys to the matching resource files will change the loading screen as follows:

Key

Used by

Resource file

Default value 

Notes

Key

Used by

Resource file

Default value 

Notes

gid_loadingBackgroundColor

The loading screen background colour

/res/values/colors.xml

#FFFFFF

Should be an html hex code

fullscreen_dialog_background

The SDK startup background colour

/res/values/colors.xml

#FFFFFF

Should be an html hex code

gid_loadingSecondaryFontColor

The loading screen secondary font colour

/res/values/colors.xml

#AAAAAA

Not used in Android SDK at present, for future compatibility with iOS SDK settings 

gid_loadingFontColor

The loading screen font colour

/res/values/colors.xml

#417505

Colour of the primary text on the loading screen.  This includes things such as "Loading" or "We're uploading your photos" on the loading screen

gid_loadingFontSize

The loading screen font size

/res/values/dimens.xml

24dp



gid_loadingFontFamily

The loading screen font family

/res/values/strings.xml

helvetica_thin.ttf

Copy the font file into an assets/fonts folder to include it in your app

spinner_grey.gif

The loading screen spinner graphic

/res/drawable/spinner_grey.gif



Use an animated gif

Loading screen - Text values

To change the text values on the loading screens, add values to a /res/values/strings.xml file in your app.  

Key

Used by

Resource file

Default value 

Notes

Key

Used by

Resource file

Default value 

Notes

gid_default_dialog_text_loading

Most loading screens

/res/values/strings.xml

Loading



gid_dialog_text_uploading_documents

After selfie capture

/res/values/strings.xml

We\'re uploading your photos. Please wait.



gid_dialog_text_uploading_document

After additional document capture

/res/values/strings.xml

We\'re uploading your photo. Please wait.

Only difference between these two is 'photos' is missing the 's'.






Key

Used by

Resource file

Key

Used by

Resource file

When skipping the camera is allowed: 

gid_camera_permission_dialog_skip_allowed_title

Title of the dialog box, if skipping the camera is allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_allowed_message

Message, if skipping the camera is allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_allowed_positive_button

Try again button text, if skipping the camera is allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_allowed_negative_button

Continue without the camera button text, if skipping the camera is allowed

/res/values/strings.xml

When the user has denied permission, and skipping the camera is allowed:

gid_camera_permission_dialog_skip_allowed_always_deny_title

Title of the dialog box, if user has denied permission always, and skipping the camera is allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_allowed_always_deny_message

Message, if user has denied permission always, and skipping the camera is allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_allowed_always_deny_button

Continue button text, if user has denied permission always, and skipping the camera is allowed

/res/values/strings.xml

When skipping the camera is not allowed:

gid_camera_permission_dialog_skip_not_allowed_title

Title of the dialog box, if skipping the camera is not allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_not_allowed_message

Message, if skipping the camera is not allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_not_allowed_positive_button

Try again button text, if skipping the camera is not allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_not_allowed_negative_button

Cancel button text, if skipping the camera is not allowed

/res/values/strings.xml

When the user has denied permission, and skipping the camera is not allowed:

gid_camera_permission_dialog_skip_not_allowed_always_deny_title

Title of the dialog box, if user has denied permission always, and skipping the camera is not allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_not_allowed_always_deny_message

Message, if user has denied permission always, and skipping the camera is not allowed

/res/values/strings.xml

gid_camera_permission_dialog_skip_not_allowed_always_deny_button

Cancel button text, if user has denied permission always, and skipping the camera is not allowed

/res/values/strings.xml




Document capture - Messages, labels, and other text

Text values in the document capture widget can be changed by editing values in the /res/values/strings.xml file in your app.   Suggested values are as follows:

Key

Default string

Used by

Key

Default string

Used by

MJCS_blur_detected

Blur detected

Overlay when blur detection has been triggered

MJCS_document_boundary_detected

Keep document within the frame

Overlay when no document border is detected

MJCS_extraction_confirm_cancel

Cancel

Button label to cancel the capture, if manual capture has been used

MJCS_extraction_confirm_finish

Finish

Button label to finish the capture, if manual capture has been used

MJCS_glare_detected

Glare detected

Overlay when glare detection has been triggered

MJCS_journey_action_front

Please capture your document

Wording at top of screen, when capturing front of a document

MJCS_journey_action_back

Please capture the back of your document

Wording at top of screen, when capturing back of a document

MJCS_journey_action_rescan

Please try again

Retry text, if capture did not work

MJCS_low_resolution_detected

Move your document closer

Overlay if the document is too small to capture

MJCS_no_rectangle

We were unable to detect your document in the image captured. Please try again.

Error message if the document detection did not find a document, and the user will have to try another capture

MJCS_progress_action_retry

Retry

Button label to retry capture

MJCS_progress_unreachable_title

There is a connection issue

Overlay if the server cannot be contacted

MJCS_progress_upload_message

Please wait a few seconds...

Overlay when uploading capture image to the server

MJCS_progress_upload_title

Uploading

Heading text when uploading capture image to the server

MJCS_action_processing

Processing…

Text while image is being processed

MJCS_journey_action_selfie

Please capture your selfie

Text shown to user at start of selfie capture

MJCS_scanning_message

Please fill the frame with ID document

Text displayed to guide user during document capture

You can copy values from the greenidsdk_resources module to get started.  

Document capture - GBG branding image

If you see any 'GBG' or 'IDScan' branding on the capture screens, you can remove this by adding a file called 'mjcsconfig.properties' in your app, with the following content: 

{
"mjcsApiLogoShow" : "false"
}

This will remove any branding on the document and selfie capture screens.  This should already be done in the greenidsdk_resources module, these instructions are only included for completeness. 




Selfie capture - Messages, labels, and other text

Text values in the document capture widget can be changed by editing values in a /res/values/strings.xml file in your app.    

Suggested values are as follows:

Key

Default string

Used by

Key

Default string

Used by

MJCS_action_liveness_calibrate_up

Move the device slightly up

Initial messaging when the user is about to do the Liveness step, if they have not got their phone upright.  See also 'down', 'left', 'right' for similar messages

MJCS_action_liveness_calibrate_down

Move the device slightly down

See above

MJCS_action_liveness_calibrate_left

Move the device slightly left

See above

MJCS_action_liveness_calibrate_right

Move the device slightly right

See above

MJCS_action_liveness_calibrate_proceed

Proceed

Shown during liveness step once user's device is in the right position/orientation.

MJCS_action_liveness_message

Please look straight at the camera and perform the actions presented to you

Initial messaging informing user how to perform Liveness step. 

MJCS_action_liveness_title

Liveness Detection



Heading text for Liveness step

MJCS_action_liveness_smile

Smile

Text for possible Liveness test

MJCS_action_liveness_frown

Frown

Text for possible Liveness test

MJCS_action_liveness_front

Look straight at the camera

Text for possible Liveness test

MJCS_action_liveness_down

Tilt your face slightly down

Text for possible Liveness test

MJCS_action_liveness_up

Tilt your face slightly up

Text for possible Liveness test

MJCS_action_liveness_left

Turn your face slightly left

Text for possible Liveness test

MJCS_action_liveness_right

Turn your face slightly right

Text for possible Liveness test

MJCS_action_liveness_none

No Action

Text for possible Liveness test (passive)







You can copy values from the greenidsdk_resources module to get started.  




5. More information on Android customisation

For more information on the 'res' directory, and resources in general, see: https://developer.android.com/guide/topics/resources/available-resources.html

(including i18n - see https://developer.android.com/guide/topics/resources/localization.html )

Refer to the Android developer guides for more information about editing strings, colours, drawables and other resources:

https://developer.android.com/guide/topics/resources/string-resource.html

https://developer.android.com/guide/topics/resources/color-list-resource.html

https://developer.android.com/guide/topics/resources/drawable-resource.html