Default UI - Customizing

In the Scan Process page, we learned how to configure the TireTreadScanView. Since SDK version 14.0.0, the Default UI is the default appearance.

TireTreadScanView setup, with default configuration
  • Android

  • iOS

TireTreadScanView(
    onScanAborted = ::onScanAborted,
    onScanProcessCompleted = ::showResult,
    callback = null,
    onError = { measurementUUID, exception ->
        /* Handle initialization error */
        finish()
    })
TireTreadScanViewKt.TireTreadScanView(
    onScanAborted: onScanAborted,
    onScanProcessCompleted: showResult,
    callback: nil
) { measurementUUID, error in
    print("Initialization failed: \(error)")
    DispatchQueue.main.async {
        self.navigationController?.popViewController(animated: true)
    }
}

While ready out of the box with optimal defaults, the Default UI is also customizable.

By providing a custom UiConfig object to the TireTreadConfig you can customize the texts and also hide elements as needed:

TireTreadScanView setup, with custom UI configuration
  • Android

  • iOS

  • JSON

val customUiConfig = UIConfig().apply {
    orientationWarningConfig.text = "Gire o dispositivo para o modo paisagem"
    orientationWarningConfig.rotationLockHint = "Certifique-se de que a rotação automática está ativa"
}

val customConfig = TireTreadConfig().apply {
    uiConfig = customUiConfig
}

TireTreadScanView(
    config = customConfig,
    onScanAborted = ::onScanAborted,
    onScanProcessCompleted = ::openResultScreen,
    callback = null,
    onError = { measurementUUID, exception ->
        /* Handle initialization error */
        finish()
    })
let customUiConfig = UIConfig();

customUiConfig.orientationWarningConfig.text = "Gire o dispositivo para o modo paisagem"
customUiConfig.orientationWarningConfig.rotationLockHint = "Certifique-se de que a rotação automática está ativa"

let customConfig = TireTreadConfig()
customConfig.uiConfig = customUiConfig

TireTreadScanViewKt.TireTreadScanView(
    config: customConfig,
    onScanAborted: onScanAborted,
    onScanProcessCompleted: showResult,
    callback: nil
) { measurementUUID, error in
    print("Initialization failed: \(error)")
    DispatchQueue.main.async {
        self.navigationController?.popViewController(animated: true)
    }
{
  "uiConfig": {
    "distanceIndicatorConfig": {
      "textOk": "Mantenha a distância.",
      "textMoveCloser": "Chegue mais perto.",
      "textMoveAway": "Aumente a distância."
    },
    "focusPointTooltipConfig": {
      "text": "Mova o dispositivo para frente e para trás para detectar o pneu."
    },
    "tapToStartScanningTooltipConfig": {
      "textOk": "Toque na tela para iniciar o processo.",
      "textNotOkMetric": "Mantenha o aparelho a cerca de 20cm de distância do pneu."
    },
    "uploadViewConfig": {
      "text": "Enviando imagens, aguarde..."
    },
    "orientationWarningConfig": {
      "text": "Gire o dispositivo para o modo paisagem",
      "rotationLockHint": "Certifique-se de que a rotação automática está ativa"
    }
  }
}

// In you code:

TireTreadScanView(
    config = "custom_ui.json",
    onScanAborted = ::onScanAborted,
    ...

If any element information is not provided, its default value will be used.

Here are the Default UI elements that can be customized, and their respective property names within the UIConfig class:

Element Property Name Customizable in Default UI

Focus Point Tooltip

focusPointTooltipConfig

Yes

Tire Overlay

tireOverlayConfig

Yes

Tap to Start Scanning Tooltip

tapToStartScanningTooltipConfig

Yes

Countdown

N/A

No - Integral to Default UI appearance

Distance Indicator

distanceIndicatorConfig

Yes

Upload View

uploadViewConfig

Yes

Abort Button

N/A

No - Shared with all UIs

Orientation Warning

orientationWarningConfig

Yes

Tire Width Input

tireWidthInputConfig

Yes

Missing Permission

missingPermissionConfig

Yes

If you need full control over the UI appearance, consider implementing a Custom UI instead of using the Default or Classic UI.