Links

UI Customization

The Keyless SDK can be customised in order to provide a more familiar UX when integrated in any custom app.

Colors

It is possible to customize the following colors:
  • Background color The background color of the enrollment screen.
  • Foreground color The color of the texts.
  • Primary color The color of the animated circle during the authentication.
  • Secondary color The color of the spinning dots during the enrollment.

Example

Android
iOS
Keyless.UI.Color.backgroundColor = 0XFF000000
Keyless.UI.Color.foregroundColor = 0XFFFFFFFF
Keyless.UI.Color.primaryColor = 0xFF1833B8
Keyless.UI.Color.secondaryColor = 0xFFFED900
Keyless.UI.Color.backgroundColor = .gray
Keyless.UI.Color.foregroundColor = .lightGray
Keyless.UI.Color.primaryColor = .magenta
Keyless.UI.Color.secondaryColor = .cyan

Texts

It is possible to customize the following texts:

Enrollment

We suggest to not use more than three lines of text.
  • step 1
    • text 1 Showed before the user face is framed.
  • step 2
    • text 1 Showed after the user face has been framed and the progress is between 0% and 33%.
    • text 2 Showed after the user face has been framed and the progress is between 34% and 66%.
    • text 3 Showed after the user face has been framed and the progress is between 57% and 100%.
  • step 3
    • text 1 Showed when the enrollment has been successfully completed.

Authentication

We suggest to not use more than two lines of text.
  • step 1
    • text 1 Showed before the user face is framed.
  • step 2
    • text 1 Showed after the user face has been framed.
  • step 3
    • text 1
      • Showed when the authentication has been successfully completed.

Example

Android
iOS
// Custom text for enrollment
Keyless.UI.Text.Enrollment.Step1.text1 = "(custom) Position your face within the frame"
Keyless.UI.Text.Enrollment.Step2.text1 = "(custom 1) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step2.text2 = "(custom 2) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step2.text3 = "(custom 3) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step3.text1 = "(custom) Keyless account created successfully!"
// Custom text for authentication
Keyless.UI.Text.Authentication.Step1.text1 = "(custom) Please look into the camera"
Keyless.UI.Text.Authentication.Step2.text1 = "(custom) Communicating with the Keyless network"
Keyless.UI.Text.Authentication.Step3.text1 = "(custom) Approved"
// Custom text for enrollment
Keyless.UI.Text.Enrollment.Step1.text1 = "(custom) Position your face within the frame"
Keyless.UI.Text.Enrollment.Step2.text1 = "(custom 1) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step2.text2 = "(custom 2) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step2.text3 = "(custom 3) Enrolling, please wait…"
Keyless.UI.Text.Enrollment.Step3.text1 = "(custom) Keyless account created successfully!"
// Custom text for authentication
Keyless.UI.Text.Authentication.Step1.text1 = "(custom) Please look into the camera"
Keyless.UI.Text.Authentication.Step2.text1 = "(custom) Communicating with the Keyless network"
Keyless.UI.Text.Authentication.Step3.text1 = "(custom) Approved"

Fonts

It is possible to customize the font face (iOS only) and size for two kinds of fonts: regular and small.

Example

Android
iOS
Keyless.UI.Font.regularFontSize = 20
Keyless.UI.Font.smallFontSize = 12
Keyless.UI.Font.regularFontSize = 20
Keyless.UI.Font.regularFontName = "Your custom font"
Keyless.UI.Font.smallFontSize = 14
Keyless.UI.Font.smallFontName = "Your custom font"
You can show your custom logo during Enrollment, Authentication and de-enrollment. It will be shown in the upper-right corner; any custom logo can be used, it will be resized but not stretched.

Example

Android
iOS
Add your own image .png in your /res/drawable folder to set it using Keyless.UI.Logo.bitmap property.
Keyless.UI.Logo.bitmap = BitmapFactory.decodeResource(
resources,
R.drawable.icon_example)
Add your own image to the app bundle and set it using Keyless.UI.Logo property.
Keyless.UI.Image.logoImage = UIImage(named: "your custom image")