We have UI customization capabilities with our Choice mobile SDK. This empowers developers to tailor color schemes and font styles of all UI components within the Choice Mobile CMP, ensuring seamless integration with the host application's UI.
This section guides leveraging various configuration options for text styles and colors.
Begin by adding the file ChoiceStyleSheet.json to your project. Place it in the root directory of your application project (e.g., sampleCmpApp/ChoiceStyleSheet.json). For your convenience, a template ChoiceStyleSheet.json is provided at the end of this document.
Note that customization of UI text styles and colors must be performed exclusively through the ChoiceStyleSheet.json file and cannot be configured within the Choice portal.
Within your project’s ChoiceStyleSheet.json file you 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 |
You have the option to customize the fonts utilized in the Choice CMP. By default, the OS default font is applied. To configure custom fonts, it's essential that the host application supports their integration. For more information, see Adding a Custom Font to Your App.
Following the setup, you can include the font names in the same ChoiceStyleSheet.json file using the following keys::
| Property name | Description |
|---|---|
| regularFont | Name of the font used for the CMP |
| boldFont | Name of the bold font used for the CMP |
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.
Example/Template ChoiceStyleSheet.json file:
Support Center
{
"regularFont": "OpenSans",
"boldFont": "LuckiestGuy-Regular",
"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"
}
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.