LogoLogo
  • Welcome!
  • GETTING STARTED
    • Signing Up
    • Choose a Product
    • Choose an Integration Option
    • Run Your First Test Job
    • Complete Your KYC
    • Fund Your Wallet
    • Go Live!
    • Pricing
  • SUPPORTED ID TYPES & DOCUMENTS
    • For Individuals (KYC)
      • Using ID Number
        • Supported Countries
          • Côte d'Ivoire
            • National ID (without Photo)
            • Resident ID (without Photo)
          • Ghana
            • Ghana Card
            • Ghana Card (without Photo)
            • Passport
            • Voter's ID
          • Kenya
            • Alien Card
            • KRA Pin
            • National ID
            • National ID (without Photo)
            • Passport
            • Tax Information
          • Nigeria
            • Bank Account
            • BVN
            • NIN V2
            • NIN Slip Verification
            • V_NIN (Virtual NIN)
            • Phone Number
            • Voter's ID
          • South Africa
            • National ID
            • National ID (without Photo)
            • Phone Number
            • Refugee and Asylum ID
          • Uganda
            • National ID (without Photo)
            • Basic KYC in Uganda
          • Zambia
            • Bank Account
            • TPIN
          • Zimbabwe
            • National ID (without Photo)
        • Test Data
          • Customising Sandbox Test Data
        • ID Number Regex
        • Visual Samples of Supported ID Types
      • Using Document Image
        • Continents
          • Africa
          • Asia and the Middle East
          • Europe
          • North America
          • Oceania
          • South America
    • For Businesses (KYB)
      • Supported Countries
        • Nigeria
          • Business Registration
          • Tax Information
        • Kenya
          • Business Registration
        • South Africa
          • Business Registration
      • ID Number Regex
  • PRODUCTS
    • For Individuals (KYC)
      • AML Check
        • AML News Media
      • Basic KYC
      • Biometric KYC
      • Digital Address Verification
      • Document Verification
        • Document Verification
        • Enhanced Document Verification
      • Electronic Signature
      • Enhanced KYC
      • Phone Number Verification
      • SmartSelfie™ Authentication
      • SmartSelfie™ Compare
      • Smile Secure
    • For Businesses (KYB)
      • Business Verification
  • Integration Options
    • Mobile
      • Getting Started
      • Products
        • Biometric KYC
        • BVN Consent
        • Document Verification
        • Enhanced Document Verification
        • Enhanced KYC
        • SmartSelfie™ Enrollment and Authentication
        • Enhanced SmartSelfie™ Enrollment And Authentication
      • Customization
        • UI Components
      • Offline Mode
      • Release Notes
        • Android Release Notes
        • iOS Release Notes
        • Flutter Release Notes
        • React Native Release Notes
    • No-Code
      • Smile Links
        • Link FAQs
        • Rest API
    • Server to Server
      • Ruby
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
          • KYB - Business Verification
          • AML Check
        • Generate Token for Web Integration
        • Utilities
      • Python
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
          • Business Verification
        • Generate Token for Web Integration
        • Utilities
      • Java
        • Release Notes
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
        • Generate Token for Web Integration
        • Utilities
      • Node.js
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • Enhanced Document Verification
          • SmartSelfie™ Authentication
          • Business Verification
        • Generate Token for Web Integration
        • Utilities
      • PHP
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
        • Generate Token for Web Integration
        • Utilities
    • Rest API
      • Signing your API Request
        • Using Signature
      • Products
      • Postman Collection
      • Utilities
    • Web / Mobile Web
      • Web Integration
        • Installation
        • Usage
        • End User Consent
        • Support
      • Javascript SDK
        • Installation
        • Usage
        • Migration
        • Deprecated Version
          • Installation
          • Usage
          • Notes
          • Support
  • FURTHER READING
    • FAQs
      • What are your support hours?
      • How do I set up a callback?
      • How to re-enroll, deactivate or delete a user?
      • Add or remove team members
      • What are top-level keys?
      • What are partner_params?
      • How do job types map to the new product names?
      • Is there an API I can use to monitor my wallet balance?
      • Is there an API I can query to check the availability status of an ID type?
      • How do I integrate Smile ID in other countries or query other ID types?
      • What are the image types I can upload to Smile ID?
      • Why aren't Kenyan IDs returning images for some IDs queried?
      • Why are some of my bank verification requests returning 'ID authority unavailable'?
      • How can I look up a specific user's data?
      • Selfie best-practices
      • Document capture best-practices
      • What happens under the hood?
      • Guide to the user consent screen
      • What is code 2302?
      • Using the Demo App and Scanning QR codes
    • Job status
    • KYC receipts
    • Result codes
      • Error codes
    • Securing your account with two-factor authentication (2FA)
    • Security Overview
    • Troubleshooting
      • Troubleshooting error 2204 & 2205 - "You're not authorized to do that"
      • Why is my Web API job taking so long?
      • Image capture issues on web client
