Docs Overview/
Custom Avatar UI/

Custom Avatar UI

Demo UI





Using the demo UI

The panel configuration data can be stored anywhere. In the demo, it is in assets. When the panel file is used for the first time, it will be copied to the installation directory.


Mappings between the JSON structures and panel elements:
The items in the JSON file on the left correspond to the top-level menu on the right. clothes corresponds to the first item of the menu.



subTabs on the left corresponds to the second-level menu:



The AvatarData corresponding to the left icon is stored in the resources folder under the material, and the configuration data of the panel displayed on the right is associated with it through the category in the panel data. The SDK will parse the data in the resources folder and put it into the corresponding map, with the key of the map being the value of the category. Therefore, after parsing the panel.json file in the Demo, you can use the method provided by the SDK to obtain the data for association. You can refer to the getAvatarData method in AvatarResManager in the demo, which will parse the panel file and associate it with the attributes returned by the SDK.



Key Classes of the Demo

Path: com.tencent.demo.avater.AvatarResManager.java

1. Load the avatar resources

/**
     * Used to load the avatar resources
     *
     * @param xmagicApi: The `XmagicApi` object.
     * @param avatarResName: The name.
     * @param avatarSaveData: The default configuration of the loading model. If there isn’t a default configuration, pass null.
     */
    public void loadAvatarRes(XmagicApi xmagicApi, String avatarResName, String avatarSaveData)

2. Get the panel data

 /**
     * Get the avatar panel data
     *
     * @param avatarResName: The avatar material name.
     * @param avatarDataCallBack: This API accesses files. The operation is performed in a child thread, and the data obtained is returned in a callback in the main thread.
     *                           The returned data already contains the data in the `resources` folder.
     */
    public void getAvatarData(String avatarResName, String avatarSaveData, LoadAvatarDataCallBack avatarDataCallBack)

3 Get the user’s settings or default settings from the panel data

// Get the user’s settings or the default settings from the panel file
public static List<AvatarData> getUsedAvatarData(List<MainTab> mainTabList)

4. Parse the corresponding avatarData from bindData.

 /**
     * Parse the corresponding avatarData from bindData.
     *
     * @param bindDataList  
     * @return Return the corresponding list of avatarData.
     */
    public static List < AvatarData > getAvatarDataByBindData(Map < String, MainTab > mainTabList, List < BindData > bindDataList, boolean isFromSaveData)

Appendix

This section provides descriptions of fields in MainTab.java,SubTab.java,AvatarItem.java and BindData.java.

MainTab

Field
Type
Required
Description
id
String
Yes
The globally unique identifier of a main menu option.
label
String
No
The Chinese name of a main menu option (this is not displayed in the demo).
labelEn
String
No
The English name of a main menu option (this is not displayed in the demo).
avatarPanelType
Int
Yes
Panel type:
0: Dress-up panel
1: Face customization panel
2: Background panel
3: Action panel
iconUrl
String
Yes
The URL of the icon when not selected.
checkedIconUrl
String
Yes
The URL of the icon when selected.
subTabs
A list of SubTab
Yes
The options of the second-level menu.

SubTab

Field
Type
Required
Description
label
String
Yes
The Chinese name of a second-level menu option.
labelEn
String
Yes
The English name of a second-level menu option.
category
String
Yes
The category of a second-level menu option, which is defined in the com.tencent.xmagic.avatar.AvatarCategory class of the SDK.
type
int
Yes
UI type:
0: Represents the icon type, default value.
1: Represents the slider adjustment type.
bindData
A list of BindData
No
Configuration field for dependent properties. This field can be configured under the Subtab node or the AvatarItem node. Configuring it under the Subtab node means that all items under the Subtab node depend on the properties configured in this binData. Configuring it under the AvatarItem node means that only this item will depend on the configuration data in the binData. For example: There is a dependency between hairstyle and hair color. When modifying the hairstyle, the hair color that the user previously set needs to be used. In this case, this field needs to be set in the hairstyle. For the relationship between dresses and tops/pants, when setting a dress, the tops and pants need to be set to none, otherwise the page display will be abnormal. Therefore, this field can be configured under the dress node, please refer to the AvatarTPose_panel.json in the demo for details. There is a dependency between glasses and lenses, so the corresponding bindData field is configured under each glasses item to associate lens information.
onNoneListener
A list of BindData
No
Field explanation: Used when there is no selection in the items, the configuration information in this field is used. For example: for pants, tops, and dresses, this property is configured in the dress. When the user clicks on the dress, no item in the tops and pants is selected. However, when the customer clicks on the top again, at this time, a default pair of pants needs to be set for the avatar (otherwise the avatar will not have pants), and the default pants configured in this field can be parsed and set. Please refer to AvatarTPose_panel.json in the demo for details.
items
A list of AvatarItem
Yes
A list of AvatarIcon.

AvatarItem

Field
Type
Required
Description
id
String
Yes
The property ID, which corresponds to the ID in AvatarData returned by the SDK.
icon
String
Yes
The URL of the icon or the color in ARGB format (“#FF0085CF”).
type
Int
Yes
The display type. Valid values: AvatarData.TYPE_SLIDER (slider), AvatarData.TYPE_SELECTOR (icon).
selected
boolean
Yes
If type is AvatarData.TYPE_SELECTOR, this field indicates whether the item is selected.
downloadUrl
String
No
The dynamic download address of the configuration file.
category
String
Yes
Same as category in SubTab.
labels
Map<String, String>
No
The Chinese labels on the left of the panel. This field is not empty if type is AvatarData.TYPE_SLIDER.
enLabels
Map<String, String>
No
The English labels on the left of the panel. This field is not empty if type is AvatarData.TYPE_SLIDER.
bindData
A list of BindData
No
Configuration field for dependent properties. This field can be configured under the Subtab node or the AvatarItem node. Configuring it under the Subtab node means that all items under the Subtab node depend on the properties configured in this binData. Configuring it under the AvatarItem node means that only this item will depend on the configuration data in the binData. For example: There is a dependency between hairstyle and hair color. When modifying the hairstyle, the hair color that the user previously set needs to be used. In this case, this field needs to be set in the hairstyle. For the relationship between dresses and tops/pants, when setting a dress, the tops and pants need to be set to none, otherwise the page display will be abnormal. Therefore, this field can be configured under the dress node, please refer to the AvatarTPose_panel.json in the demo for details. There is a dependency between glasses and lenses, so the corresponding bindData field is configured under each glasses item to associate lens information.
avatarData
AvatarData
No
The property operation class defined in the SDK.
animation
AvatarAnimation
No
The property operation class defined in the SDK.

BindData

Field
Type
Required
Description
category
String
Yes
Same as category in SubTab.
id
String
Yes
The ID of each property corresponds to the ID in the AvatarData data returned by the SDK.
firstLevelId
String
Yes
The ID of the top-level category to which this data belongs.
avatarData
AvatarData
Yes
The property operation class defined in the SDK.
isTraverseOnSave
Boolean
Yes
When saving, whether to traverse the data in this bindData depends on the specific situation. In general, it needs to be traversed, except for the hairstyle and hair color configured in the hat, and the hat and hair color configured in the hairstyle, which do not need to be traversed.