UI Customization
The Keyless SDK can be customised in order to provide a more familiar UX when integrated in any custom app.
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.
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
It is possible to customize the following texts:
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.
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.
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"
It is possible to customize the font face (iOS only) and size for two kinds of fonts: regular and small.
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.
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")
Last modified 7mo ago