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.
You can control light/dark mode by using ThemeMode while calling startChoice
method. It can take three values:
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:
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:
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),
)
ChoiceCmp.startChoice(
this,
"packageId",
"your pcode",
this,
new ChoiceStylesResources(ThemeMode.AUTO, R.raw.choice_style_sheet, R.raw.choice_style_sheet_dark, null, null)
);
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 |
Color of the dividers between list items and the border color of the description items |
tabBackgroundColor |
Tab background 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) |
buttonTextColor |
Button text color |
buttonDisabledTextColor |
Button text color in disabled state |
buttonBackgroundColor |
Button background color |
buttonDisabledBackgroundColor |
Button background color in disabled state |
If you wish to customize the fonts used in the Choice CMP, follow the instructions below:
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:
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
),
)
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",
"tabTextColor": "#000000",
"searchBarBackgroundColor": "#CCBBFF",
"searchBarForegroundColor": "#000000",
"toggleActiveColor": "#34C759",
"toggleInactiveColor": "#AEAEB2",
"globalBackgroundColor": "FFFFFF",
"titleTextColor": "#000000",
"bodyTextColor": "#000000",
"menuTextColor": "#000000",
"linkTextColor": "#007AFF",
"buttonTextColor": "#FFFFFF",
"buttonDisabledTextColor": "#8E8E93",
"buttonBackgroundColor": "#007AFF",
"buttonDisabledBackgroundColor": "#D1D1D6"
}
By installing this SDK update, you agree that your Children Privacy Compliance setting remains accurate or that you will update that setting, whenever there is a change in your app's audience. You may update the app's Children Privacy Compliance settings at https://publisher.inmobi.com/my-inventory/app-and-placements.