In different mobile applications, there are different design styles, such as Title Bar style, Button style. To better adapt to the style of your application, ZOLOZ supports simple UI customization in terms of the color and copy of the specified components.

About the task

This task demonstrates how to customize the UI of the ZOLOZ products that are applied in the client mode.

Procedure

1. Configure UI in the ZOLOZ portal

1. Log in to the ZOLOZ portal with your username and password.
2. Navigate to UI Configuration Page and configure the customized content by using the configuration tool that is provided on this page.
3. When the configuration is completed, click Export and save the configuration file to your local workspace.

2. Start the SDK with the configuration file

The configuration file that is generated in Step 1 must be integrated with the ZOLOZ SDK. Both the Android and iOS operation systems are supported. The following section demonstrates how to start the SDK with the configuration file for the two operation systems.

Note: If you are not the client developer, send the configuration file to your client developer.

a. Put the configuration file into your project

Put the configuration file into the project directory that your application can access when it is running. Usually, for Android applications, the file is put into the assets directory; for iOS applications, the file is put into MainBundle. You can also put the configuration file to the CDN server, and download it before starting the ZOLOZ SDK.

b. Set the configuration file path in ZLZRequest

To start the ZOLOZ SDK with the configuration file, specify the configuration file path information in the ZLZRequest object. For Android applications, specify the configuration file path for the CHAMELEON_CONFIG_PATH parameter; for iOS applications, specify the configuration file path for the kZLZChameleonConfigKey parameter.

The following two samples show how to add a configuration file named UIConfig.zip to the ZLZRequest object for Android and iOS applications separately.

Sample 1: for Android applications

ZLZRequest request = new ZLZRequest();
request.bizConfig = new HashMap<>();
// Omit other configurations
// add configuration file path to bizConfig.
request.bizConfig.put(ZLZConstants.CHAMELEON_CONFIG_PATH, "UIConfig.zip");
return request;

Sample 2: for iOS applications

NSMutableDictionary *bizConfig = [NSMutableDictionary dictionary];
// Omit other configurations
// add configuration file path to bizConfig.
NSString* path = [[NSBundle mainBundle] pathForResource:@"UIConfig" ofType:@"zip"];
[bizConfig setObject:path forKey:kZLZChameleonConfigKey]
ZLZRequest *request = [[ZLZRequest alloc] initWithzlzConfig:clientConfig bizConfig:bizConfig];

For more information about how to construct the ZLZRequest object, see Client-mode Product Integration.

c. (Optional) Configure multi-language copies

In the UI Configuration Page，you can also configure multi-language copies. To enable the ZOLOZ SDK to use the copy in one of the configured language when it starts, specify the language information for the related parameter in the ZLZRequest object. The ZOLOZ SDK then reads the configuration file for the copy in the specified language and renders it in your application.

For example, if you add a language Chinese(Simplified)(zh-CN) in UI Configuration Page and want to enable the SDK to use the copy of this language in your Android application, you need to specify the value of "zh-CN" for the LOCALE parameter as Sample 3 shows below. If you develop an iOS application, specify the value for the kZLZLocaleKey parameter as Sample 4 shows.

The value of the LOCALE/kZLZLocaleKey parameter must be in the format of language-Country. For how to set the value for each language option provided in UI Configuration Page, see Locale related parameter value format.

Note:

• If you don't configure the LOCALE/kZLZLocaleKey parameter, the ZOLOZ SDK uses the system language to match with the languages configured in UI Configuration Page.
• If neither the language specified to the LOCALE/kZLZLocaleKey parameter nor the system language matches with the languages configured in UI Configuration Page, the ZOLOZ SDK directly uses its built-in copy.
  

Sample 3: for Android applications

ZLZRequest request = new ZLZRequest();
request.bizConfig = new HashMap<>();
// Omit other configurations
// add LOCALE to bizConfig.
request.bizConfig.put(ZLZConstants.LOCALE, "zh-CN");
return request;

Sample 4: for iOS applications

NSMutableDictionary *bizConfig = [NSMutableDictionary dictionary];
// Omit other configurations
// add LOCALE to bizConfig.
[bizConfig setObject:@"zh-CN" forKey:kZLZLocaleKey]
ZLZRequest *request = [[ZLZRequest alloc] initWithzlzConfig:clientConfig bizConfig:bizConfig];