Customization

You can customize the AuthenteqFlow appearance with a custom color scheme by extending the AuthenteqThemeBaseclass:

styles.xml
<resources>
<style name="AuthenteqCustom" parent="AuthenteqThemeBase">
<item name="aq_logo_style">dark</item>
<item name="aq_primaryColor">#33B3CC</item>
<item name="aq_disabledColor">#8833B3CC</item>
<item name="aq_windowBackgroundColor">#333333</item>
<item name="aq_boxBackgroundColor">#464646</item>
<item name="aq_textColor">#BAC7BF</item>
<item name="aq_formHintColor">#BAC7BF</item>
<item name="aq_textFontFamily">@font/font_custom</item>
<item name="aq_instructionImageForPassport">@drawable/instruction_passport</item>
<item name="aq_instructionImageForDriversLicense">@drawable/identification_step_02</item>
<item name="aq_instructionImageForIdCard">@drawable/identification_step_03</item>
<item name="aq_instructionImageForSelfie">@drawable/selfie_authentication_start</item>
</style>
</resources>

Description

Attribute name

Type

Description

aq_logo_style

enum

Type of Authenteq log. Possible values: dark or light

aq_primaryColor

color

Primary color of your color scheme

aq_disabledColor

color

Disabled color of your color scheme (would be semi transparent primary color)

aq_textColor

color

Text color

aq_formHintColor

color

Text color for hints

aq_textFontFamily

font-family

Font family.

aq_windowBackgroundColor

color

Background color for all screens

aq_boxBackgroundColor

color

Background color for fields at Scan document review and Contact support screens

aq_instructionImageForPassport

drawable

Custom image for passport scan instructions. We recommended using images smaller than 300dp

aq_instructionImageForDriversLicense

drawable

Custom image for driver's license instructions. We recommended using images smaller than 300dp

aq_instructionImageForIdCard

drawable

Custom image for id card instructions. We recommended using images smaller than 300dp

aq_instructionImageForSelfie

drawable

Custom image for taking selfie instructions. We recommended using images smaller than 300dp

Create custom font family

See detailed guide about how to create custom font family https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml

SDK requires next font-family structure

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<font
android:fontWeight="400"
android:font="@font/custom_regular"
android:fontStyle="normal" />
<font
android:fontWeight="700"
android:font="@font/custom_bold"
android:fontStyle="normal" />
<font
app:fontWeight="400"
app:font="@font/custom_regular"
app:fontStyle="normal" />
<font
app:fontWeight="700"
app:font="@font/custom_bold"
app:fontStyle="normal" />
</font-family>

Applying custom theme

  • You can apply it at AndroidManifest.xml

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
package="com.authenteq.android.flow.sample">
<application
android:name=".App"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
...
<activity
android:name="com.authenteq.android.flow.ui.identification.IdentificationActivity"
android:theme="@style/AuthenteqCustom"
tools:replace="android:theme"/>
<activity
android:name="com.authenteq.android.flow.ui.seflieauthentication.SelfieAuthenticationActivity"
android:theme="@style/AuthenteqCustom"
tools:replace="android:theme"/>
...
</application>
</manifest>
  • You can use created theme as input parameter for start activity methods

public void startIdentification(){
IdentificationActivity.startForResult(this, MY_REQUEST_CODE, "<license>", R.style.AuthenteqCustom);
}
public void startSelfieAuthentication(){
SelfieAuthenticationActivity.startForResult(this, MY_REQUEST_CODE, "<license>", "<userId>", R.style.AuthenteqCustom);
}