UI Customization
The Keyless SDK can be customized in order to provide a seamless 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
1
Keyless.UI.Color.backgroundColor = 0XFF000000
2
Keyless.UI.Color.foregroundColor = 0XFFFFFFFF
3
Keyless.UI.Color.primaryColor = 0xFF1833B8
4
Keyless.UI.Color.secondaryColor = 0xFFFED900
Copied!
1
Keyless.UI.Color.backgroundColor = .gray
2
Keyless.UI.Color.foregroundColor = .lightGray
3
Keyless.UI.Color.primaryColor = .magenta
4
Keyless.UI.Color.secondaryColor = .cyan
Copied!

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
1
// Custom text for enrollment
2
Keyless.UI.Text.Enrollment.Step1.text1 = "(custom) Position your face within the frame"
3
Keyless.UI.Text.Enrollment.Step2.text1 = "(custom 1) Enrolling, please wait…"
4
Keyless.UI.Text.Enrollment.Step2.text2 = "(custom 2) Enrolling, please wait…"
5
Keyless.UI.Text.Enrollment.Step2.text3 = "(custom 3) Enrolling, please wait…"
6
Keyless.UI.Text.Enrollment.Step3.text1 = "(custom) Keyless account created successfully!"
7
8
// Custom text for authentication
9
Keyless.UI.Text.Authentication.Step1.text1 = "(custom) Please look into the camera"
10
Keyless.UI.Text.Authentication.Step2.text1 = "(custom) Communicating with the Keyless network"
11
Keyless.UI.Text.Authentication.Step3.text1 = "(custom) Approved"
Copied!
1
// Custom text for enrollment
2
Keyless.UI.Text.Enrollment.Step1.text1 = "(custom) Position your face within the frame"
3
Keyless.UI.Text.Enrollment.Step2.text1 = "(custom 1) Enrolling, please wait…"
4
Keyless.UI.Text.Enrollment.Step2.text2 = "(custom 2) Enrolling, please wait…"
5
Keyless.UI.Text.Enrollment.Step2.text3 = "(custom 3) Enrolling, please wait…"
6
Keyless.UI.Text.Enrollment.Step3.text1 = "(custom) Keyless account created successfully!"
7
8
// Custom text for authentication
9
Keyless.UI.Text.Authentication.Step1.text1 = "(custom) Please look into the camera"
10
Keyless.UI.Text.Authentication.Step2.text1 = "(custom) Communicating with the Keyless network"
11
Keyless.UI.Text.Authentication.Step3.text1 = "(custom) Approved"
Copied!

Fonts

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

Example

Android
iOS
1
Keyless.UI.Font.regularFontSize = 20
2
Keyless.UI.Font.smallFontSize = 12
Copied!
1
Keyless.UI.Font.regularFontSize = 20
2
Keyless.UI.Font.regularFontName = "Your custom font"
3
Keyless.UI.Font.smallFontSize = 14
4
Keyless.UI.Font.smallFontName = "Your custom font"
Copied!
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.
1
Keyless.UI.Logo.bitmap = BitmapFactory.decodeResource(
2
resources,
3
R.drawable.icon_example)
Copied!
Add your own image to the app bundle and set it using Keyless.UI.Logo property.
1
Keyless.UI.Image.logoImage = UIImage(named: "your custom image")
Copied!
Export as PDF
Copy link