Customization for Unity 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 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

Property name Description
dividerColor

Color of the dividers between list items and the border color of the description items

tabBackgroundColor Tab background color (for examples the vendor tabs)
tabForegroundColor Tab foreground color (for examples the vendor tabs)
searchBarBackgroundColor Search field background color
searchBarForegroundColor Search field foreground color
toggleActiveColor Toggle button active color
toggleInactiveColor Toggle button in-active color
globalBackgroundColor Main (or global) background color
titleTextColor Title text color
bodyTextColor Body text color
tabTextColor

Color of the items in the toolbar, such as the title, back button, and menu button

menuTextColor

Text color of the menu items (example: menu items in consent and legitimate interest tabs)

linkTextColor

Link text color (hyperlinks and links between the different pages)

buttonTextColorButton text color Button text color
buttonDisabledTextColor Button text color in disabled state
buttonBackgroundColor Button background color
buttonDisabledBackgroundColor Button background color in disabled state

iOS

Property name Description
dividerColor Page divider color
tabBackgroundColor Tab background color (for example, the vendor tabs)
tabForegroundColor Tab foreground color (for example, the vendor tabs)
searchBarBackgroundColor Search field background color
searchBarForegroundColor Search field foreground color
infoButtonForegroundColor Information (i) button foreground color
infoScreenBackgroundColor Information screen background color
infoScreenForegroundColor Information screen foreground color
toggleActiveColor Toggle button active color
toggleInactiveColor Toggle button in-active color
globalTextColor Main (global) text color
globalBackgroundColor Main (or global) background color
titleTextColor Title text color
bodyTextColor Body text color
listTextColor Color of the text in the lists (like vendor list)
tabTextColor Tab text color (for example the vendor tabs)
menuTextColor Menu text color (example: ???)
linkTextColor Link text color (hyperlinks and links between the different pages)
buttonTextColorButton text color Button text color
buttonDisabledTextColor Button text color in disabled state
buttonBackgroundColor Button background color
buttonDisabledBackgroundColor Button background color in disabled state

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

Prerequisites 

  • Android SDK should be in place.
  • ANDROID_HOME should be set in environment variable. Refer this to know how to set it in mac and this for Windows.
  • Prerequisites needed for gradle can be referred here.
  • Requires Java 8.
  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.

Note

To avoid any confusions, keep the font filename same as the font itself for e.g if your font is CustomFont-Light, then keep the filename as CustomFont-Light.ttf

On This Page

Last Updated on: 19 Jul, 2024