To customise the native iOS user interface, you will need to change various files inside the GIDresources.bundle, inside the IDMetrics frameworks, and sometimes in your app.  

Where possible, we recommend that you make any changes in your own app, rather than changing the GIDresources.bundle directly.  This makes it easier for you to update to later versions of the iOS SDK without losing your local customisations.  

Warning: Before you start customising

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.  

Loading screen - Fonts and colours

From version 1.13.8, the GIDResources bundle includes a settings file called GIDsettings.plist.  This file can be used to configure the colours and font used on the 'Loading' and 'Uploading' progress screens.

From version 1.21.0, you can include a customised copy of the GIDsettings.plist file in your own app.  Rather than editing the file inside the GIDResouces.bundle, you can put a copy in your own app, and the SDK will use values in that file instead of the defaults.  Copy the default file from the bundle, and place your copy in your own project.  Make sure that the new file is included in your build target, so that it gets included in your app build.  

Edit the plist file to change the following: 

gid_loadingFontFamily

Loading screen - Loading image

The loading screen image is an animated gif file.  The default image is provided in the GIDResources.bundle.  To change this images in your app, replace it with an image of the same name, and rebuild your project.  

Loading screen - Fonts and colours

From version 1.13.8, the GIDResources bundle includes a settings file called GIDsettings.plist.  This file can be used to configure the colours and font used on the 'Loading' and 'Uploading' progress screens.

From version 1.21.0, you can include a customised copy of the GIDsettings.plist file in your own app.  Rather than editing the file inside the GIDResouces.bundle, you can put a copy in your own app, and the SDK will use values in that file instead of the defaults.  Copy the default file from the bundle, and place your copy in your own project.  Make sure that the new file is included in your build target, so that it gets included in your app build.  

Document capture - colours, fonts, buttons

The colours and fonts of the document capture tool can be modified in a file called Document.json.   This file is located inside the IDMetricsDocumentCapture.framework.   

This file will allow you to change the fonts and colours.  To change the corresponding text, see the section below.

 Note that the colours are in R-G-B-Alpha format. 

The following customisation options are available in the file.  Some options are not used in a normal greenID mobile workflow and will not be seen in your UI, so they have not been mentioned in this table.  

Document capture - Messages, labels, and other text

Text values in the document capture widget can be changed by including values in a Localizable.strings file in your app.  Adding the following key/values will change the following messages.  

An example localizable.strings file that contains some of these keys is available on the greenID Mobile release website. 

first_overlay_licence_flash_front_text_line1

Align the\nDOCUMENT FRONT\ninside the brackets.

first_overlay_licence_flash_front_text_line3

HOLD STEADY FOR 2 PHOTOS

first_overlay_licence_flash_back_text_line1

Align the\nDOCUMENT BACK\ninside the brackets.

first_overlay_licence_flash_back_text_line3

HOLD STEADY FOR 2 PHOTOS

second_overlay_licence_text_line1

second_overlay_licence_text_line2

HOLD STEADY

second_overlay_licence_text_line3

Taking 2 photos

first_overlay_passport_landscape_flash_text_line1

Align the\nPASSPORT PHOTO PAGE\ninside the brackets

first_overlay_passport_landscape_flash_text_line3

HOLD STEADY FOR 2 PHOTOS

second_overlay_passport_landscape_text_line1

second_overlay_passport_landscape_text_line2

HOLD STEADY

second_overlay_passport_landscape_text_line2

Taking 2 photos

first_overlay_greenId_flash_text_line1

Align the\nPHOTO PAGE\ninside the brackets

first_overlay_greenId_flash_text_line3

HOLD STEADY FOR 2 PHOTOS

second_overlay_greenId_text_line1

second_overlay_greenId_text_line2

HOLD STEADY

second_overlay_greenId_text_line3

Taking 2 photos

indicator_focus

Not in focus

indicator_glare

Glare detected

indicator_face

No face found

indicator_movecloser

Move Closer.

tooltip_doc_manual_capture_heading

Having some trouble?

tooltip_doc_manual_capture

Take the photo using\nthe capture button

alert_doc_cancel_message

Are you sure you want to exit?

alert_doc_cancel_title

Cancel Capture

alert_doc_positive_button

Yes, I\'m sure

alert_doc_negative_button

No, go back

doc_capture_label

AUTO\nCAPTURE

doc_overlay_gotit_button

Got it!

Document capture reference images

The following images show labels for the keys in the Localizable.strings and Document.json files.  The Localizable.strings keys are shown in blue, and the Document.json keys are shown in yellow.  

Image Removed

Image Removed

Image Removed

   Image Removed

is available on the greenID Mobile release website. 

first_overlay_licence_flash_front_text_line1

first_overlay_licence_flash_front_text_line3

first_overlay_licence_flash_back_text_line1

first_overlay_licence_flash_back_text_line3

second_overlay_licence_text_line1

second_overlay_licence_text_line2

second_overlay_licence_text_line3

