# Customization

You can customize the `AuthenteqFlow` appearance with a custom color scheme by extending the  `AuthenteqThemeBase`class:

{% code title="styles.xml" %}

```markup
<resources>
    <style name="AuthenteqCustom" parent="AuthenteqThemeBase">
        <item name="aq_logo_style">dark</item>
        <item name="aq_primaryColor">#FF6D33</item>
        <item name="aq_disabledColor">#8833B3CC</item>
        <item name="aq_windowBackgroundColor">#FFFFFF</item>
        <item name="aq_boxBackgroundColor">#464646</item>
        <item name="aq_textColor">#BAC7BF</item>
        <item name="aq_selectedButtonTextColor">#454A51</item>
        <item name="aq_selectedButtonBackgroundColor">#00EFFF</item>
        <item name="aq_textFontFamily">@font/font_custom</item>
        <item name="aq_instructionImageForPassport">@drawable/instruction_passport</item>
        <item name="aq_instructionImageForDriversLicense">@drawable/identification_driver_license</item>
        <item name="aq_instructionImageForIdCard">@drawable/identification_national_id</item>
        <item name="aq_instructionImageForSelfie">@drawable/identification_selfie</item>
    </style>
</resources>
```

{% endcode %}

### Description

A visual representation of these properties are available in section [UI Customization](https://docs.authenteq.com/mo/ui-customization).

| 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_textColor`                                       | color       | Text color                                                                                                                                                 |
| `aq_textFontFamily`                                  | font-family | Font family.                                                                                                                                               |
| `aq_successColor`                                    | color       | Color for success flow symbols                                                                                                                             |
| `aq_windowBackgroundColor`                           | color       | Background color for all screens                                                                                                                           |
| `aq_boxBackgroundColor`                              | color       | Background color for fields at Scan document review screens                                                                                                |
| `aq_separatorColor`                                  | color       | Color for table view cells separator                                                                                                                       |
| `aq_selectedButtonTextColor`                         | color       | Color for selected buttons text                                                                                                                            |
| `aq_selectedButtonBackgroundColor`                   | color       | Background color for selected buttons                                                                                                                      |
| `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 liveness instructions. We recommended using images smaller than 300dp                                                                     |
| `aq_instructionNfcSymbolCheck`                       | reference   | <p>Custom image/animation for NFC chip presence verification instructions in the document. </p><p>Resource can be Image or MPEG/Lottie file animation.</p> |
| `aq_identificationNfcInstruction`                    | reference   | <p>Custom image/animation for NFC document scan instructions.</p><p>Resource can be Image or MPEG/Lottie file animation.</p>                               |
| `aq_identificationNfcScanInside`                     | reference   | <p>Custom image/animation for NFC document inside scan instructions.</p><p>Resource can be Image or MPEG/Lottie file animation.</p>                        |
| `aq_identificationInstructionImageForProofOfAddress` | drawable    | Custom image for proof of address scan instructions. We recommend using images smaller than 300dp                                                          |
| `aq_identificationIconForIdDocument`                 | drawable    | Custom icon for ID document. We recommend using images smaller than 250dp                                                                                  |
| `aq_identificationIconForProofOfAddress`             | drawable    | Custom icon for proof of address. We recommend using images smaller than 250dp                                                                             |

### 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&#x20;

```markup
<?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`&#x20;

{% code title="AndroidManifest.xml" %}

```markup
<?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"/>
        ...
    </application>
</manifest>
```

{% endcode %}

* You can use created theme as input parameter for start activity methods

```java
public void startIdentification(){
    IdentificationActivity.startForResult(this, 
        MY_REQUEST_CODE, 
        null, 
        "<client id>", 
        "client secret", 
        documents, 
        R.style.AuthenteqCustom);
}
```