Font and Color Customization for Apps via Code

Android

Customization for Android apps can be done both from the Themes tab on the InMobi CMP portal and in the code of the SDK. For steps to customise color and font through the InMobi CMP portal, see Create App Theme.

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

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 customisation

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 customisation

If you wish to customise 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()
  )

iOS

Customisation for iOS apps can be done both from the Themes tab on the InMobi CMP portal and in the code of the SDK.  For steps to customise color and font through the InMobi CMP portal, see Create App Theme.

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

Configuration

You can control light/dark mode by using  preferredThemeMode while calling ChoiceStyle 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

To customize the UI text styles and colors according to your application, follow these steps:

1. Add dark and light mode colors by leveraging the lightModeColors and darkModeColors respectively In the ChoiceStyle API.
2. Update Configuration in Code: Modify the code where the stylesheet is applied to dynamically select between light and dark styles based on the user's interface mode.

Example:

// Start ChoiceCMP

let style = ChoiceStyle(preferredThemeMode: .auto, lightModeColors: defaultColors, darkModeColors: defaultColors)

ChoiceCmp.shared.startChoice(pcode: "<YOUR-PCODE", delegate: self, gbcDelegate: self, style: style)

ChoiceStyle *style = [[ChoiceStyle alloc] initWithPreferredThemeMode:CMPUserInterfaceStyleAuto lightThemeStyleSheet:@"LightStyleSheet" darkThemeStyleSheet:@"DarkStyleSheet"]; 
[ChoiceCmp.shared startChoiceWithPcode:@"< YOUR PCODE >" delegate:self ccpaDelegate:self shouldDisplayIDFA:true style:style]; 

Color Customisation

The following components can be configured:

Fonts Customisation

There is an option to customise the fonts utilized in the InMobi CMP. By default, the OS default font is applied. To configure custom fonts, the host application must support their integration. For more information, see Adding a Custom Font to Your App

To find the correct names for utilizing custom fonts in your source code, please refer to the dedicated section: Use Your Custom Font in Source Code.

You can leverage boldFont parameter provided in ChoiceStyle to set the font.

let boldFont = ChoiceFont()

boldFont.fontName = "<FONT NAME>"

 let style = ChoiceStyle(preferredThemeMode: .auto, lightModeColors: defaultColors, darkModeColors: defaultColors, boldFont: boldFont)

ChoiceCmp.shared.startChoice(pcode: "YOUR PCODE", delegate: self, gbcDelegate: self, style: style)

Example

//
//  AppDelegate.swift
//  Example
//
//  Copyright © 2024 InMobi. All rights reserved.
// 

import UIKit
import InMobiCMP 

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, ChoiceCmpDelegate, CCPADelegate { 

    func application(_ application: UIApplication,   didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
   startChoice()
        return true
    } 

   func startChoice() {
        // Start ChoiceCMP
        let boldFont = ChoiceFont()
        boldFont.fontName = "FONT NAME"
        let style = ChoiceStyle(preferredThemeMode: .auto, lightModeColors: defaultColors, darkModeColors: defaultColors, boldFont: boldFont)
        ChoiceCmp.shared.startChoice(pcode: "YOUR-PCODE", delegate: self, gbcDelegate: self, style: style)
    } 

    var defaultColors : ChoiceColor {
        let choiceColor = ChoiceColor()
        choiceColor.dividerColor = "#CCBBFF"
        choiceColor.tabBackgroundColor = "#BAABEA"
        choiceColor.tabForegroundColor = "#8844FF"
        choiceColor.searchBarBackgroundColor = "#CCBBFF"
        choiceColor.searchBarForegroundColor = "#BAABEA"
        choiceColor.infoButtonForegroundColor = "#8844FF"
        choiceColor.infoScreenBackgroundColor = "#CCBBFF"
        choiceColor.infoScreenForegroundColor = "#5533BB"
        choiceColor.toggleActiveColor = "#8844FF"
        choiceColor.toggleInactiveColor = "#CCBBFF"
        choiceColor.globalTextColor = "#5533BB"
        choiceColor.globalBackgroundColor = "#EEDDFF"
        choiceColor.titleTextColor = "#5533BB"
        choiceColor.bodyTextColor = "#5533BB"
        choiceColor.listTextColor = "#5533BB"
        choiceColor.tabTextColor = "#5533BB"
        choiceColor.menuTextColor = "#5533BB"
        choiceColor.linkTextColor = "#8844FF"
        choiceColor.buttonTextColor = "#BAABEA"
        choiceColor.buttonDisabledTextColor = "#8844FF"
        choiceColor.buttonBackgroundColor = "#8844FF"
        choiceColor.buttonDisabledBackgroundColor = "#CCBBFF"
        return choiceColor
    }
}