first_overlay_passport_landscape_flash_text_line1

first_overlay_passport_landscape_flash_text_line3

second_overlay_passport_landscape_text_line1

second_overlay_passport_landscape_text_line2

second_overlay_passport_landscape_text_line2

first_overlay_greenId_flash_text_line1

first_overlay_greenId_flash_text_line3

second_overlay_greenId_text_line1

second_overlay_greenId_text_line2

second_overlay_greenId_text_line3

indicator_focus

indicator_glare

indicator_face

indicator_movecloser

tooltip_doc_manual_capture_heading

tooltip_doc_manual_capture

alert_doc_cancel_message

alert_doc_cancel_title

alert_doc_positive_button

alert_doc_negative_button

doc_capture_label

doc_overlay_gotit_button

Document capture reference images

The following images show labels for the keys in the Localizable.strings and Document.json files.  The Localizable.strings keys are shown in blue, and the Document.json keys are shown in yellow.  

Image Added

Image Added

Image Added

Review screens - colours

From version 1.33.0, you can add the following to your copy of GIDsettings.plist 

Edit the plist file to change the following: 

From version 1.33.0, you can add the following to your copy of Localizable.strings file.  You can use basic HTML to style the text.  

Edit the strings file to change the following: 

The 2nd line of text is created programatically, and cannot be changed by the client.  

Review screens - Voiceover text

If you change the messaging on the review screen, you should also change the Voiceover accessibility messaging to match.  

In the  Localizable.strings file, change the following:

Column
width 50
Selfie capture UI

Selfie capture - colours, fonts

The colours and fonts of the document capture tool can be modified in a file called Selfie.json.  This file is located inside the IDMetricsSelfieCapture.framework.   

This file will allow you to change the fonts and colours.  To change the corresponding text, see the section below.

 Note that the colours are in R-G-B-Alpha format. 

The following customisation options are available in the file.  Some options are not used in a normal greenID mobile workflow and will not be seen in your UI, so they have not been mentioned in this table.  

Selfie capture - Messages, labels, and other text

Text values in the document capture widget can be changed by including values in a Localizable.strings file in your app.    Adding the following key/values will change the following messages.  

An example localizable.strings file that contains some of these keys is available on the greenID Mobile release website. 

button_confirm

button_retake

title_review_selfie

Review your Selfie.

overlay_please_hold_still

PLEASE HOLD STILL

overlay_no_face_found

tooltip_selfie_manual_capture_heading

Having some trouble?

tooltip_selfie_manual_capture

alert_selfie_cancel_message

Are you sure you want to exit?

alert_selfie_cancel_title

Cancel Capture

alert_selfie_positive_button

Yes, I\'m sure

alert_selfie_negative_button

No, go back

overlay_selfie_line1

overlay_selfie_line2

HOLD STEADY WHEN READY

selfie_overlay_gotit_button

Got it!

selfie_capture_mode

AUTO\nCAPTURE

label_take_selfie

Take a Selfie.

Selfie capture reference images

The following images show labels for the keys in the Localizable.strings and Selfie.json files.  The Localizable.strings keys are shown in blue, and the Selfie.json keys are shown in yellow.  

6. More information on iOS customisation

Using a custom font family

If you want to use a custom font that is not included with iOS, you can include it in your app as follows:

1. Copy the font file into the resources for your app.  Make sure it is part of the 'Copy bundle resources' build phase
2. Add a key to your Info.plist file called UIAppFonts. ("Fonts provided by application")
3. Make this key an array (Xcode may do this automatically for you)
4. For each custom font you have, enter the full name of your font file (including the extension) as items to the UIAppFonts array
5. Save Info.plist

You can then use these custom fonts in the gid_loadingFontFamily setting.  

Steps to integrate the GIDResources bundle into a calling application

If you have not previously integrated the GIDResources.bundle into your project, follow these steps.  

1. Copy the GIDResources bundle to the Root folder of the project
2. Go to (Your Project Target) → Build Phases → Copy Bundle Resources → Click on the + Button → Select Add Other. Select the GIDResources Bundle from window.
3. That's it!

(Figure a) Select Add Other:

(Figure b) Select the GIDResources Bundle from window:

(Figure c) Copy the items if needed:

(Figure d) The newly added GIDResources will appear in the Xcode project navigator and in the copy bundle resources:

Setting up a Localizable.strings file

A strings file named Localizable must be created inside of the parent application. This is done by using these steps:

• Go to File > New > File. Choose Strings File unders the Resource subsection as shown below:

• Click Next, name the file Localizable.strings, then click Save.

• Now that you’ve created the Localizable.strings file, you need to add all of the text key value pairs that you want to configure in the Localizable.strings file. You need to follow a specific, but fairly simple, format like this: "KEY" = "VALUE" .

• Make sure that you make the file 'Localized' in Xcode, as shown below.  This will move it into a language folder, and make it work with the capture widgets in the greenID Mobile SDK: