Default UI - Customizing

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

Starting a scan with default configuration
  • Android

  • iOS

AnylineTireTreadScanner().scan(this, TireTreadConfig()) { outcome ->
    when (outcome) {
        is CompletedOutcome -> {
            // Scan completed -- use outcome.measurementUUID to fetch results
        }
        is AbortedOutcome -> {
            // User aborted the scan
        }
        is FailedOutcome -> {
            Log.e("MY_APP", "Scan failed: ${outcome.error.message}")
        }
    }
}
AnylineTireTreadScanner().scan(from: self, config: TireTreadConfig()) { outcome in
    switch outcome {
    case let completed as CompletedOutcome:
        // Scan completed -- use completed.measurementUUID to fetch results
    case let aborted as AbortedOutcome:
        // User aborted the scan
    case let failed as FailedOutcome:
        print("Scan failed: \(failed.error.message)")
    default:
        break
    }
}

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:

Starting a scan with custom UI configuration
  • Android

  • iOS

  • JSON

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

AnylineTireTreadScanner().scan(this, config) { outcome ->
    when (outcome) {
        is CompletedOutcome -> openResultScreen(outcome.measurementUUID)
        is AbortedOutcome -> finish()
        is FailedOutcome -> {
            Log.e("MY_APP", "Scan failed: ${outcome.error.message}")
            finish()
        }
    }
}
let config = TireTreadConfig()
config.uiConfig.orientationWarningConfig.text = "Gire o dispositivo para o modo paisagem"
config.uiConfig.orientationWarningConfig.rotationLockHint = "Certifique-se de que a rotação automática está ativa"

AnylineTireTreadScanner().scan(from: self, config: config) { outcome in
    switch outcome {
    case let completed as CompletedOutcome:
        self.openResultScreen(uuid: completed.measurementUUID)
    case let aborted as AbortedOutcome:
        self.navigationController?.popViewController(animated: true)
    case let failed as FailedOutcome:
        print("Scan failed: \(failed.error.message)")
        self.navigationController?.popViewController(animated: true)
    default:
        break
    }
}
{
  "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"
    }
  }
}

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

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 building your own custom UI instead of using the Default or Classic UI.