Powered by GitBook
On this page
  • Localization and Copy
  • Theming

Was this helpful?

  1. Integration Options
  2. Mobile

Customization

Customize the SDK-provided screens to match your application's style

PreviousEnhanced SmartSelfie™ Enrollment And AuthenticationNextUI Components

Last updated 8 months ago

Was this helpful?

On Flutter and React Native, please follow the customization guides provided for Android and iOS.

Localization and Copy

All Composables taken in the standard Jetpack Compose Modifier parameter, which can be used to further customize the screen as needed.

You may override specific strings by defining new values for the XML string resources defined in the SDK. The full list of string resources is available here:

For example, to update the Smart Selfie instructions, you can override the si_smart_selfie_instructions XML resource in your own strings.xml file

<string name="si_smart_selfie_instructions">Your custom instruction</string>

To provide translations, create a new values folder specific to the language (i.e. values-fr) and create a strings.xml overriding all values. For further information, refer to

You may override specific strings by defining new values in your own Localizable.strings file. The full list of string resources that can be overridden is available at .

Once you have your translated strings defined, you can apply them by calling SmileID.apply() with an instance of SmileIDLocalizableStrings. SmileIDLocalizableStrings requires the bundle and tablename of your strings.

let localizableStrings = SmileIDLocalizableStrings(bundle: Bundle.main, tableName: "Localizable")
SmileID.apply(localizableStrings)

Theming

There are 2 options for customizing the colours of the screens presented by the SDK: via Jetpack Compose or XML Resources.

Note: If you're using Jetpack Compose, you may choose to use XML Resources or the native Compose approach, as per your preference. However, the Compose approach is the best practice in case of a dynamic theme (i.e. , Dark/Light mode, etc). The default SmileIdentityColorScheme picks its colours from resources.

Colour Scheme

When invoking a Composable function, the colour scheme and typography can be customized by the values passed to the colorScheme and typography parameters, respectively.

The default theme is publicly exposed as SmileID.colorScheme and can be copied and modified.

import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.smileidentity.SmileID
import com.smileidentity.compose.theme.colorScheme
import com.smileidentity.compose.SmartSelfieRegistration

@Composable
fun ColorSchemeThemingExample() {
    val colorScheme = SmileID.colorScheme.copy(primary = Color.Green)
    // Alternatively, if you already have your own MaterialTheme.colorScheme, you can use that:
    // val colorScheme = MaterialTheme.colorScheme
    SmileID.SmartSelfieRegistration(colorScheme = colorScheme)
}

Typography

Additionally, you may also customize the typography in a similar fashion via the typography parameter to all Composables.

The default typography is exposed as SmileID.typography and can be copied and modified.

import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.sp
import com.smileidentity.SmileID
import com.smileidentity.compose.theme.typography
import com.smileidentity.compose.SmartSelfieRegistration

@Composable
fun TypographyThemingExample() {
    val typography = SmileID.typography.copy(displayLarge = TextStyle(fontSize = 24.sp))
    // Alternatively, if you already have your own MaterialTheme.typography, you can use that:
    // val typography = MaterialTheme.typography
    SmileID.SmartSelfieRegistration(typography = typography)
}

Colours in XML Resources are defined at 2 levels, the overarching theme colours and the Material Theme colours. The overarching theme colours are a more limited set of colour definitions which are automatically assigned to the corresponding Material Theme colours as appropriate. For more granular control, the Material Theme values can be overridden directly.

Overarching Theme Colors

