With our recent release (iOS v1005 and Android v2007) we have added UI customization to our Choice mobile SDK. The UI customization allows the developer to customize color and font styles for all the UI components used in the Choice Mobile CMP, allowing the developer to match the UI style of the host application.
This section shows how to use the different configuration options for text styles and colors.
To start you will need to add the file ChoiceStyleSheet.json to your project (root of your application project. Example: sampleCmpApp/ChoiceStyleSheet.json). A template ChoiceStyleSheet.json has been attached at the end of this document. Note: the UI text styles and color customization must be configured using the ChoiceStyleSheet.json and cannot be configured within the Choice portal.
Color customization
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 |
Fonts customization
You can also customize the fonts used in the Choice CMP. By default the OS default font is used. To configure custom fonts it requires the host application to accept custom fonts, for this, please check. For iOS please consulted: Adding a Custom Font to Your App on Apple developers portal. For Android …
After that, you can add the font names on same json file ChoiceStyleSheet.json with 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 |
Check the following section to get the right name to use in the customization JSON file: Use Your Custom Font in Source Code
Example/Template ChoiceStyleSheet.json file:
{
"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"
}