UI Customization

The Keyless SDK can be customized in order to provide a seamless UX when integrated in a custom app.

Colors

All the color overrides have to be placed in your /values/colors.xml file; the possible values are:

Identifier

Description

klBackgroundColor

The background color of the enrollment screen

klForegroundColor

The color of the texts

klPrimaryColor

The color of the animated circle during the authentication

klSecondaryColor

The color of the spinning dots during the enrollment

Example:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="klBackgroundColor">#ee444400</color>
<color name="klForegroundColor">#ff0000</color>
<color name="klPrimaryColor">#00ff00</color>
<color name="klSecondaryColor">#0000ff</color>
</resources>

Texts

The following strings can be overridden in your app /value/strings.xml file.

Please note that during the enrollment, three lines of text will be displayed at max and during the authentication/de-enrollment two lines of text will be displayed at max.

Identifier

Default

enroll_step_1_text_1

Position your face within the frame

enroll_step_2_text_1

Enrolling, please wait…

Displayed from 0% to 33% of enrollment progress

enroll_step_2_text_2

Enrolling, please wait…

Displayed from 34% to 66% of enrollment progress

enroll_step_2_text_3

Enrolling, please wait…

Displayed from 67% to 100% of enrollment progress

enroll_step_3_text_1

Keyless account created successfully!

authentication_step_1

Please look into the camera

authentication_step_2

Communicating with the Keyless network

authentication_step_3

Approved!

Example:

<resources>
<!-- Enroll -->
<string name="enroll_step_1_text_1">Position your face within the frame</string>
<string name="enroll_success">Success</string>
<string name="enroll_step_2_text_1">Enrolling, please wait…</string>
<string name="enroll_step_2_text_2">Enrolling, please wait…</string>
<string name="enroll_step_2_text_3">Enrolling, please wait…</string>
<string name="enroll_step_3_text_1">Keyless account created successfully!</string>
<!-- Authentication -->
<string name="authentication_step_1">Please look into the camera</string>
<string name="authentication_step_2">Communicating with the Keyless network</string>
<string name="authentication_step_3">Approved!</string>
</resources>

Font sizes

Fonts size can be overridden in your app /values/dimens.xml file; two values can be modified:

Identifier

Default

Description

klRegularFontSize

18sp

The font size used during the enrollment.

klSmallFontSize

14sp

The font size used during the authentication.

Example

<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="klRegularFontSize">30sp</dimen>
<dimen name="klSmallFontSize">25sp</dimen>
</resources>

Font families

Fonts must be .otf or .ttf and have to be put in /res/font folder; the font family can be changed in your /values/styles.xml file.

Example:

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:fontFamily">@font/your_font</item>
<item name="fontFamily">@font/your_font</item>
</style>
</resources>

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.

Add your own image called kl_logo_image.png in your /res/drawable folder to show it.