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 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 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

You can pass stylesheet for setting themes in light and dark mode. If only one stylesheet is passed in AUTO themeMode, choice sdk will use the same stylesheet for both light and dark mode. To create your theme, follow the steps:

  1. Create a raw folder within the res directory of your project if it doesn't exist yet.
  2. Inside the raw folder, add a JSON file (e.g., choice_style_sheet.json) and/or another JSON file(e.g. choice_style_sheet_dark.json) containing the properties for setting your styles for light and/or dark mode respectively.
  3. When calling the startChoice method, include new parameters named resources. This should be an object of type ChoiceStyleResources, and set its styleId property with the ID of the file you added in the raw folder for light style sheet and styleIdNight for dark style sheet.

Example:

Kotlin

ChoiceCmp.startChoice( 
  app = application, 
  packageId = packageId,  
  pCode = "your pcode",  
  callback= choiceCmpCallback,  
  resources = ChoiceStyleResources(themeMode = ThemeMode.AUTO, 
                                   styleId = R.raw.choice_style_sheet,
                                   styleIdNight = R.raw.choice_style_sheet_dark),  
)

Java

ChoiceCmp.startChoice( 
         this, 
         "packageId", 
         "your pcode", 
         this, 
         new ChoiceStylesResources(ThemeMode.AUTO, R.raw.choice_style_sheet, R.raw.choice_style_sheet_dark, null, null) 
  );

Color customization

Within the file you added to the raw folder, define the color as follows. The format is “color name”:”color hex value”, example: “dividerColor”:”#ff0000”.

The following components can be configured:

Property name Description
dividerColor Page divider color
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
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. 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 ChoiceStyleResources class in the CMP:
Property name Description
regularFont Name of the font used for the CMP
boldFont Name of the bold font used for the CMP

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

Kotlin

ChoiceCmp.startChoice( 
   app = application,  
   packageId = packageId, 
   pCode = "your pcode", 
   callback= choiceCmpCallback, 
   resources = ChoiceStyleResources(
      themeMode = ThemeMode.AUTO,
      styleId = R.raw.choice_style_sheet,   //for light theme
      styleIdNight = R.raw.choice_style_sheet_dark,    //for dark theme
      boldFont = R.font.bold_font_name,  
      regularFont = R.font.regular_name  
), 
 )

Java

ChoiceCmp.startChoice( 
          this, 
          "packageId", 
          "your pcode", 
          this, 
          new ChoiceStylesResources(ThemeMode.AUTO, R.raw.choice_style_sheet, R.raw.choice_style_sheet_dark, R.font.bold_font_name, R.font.regular_name)   
);

Example/Template styles json file:

{  
    "dividerColor": "#C6C6C8", 
    "tabBackgroundColor": "#CCBBFF", 
    "tabForegroundColor": "#8E8E93", 
    "tabTextColor": "#000000", 
    "searchBarBackgroundColor": "#CCBBFF", 
    "searchBarForegroundColor": "#000000", 
    "infoButtonForegroundColor": "#007AFF", 
    "infoScreenBackgroundColor": "#FFFFFF", 
    "infoScreenForegroundColor": "#000000", 
    "toggleActiveColor": "#34C759", 
    "toggleInactiveColor": "#AEAEB2", 
    "globalBackgroundColor": "FFFFFF", 
    "globalTextColor": "#000000", 
    "titleTextColor": "#000000", 
    "bodyTextColor": "#000000", 
    "listTextColor": "#000000", 
    "menuTextColor": "#000000", 
    "linkTextColor": "#007AFF", 
    "buttonTextColor": "#FFFFFF", 
    "buttonDisabledTextColor": "#8E8E93", 
    "buttonBackgroundColor": "#007AFF", 
    "buttonDisabledBackgroundColor": "#D1D1D6" 
}

On This Page

Last Updated on: 25 Jan, 2024