Unity

Customization for Unity apps is not done through the Themes tab and must be done directly in the code of the SDK. We recommend following these instructions at a later stage, once you have downloaded our Unity plugin.

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

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

You can pass the ChoiceColor model for setting 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. You have to create a ChoiceColor model and set all the necessary colors to that model.
2. Create the ChoiceStyle object and set the appropriate ChoiceColor object for light and dark mode resources.
3. Pass the ChoiceStyle object in the startChoice method.

Example

public void StartChoice()
{
  ChoiceCMP.StartChoice(pCode, getChoiceStyle(), true);
}

private ChoiceStyle getChoiceStyle() {
  ChoiceStyle choiceStyle = new ChoiceStyle();
  choiceStyle.themeMode = ThemeMode.AUTO;
  choiceStyle.lightModeColors = getColors();
  choiceStyle.darkModeColors = getColors();
  return choiceStyle;
}

private ChoiceColor getColors() {
  ChoiceColor choiceColor = new ChoiceColor();
  choiceColor.dividerColor = "#CCBBFF";
  choiceColor.tabBackgroundColor = "#BAABEA";
  choiceColor.tabForegroundColor = "#8844FF";
  choiceColor.searchBarBackgroundColor = "#CCBBFF";
  choiceColor.searchBarForegroundColor = "#BAABEA";
  choiceColor.infoButtonForegroundColor = "#8844FF";
  choiceColor.infoScreenBackgroundColor = "#CCBBFF";
  choiceColor.infoScreenForegroundColor = "#5533BB";
  choiceColor.toggleActiveColor = "#8844FF";
  choiceColor.toggleInactiveColor = "#CCBBFF";
  choiceColor.globalTextColor = "#5533BB";
  choiceColor.globalBackgroundColor = "#EEDDFF";
  choiceColor.titleTextColor = "#5533BB";
  choiceColor.bodyTextColor = "#5533BB";
  choiceColor.listTextColor = "#5533BB";
  choiceColor.tabTextColor = "#5533BB";
  choiceColor.menuTextColor = "#5533BB";
  choiceColor.linkTextColor = "#8844FF";
  choiceColor.buttonTextColor = "#BAABEA";
  choiceColor.buttonDisabledTextColor = "#8844FF";
  choiceColor.buttonBackgroundColor = "#8844FF";
  choiceColor.buttonDisabledBackgroundColor = "#CCBBFF";
  return choiceColor;
}

The following components can be configured:

Android

iOS

Fonts Customization

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

1. Attach the font to the project. It differs for Android and iOS. The steps to do that will be explained below.
2. Pass the font names in the ChoiceStyle object as a param.

 Example

ChoiceStyle choiceStyle = new ChoiceStyle();
choiceStyle.themeMode = ThemeMode.AUTO;
choiceStyle.lightModeColors = getColors();
choiceStyle.darkModeColors = getColors();
choiceStyle.boldFont = "Luckiest Guy";
choiceStyle.regularFont = "Luckiest Guy";
return choiceStyle;

To attach the font files to the project, follow the steps below:

Android

1. Download the Android project from here.
2. Add the respective font files that you want to use to the font folder inside the CMPAssets/cmpassets/src/main/res directory of the downloaded project.
3. Open the terminal, navigate to the downloaded project and run this command sh gradlew clean build (MAC) or gradlew.bat clean build (Windows).
4. Once it is done, open the CMPAssets/cmpassets/build/outputs/aar folder and copy the cmpassets-release.aar file.
5. Paste it inside the InMobi/Choice/Plugins/Android folder in your unity project and make sure you check the Android option in the platforms list.

If you are facing any issue like "You have not accepted the license agreements of the following SDK components”, then follow the steps below:

1. Download cmdline-tools from here. If you already have command line tools installed within the android sdk, you can use that too.
2. In terminal, navigate to the downloaded folder.
3. Run “yes | sh bin/sdkmanager --sdk_root=$ANDROID_HOME --licenses” for mac and “cmd.exe bin\sdkmanager.bat --sdk_root=%ANDROID_HOME% --licenses" for Windows.
4. Restart the terminal and follow the build process again.

iOS

1. Integrate the InMobiCMP iOS SDK in your Xcode project.
2. Add the respective font files that you want to use to your Xcode project and add it to your app target.
3. Add the font in the info.plist of your app target.
4. For further information on how to integrate custom fonts in Xcode, visit here.