Customize UI in client-mode products
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.
#1. Configure UI in the ZOLOZ portal
#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
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
Sample 2: for iOS applications
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
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.
- If you don't configure the
kZLZLocaleKeyparameter, the ZOLOZ SDK uses the system language to match with the languages configured in UI Configuration Page.
- If neither the language specified to the
kZLZLocaleKeyparameter nor the system language matches with the languages configured in UI Configuration Page, the ZOLOZ SDK directly uses its built-in copy.