Skip to main content

Customization

Customize the appearance of the Metric SDK's UI components by setting a ThemeProvider during the SDK initialization.

Metric.init(
    metricSettings = BasicMetricSettings(
        ...
        themeProvider = ThemeProvider(
            fontProvider = FontProvider(
                regular = R.font.custom_font_regular,
                bold = R.font.custom_font_bold
            ),
            appTheme = {
                AppTheme(
                    appName = "Example App",
                    logo = AppLogo.NetworkImage("https://ex.com/logo.png"),
                    primaryColor = Color.RED
                )
            }
        ),
        ...
    )
)
Font Provider​

The FontProvider class is used to customize the fonts used within the Metric SDK. It has two properties:

  • regular: This property sets the regular variant of the custom font.
  • bold: This property sets the bold variant of the custom font.
data class FontProvider(
    @FontRes val regular: Int,
    @FontRes val bold: Int
)
App Theme​

The AppTheme class represents the theme of the Metric SDK. It allows you to customize several visual aspects of the SDK's UI:

  • appName: Sets the name of your app.
  • primaryColor: Determines the color of buttons and progress components within the SDK.
  • logo: Provides an image resource to be used as the app logo within the SDK.
data class AppTheme(
    val appName: String,
    val primaryColor: Int,
    val logo: AppLogo
)
  • Primary Color (primaryColor): You can set the primary color using an Integer value representing a color. This can be a default color provided by android.graphics.Color API, like Color.RED, or a custom color using a HEX code, like Color.parseColor("#000000").
  • App Logo (logo): The SDK allows you to set an app logo using various methods:
    • A Network URL: logo = AppLogo.NetworkImage("https://example.com/logo.png")
    • A Drawable resource: logo = AppLogo.ResourceImage(R.drawable.image)
    • A Bitmap image: logo = AppLogo.BitmapImage(Bitmap)

    The AppLogo class defines these options:

    sealed class AppLogo {
      data class NetworkImage(val url: String) : AppLogo()
      data class BitmapImage(val bitmap: Bitmap) : AppLogo()
      data class ResourceImage(@DrawableRes val resId: Int) : AppLogo()
    }

In summary, customize the appearance of the Metric SDK's UI by setting fonts, primary colors, and app logos using the provided ThemeProvider, FontProvider, and AppTheme classes.

Sample The "Sample" section provides you with a complete example of how to initialize the Metric SDK with customization. Here's what the initialization method could look like:

Metric.init(
    metricSettings = BasicMetricSettings(
        applicationContext = this,
        themeProvider = ThemeProvider(
            fontProvider = FontProvider(
                regular = R.font.custom_font_regular,
                bold = R.font.custom_font_bold
            ),
            appTheme = {
                AppTheme(
                    appName = "Example App",
                    logo = AppLogo.NetworkImage("https://example.com/logo.png"),
                    primaryColor = Color.RED
                )
            }
        ),
        authenticator = {
            ClientAuthenticator(
                clientKey = "...",
                secretKey = "..."
            )
        },
        environment = Environment.Dev
    )
)