TUIChat allows for adding custom emojis.
Note:
TUIChat accommodates the inclusion of images in these formats as custom emoticons: JPEG, JPG, PNG, BMP. GIF format is also supported, which starts from version 7.8.
Adding a Custom Emoji
TUIChat allows for adding custom emojis from the sandbox, assets
directory, and network paths.
The following takes adding the programmer
emoji from the assets
directory as an example.
Preparing sticker resources
Create the assets
folder in the src/main
folder of the app and put the emoji folder in the assets
directory:
Adding a sticker
When the application starts, call the API to add a custom emoji to FaceManager
:
Each sticker has a unique faceGroupID
, and each emoji in the sticker has a faceKey
. After the sticker is added to FaceManager
, stickers will be sorted by faceGroupID
on the More emojis input UI.
public class DemoApplication extends Application {
@Override
public void onCreate() {
FaceGroup programmerGroup = new FaceGroup();
programmerGroup.setPageColumnCount(5);
programmerGroup.setFaceGroupIconUrl("file:///android_asset/programmer/programmer00@2x.png");
programmerGroup.setGroupName("programmer");
for (int i = 0; i < 16; i++) {
CustomFace customFace = new CustomFace();
String index = "" + i;
if (i < 10) {
index = "0" + i;
}
customFace.setAssetPath("programmer/programmer" + index + "@2x.png");
String faceKey = "programmer" + index;
customFace.setFaceKey(faceKey);
customFace.setWidth(170);
customFace.setHeight(170);
programmerGroup.addFace(faceKey, customFace);
}
FaceManager.addFaceGroup(1, programmerGroup);
}
}
Effect after successful addition
The sticker added successfully is displayed on the More emojis input UI on the chat UI.
Caution
faceGroupID
is an integer greater than 0 and must be unique.
Sending a Custom Emoji
After a custom emoji is added, it will be displayed on the More emojis input UI and can be sent with a click.
An emoji message can also be generated by using the code and then sent, for example:
V2TIMMessage v2TIMMessage = V2TIMManager.getMessageManager()
.createFaceMessage(faceGroupID, faceKey.getBytes());
V2TIMManager.getMessageManager().sendMessage(v2TIMMessage,
userID,
null,
V2TIMMessage.V2TIM_PRIORITY_DEFAULT,
false,
null,
new V2TIMSendCallback<V2TIMMessage>() {...}
Parsing a Custom Emoji
After a custom emoji message is received, TUIKit will parse the V2TIMMessage
of the IM SDK as the FaceMessageBean
type. FaceMessageBean
can be used to get the faceGroupID
and faceKey
of the custom emoji.
TUIMessageBean messageBean = ChatMessageParser.parseMessage(v2TIMMessage);
FaceMessageBean faceMessageBean = null;
if (messageBean instanceof FaceMessageBean) {
faceMessageBean = (FaceMessageBean) messageBean;
}
if (faceMessageBean != null) {
int faceGroupID = faceMessageBean.getIndex();
String faceKey = null;
if (faceMessageBean.getData() != null) {
faceKey = new String(faceMessageBean.getData());
}
}
Rendering a Custom Emoji
Calling an existing API for rendering
After the faceGroupID
and faceKey
of a custom emoji are obtained, the loadFace
method of FaceManager
can be called to load them to the imageView
passed in:
FaceManager.loadFace(faceGroupID, faceKey, imageView);
Custom rendering
Also, the faceGroupID
and faceKey
of an emoji can be used to get the real URL of the emoji from FaceManager
for custom rendering, for example:
String faceUrl = "";
List<FaceGroup> faceGroupList = FaceManager.getFaceGroupList();
for(FaceGroup faceGroup : faceGroupList) {
if (faceGroup.getGroupID() == faceGroupID) {
ChatFace face = faceGroup.getFace(faceKey);
if (face != null) {
faceUrl = face.getFaceUrl();
}
}
}
Rendering effect
The rendering effect is as shown below:
Was this page helpful?