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 using UI customization on Android you will need first create the raw folder on the res directory inside your project if you haven't created yet, after that add a json file to the raw folder this file will contain the properties that we will use to set your styles you can named as you wish for example choice_style_sheet.json, once the file is added you will have to add a new parameter to the startChoice method call named resources which is an object of type ChoiceStyleResources and set its styleId property with the id of the file that you just add in the raw folder example:
ChoiceCmp.startChoice(
app = application,
packageId = packageId,
pCode = <YOUR PCODE>,
callback= choiceCmpCallback,
resources = ChoiceStyleResources(styleId = R.raw.choice_style_sheet),
)
Color customization
Within the file that you added into 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
You can also customize the fonts used in the Choice CMP to do that you will need to create the font folder on the res directory of your project if you haven't created yet and then add the corresponding font files that you want to use and the their ids to the resources parameter on the startChoice call, the following table describes the two kind of fonts that we support and their property name on ChoiceStyleResources class on the CMP:
|
Property name |
Description |
|
regularFont |
Name of the font used for the CMP |
|
boldFont |
Name of the bold font used for the CMP |
This is an example of how the startChoice call will look like when you add the fonts:
ChoiceCmp.startChoice(
app = application,
packageId = packageId,
pCode = <YOUR PCODE>,
callback= choiceCmpCallback,
resources = ChoiceStyleResources(
styleId = R.raw.choice_style_sheet,
boldFont = R.font.bold_font_name,
regularFont = 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"
}