Any or all of these can be overridden by your own values

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--  Overarching Theme Colors  -->
    <!--  Replace the "..." with your own color  -->
    <color name="si_color_on_dark">...</color>
    <color name="si_color_on_light">...</color>
    <color name="si_color_accent">...</color>
    <color name="si_color_success">...</color>
    <color name="si_color_error">...</color>
    <color name="si_color_background_dark">...</color>
    <color name="si_color_background_main">...</color>
    <color name="si_color_background_light">...</color>
    <color name="si_color_background_lightest">...</color>
</resources>

Granular Material Theme Colors

For even finer control, any or all of these can be overridden with your own values

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--  Material Theme Colors  -->
    <!--  Replace the "..." with your own color  -->
    <color name="si_color_material_primary">...</color>
    <color name="si_color_material_on_primary">...</color>
    <color name="si_color_material_primary_container">...</color>
    <color name="si_color_material_on_primary_container">...</color>
    <color name="si_color_material_inverse_primary">...</color>
    <color name="si_color_material_secondary">...</color>
    <color name="si_color_material_on_secondary">...</color>
    <color name="si_color_material_secondary_container">...</color>
    <color name="si_color_material_on_secondary_container">...</color>
    <color name="si_color_material_tertiary">...</color>
    <color name="si_color_material_on_tertiary">...</color>
    <color name="si_color_material_tertiary_container">...</color>
    <color name="si_color_material_on_tertiary_container">...</color>
    <color name="si_color_material_background">...</color>
    <color name="si_color_material_on_background">...</color>
    <color name="si_color_material_surface">...</color>
    <color name="si_color_material_on_surface">...</color>
    <color name="si_color_material_surface_variant">...</color>
    <color name="si_color_material_on_surface_variant">...</color>
    <color name="si_color_material_surface_tint">...</color>
    <color name="si_color_material_inverse_surface">...</color>
    <color name="si_color_material_inverse_on_surface">...</color>
    <color name="si_color_material_error">...</color>
    <color name="si_color_material_on_error">...</color>
    <color name="si_color_material_error_container">...</color>
    <color name="si_color_material_on_error_container">...</color>
    <color name="si_color_material_outline">...</color>
    <color name="si_color_material_outline_variant">...</color>
    <color name="si_color_material_scrim">...</color>
</resources>

To customise the colors and typography of the SDK screens, you need to create a class that conforms to SmileIdTheme protocol. This protocol exposes the cutomisable UI elements on the SDK.

You can initialize the Color values in various ways, including using hex values, named colors, RGB values etc.


class CustomTheme: SmileIdTheme {
    var onDark: Color {
        Color(hex: "#F6EDE4")
    }

    var onLight: Color {
        Color(hex: "#2D2B2A")
    }

    var backgroundDark: Color {
        Color(hex: "#C0C0A5")
    }

    var backgroundMain: Color {
        Color(hex: "#FFFFFF")
    }

    var backgroundLightest: Color {
        Color(hex: "#F9F0E7")
    }

    var backgroundLight: Color {
        Color(hex: "#E2DCD5")
    }

    var success: Color {
        Color(hex: "#2CC05C")
    }

    var error: Color {
        Color(hex: "#91190F")
    }

    var accent: Color {
        Color(hex: "#001096")
    }

    var tertiary: Color {
        Color(hex: "#2D2B2A)")
    }

    var header1: Font {
        EpilogueFont.bold(with: 32)
    }

    var header2: Font {
        EpilogueFont.bold(with: 20)
    }

    var header4: Font {
        EpilogueFont.bold(with: 16)
    }

    var header5: Font {
        EpilogueFont.medium(with: 12)
    }

    var button: Font {
       return header4
    }

    var body: Font {
        EpilogueFont.medium(with: 14)
    }
}

After implementing the custom theme, it can be applied using the following snippet

SmileID.apply(CustomTheme())

https://github.com/smileidentity/android/blob/main/lib/src/main/res/values/strings.xml
https://developer.android.com/guide/topics/resources/localization
https://github.com/smileidentity/ios/blob/main/Sources/SmileID/Resources/Localization/en.lproj/Localizable.strings
Material You Dynamic Color Scheme
https://github.com/smileidentity/android/blob/main/lib/src/main/res/values/colors.xml