UI Customization for Mobile Android

Introduction

UI Customization in Recent Release

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 details how to utilize various configuration options for text styles and colors on Android.

Configuration

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) containing the properties for setting your styles.
3. When calling the startChoice method, include a new parameter 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.

Example:

ChoiceCmp.startChoice(
    app = application,
    packageId = packageId,
    pCode = <YOUR PCODE>,
    callback= choiceCmpCallback,
    resources = ChoiceStyleResources(styleId = R.raw.choice_style_sheet),
)

ChoiceCmp.startChoice( 
       this, 
       "packageId", 
       " <YOUR PCODE>", 
       this, 
       new ChoiceStylesResources(R.raw.choice_style_sheet, 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:

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:

Here 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(
        styleId = R.raw.choice_style_sheet,
        boldFont = R.font.bold_font_name,
        regularFont = R.font.regular_name
    ),
)

ChoiceCmp.startChoice( 
        this, 
        "packageId", 
        " <YOUR PCODE>", 
        this, 
        new ChoiceStylesResources(R.raw.choice_style_sheet, 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"
}