tencent cloud

Chat

News and Announcements
Release Notes
Announcements
Product Introduction
Overview
Basic Concepts
Scenarios
Features
Account System
User Profile and Relationship Chain
Message Management
Group Related
Official Account
Audio/Video Call
Use Limits
Purchase Guide
Billing Overview
Pricing
Purchase Instructions
Renewal Guide
Service Suspension Explanation
Refund Policy
Development Guidelines
Demo Zone
Activate Service
Free Demos
Quick Run
Download
SDK and Demo Source Code
Update Log
Chat Interaction (UI Included)
TUIKit Introduction
Getting Started
Full-feature Integration
Single-function Integration
Build with AI
Build Basic Interfaces
More Features
Customizing Appearance
Internationalization
Push Service
Overview
Noun explanation
Activate the Service
Quick Start
Manufacturer Channel
Statistics
Troubleshooting Tool
Client APIs
REST API
Push Callback
Advanced Features
Release Notes
Error Codes
FAQS
Desk
Overview
Quick Start
Integration Guide
Admin Operation Manual
Agent Manual
More Practices
Live Streaming Setup Guide
AI Chatbot
Super Large Entertainment and Collaboration Community
Discord Implementation Guide
How to Integrate Chat into Games
WhatsApp Channel-style Official Account Integration Solution
Send Red Packet
Firewall Restrictions
No UI Integration
Quick Start
SDK Integration
Initialization
Login and Logout
Message
Conversation
Group
Community Topic
User Profile and Relationship Chain
Offline Push
Cloud Search
Local Search
Official Channel Management
Client APIs
JavaScript
Android
iOS & macOS
Swift
Flutter
Electron
Unity
React Native
C APIs
C++
Server APIs
Secure authentication with UserSig
RESTful APIs
Webhooks
Console Guide
New Console Introduction
Creating and Upgrading an Application
Basic Configuration
Feature Configuration
Account Management
Group Management
Official Channel Management
Webhook Configuration
Usage
Viewing Guide for Resource Packages
Real-Time Monitor
Auxiliary Development Tools
Access Management
Advanced Features
FAQs
uni-app FAQs
Purchase
SDK
Account Authentication
User Profile and Relationship Chain
Message
Group
Audio-Video Group
Nickname and Profile Photo
Security Compliance Certification
Service Level Agreement
Security Compliance Certification
Chat Policies
Privacy Policy
Data Privacy and Security Agreement
Migration
Migration Solutions
Migration Solutions Lite
Error Codes
Contact Us

Android

PDF
Focus Mode
Font Size
Last updated: 2024-05-20 15:03:56
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();
// The number of emojis displayed per row on the **More emojis** input UI
programmerGroup.setPageColumnCount(5);
// The thumbnail of the sticker
programmerGroup.setFaceGroupIconUrl("file:///android_asset/programmer/programmer00@2x.png");
// The name of the sticker
programmerGroup.setGroupName("programmer");
for (int i = 0; i < 16; i++) {
CustomFace customFace = new CustomFace();
String index = "" + i;
if (i < 10) {
index = "0" + i;
}
// Put emojis in the `assets` directory. If the sandbox path or network path is used, the `setFaceUrl` method can be used.
customFace.setAssetPath("programmer/programmer" + index + "@2x.png");
// The `key` of the emoji
String faceKey = "programmer" + index;
customFace.setFaceKey(faceKey);
// The width of the emoji on the **More emojis** input UI
customFace.setWidth(170);
// The height of the emoji on the **More emojis** input UI
customFace.setHeight(170);
programmerGroup.addFace(faceKey, customFace);
}
// Register the sticker in `FaceManager`. `FaceGroupID` is `1`.
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();
}
}
}

// load faceUrl into view

Rendering effect

The rendering effect is as shown below:





Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback