UI Customization

Colors
All the color overrides have to be placed in your /values/colors.xml file; the possible values are:
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>
Logo
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.

Backup

SDK Reference

Last modified 8mo ago

Export as PDF

Copy link

Outline