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.

1. Changing the loading screen

The 'Loading' screen will appear throughout the greenID workflow, usually as a cover screen while new parts of the process start or finish. The text may say "Loading" by default, or sometimes "We're uploading your images".

Most of the loading screens are part of the native SDK, and can be modified as below.

Note that some of the loading screens are part of the web view, and as such can be modified using CSS changes. You should make sure your CSS and native changes are consistent.

Example loading screen

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
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
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'.

2. Changing the camera permission messages

When a user first starts the greenID process, their phone will prompt them for permission to use the camera. If they deny permission, they will see a dialog explaining why the camera permission is needed.

The wording on this dialog can be altered by adding values into a /res/values/strings.xml file in your app.

There are several different wordings that can be changed, depending on whether the user has denied permission once, or always, and depending on whether the process can continue with or without the camera.

You can look inside the greenidsdk_resources module to see the default values in strings.xml.

Camera permissions messages

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`

3. Changing the document capture UI

The colours and fonts of the document capture cannot be changed.

The text of the document capture process can be changed by editing a strings.xml resource file in your app.

The 'GBG | IDScan' branding should be removed by default on Android.

Document capture UI

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

4. Changing the selfie capture UI

The colours and fonts of the selfie capture cannot be changed.

The text of the selfie capture process can be changed by editing a strings.xml resource file in your app.

You can look inside the greenidsdk_resources module to get examples of the strings.xml values.

Selfie capture UI

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