Customization for Android App

Introduction

UI customization capabilities are available with our SDK. This enables developers to tailor color schemes and font styles of all UI components within the InMobi CMP, ensuring seamless integration with the host application's UI.

Customization for Android apps can be done both from the Themes tab on the InMobi CMP portal and in the code of the SDK. 

This section details how to utilize various configuration options for text styles and colors on Android.

Configuration

You can control light/dark mode by using ThemeMode while calling startChoice method. It can take three values:

1. LIGHT - choice sdk always behaves in light mode
2. DARK - choice sdk always behaves in dark mode
3. AUTO - choice sdk behaves the same mode as device configured

Color customization

Method 1: Through InMobi CMP Portal

1. Login to your InMobi CMP account and navigate to Themes.
2. Under Configure your theme, scroll down and click the "Would you like to customise colours via the portal?" checkbox to enable colour customisation through the portal.
3. Select your preferred theme from Light, Dark, or Auto.
   • Auto: This will apply the Light Theme on the consent screen popup if the user device is in Light Mode, and Dark Theme if the user device is in Dark Mode.
   • Light: This will force the Light Theme on the consent screen popup irrespective of whether the user device is in Light or Dark Mode.
   • Dark: This will force the Dark Theme on the consent screen popup irrespective of whether the user device is in Light or Dark Mode.
4. Light and dark theme colors are set by default. Customize them as per your choice. Click More Options to view advanced color customization options.

   

   Note

   Enter Hex code values for colours while customizing them. For eg. #FF0000 for red.

5. Once done, click Save Theme.

    

   Note

   While color customization can be done through code, InMobi CMP gives priority to color customization enabled through the portal. First, we will consider the customisations from the portal; if there are none, we will consider the customisations made through code. In case there are no changes made through code, we will apply the default colours.

Method 2: Via Code

You can pass the ChoiceColor model to set themes in light and dark mode. If only one model is passed in AUTO themeMode, InMobi CMP SDK will use the same model for both light and dark mode. To create your theme, follow the steps: 

1. Create a ChoiceColor model and set all the necessary colors for that model.
2. Create the ChoiceStyle object through the builder and set the appropriate ChoiceColor object for light and dark mode resources.
3. Pass the ChoiceStyle object in the startChoice method.

Example

fun initChoice() {
  ChoiceCmp.startChoice( 
      app = application, 
      packageId = packageId,  
      pCode = "your pcode",  
      callback= choiceCmpCallback,  
      choiceStyle = ChoiceStyle.Builder().setThemeMode(ThemeMode.AUTO).
            setLightModeColors(getColors()).
            setDarkModeColors(getColors()).build()
  )
}
    
private fun getColors(): ChoiceColor {
    val choiceColor = ChoiceColor()
    choiceColor.dividerColor = getColorInt(R.color.dividerColor)
    choiceColor.tabBackgroundColor = getColorInt(R.color.tabBackgroundColor)
    choiceColor.tabTextColor = getColorInt(R.color.tabTextColor)
    choiceColor.searchBarBackgroundColor = getColorInt(R.color.searchBarBackgroundColor)
    choiceColor.searchBarForegroundColor = getColorInt(R.color.searchBarForegroundColor)
    choiceColor.toggleActiveColor = getColorInt(R.color.toggleActiveColor)
    choiceColor.toggleInactiveColor = getColorInt(R.color.toggleInactiveColor)
    choiceColor.globalBackgroundColor = getColorInt(R.color.globalBackgroundColor)
    choiceColor.titleTextColor = getColorInt(R.color.titleTextColor)
    choiceColor.bodyTextColor = getColorInt(R.color.bodyTextColor)
    choiceColor.menuTextColor = getColorInt(R.color.menuTextColor)
    choiceColor.linkTextColor = Color.parseColor(R.color.linkTextColor)
    choiceColor.buttonTextColor = getColorInt(R.color.buttonTextColor)
    choiceColor.buttonBackgroundColor = getColorInt(R.color.buttonBackgroundColor)
    choiceColor.buttonDisabledTextColor = getColorInt(R.color.buttonDisabledTextColor)
    choiceColor.buttonDisabledBackgroundColor = getColorInt(R.color.buttonDisabledBackgroundColor)
    return choiceColor
}

private fun getColorInt(colorRes: Int): Int {
    return ContextCompat.getColor(this, colorRes)
}

Fonts customization

If you wish to customize the fonts used in the Choice CMP, follow the instructions below:

1. Create a font folder inside the res directory of your project if it hasn't been created already.
2. Add the respective font files that you want to use to this newly created font folder.
3. Include their corresponding IDs in the resources parameter when calling the startChoice method. The table below provides details on the two types of supported fonts and their corresponding property names in the ChoiceStyle class in the CMP:

Below is an example demonstrating how the startChoice call will appear once you've integrated custom fonts:

ChoiceCmp.startChoice( 
      app = application, 
      packageId = packageId,  
      pCode = "your pcode",  
      callback= choiceCmpCallback,  
      choiceStyle = ChoiceStyle.Builder().setThemeMode(ThemeMode.AUTO).
            setLightModeColors(getColors()).
            setDarkModeColors(getColors()).
            setRegularFont(R.font.open_sans_regular).
            setBoldFont(R.font.luckiest_guy).build()
  )