Emoji and Stickers

Users can send emoji and stickers via the input area in IMKit. By tapping the emoji (☺) button in the input bar, the emoticon panel expands. Sent emoticons will appear in the message list component of the chat UI.

tip

The default emoticon panel in IMKit only includes emoji. The sticker pack shown in the screenshot requires integration of the rcsticker library. Custom emoticons are supported.

Emoji Symbols

The default emoticon panel in IMKit displays built-in emoji symbols. Users can tap to send them.

Supporting Modern Emoji (Emoji 13.1+)

tip

IMKit supports RC's emoji module starting from v5.2.2.

As emoji usage grows across apps, Unicode updates its standard emoji set annually. Per Android's emoji policy:

• Apps running on Android 12+ using default Android emoji (without custom implementations) automatically support the latest Unicode emoji.

• For Android 11 and below, devices with properly installed Google Play Services (with internet access) can automatically display Emoji 13.1 or newer symbols.

However, most Chinese smartphones lack Google Play Services and cannot download emoji fonts due to network restrictions. To display modern emoji on Android 11 and below, apps need to bundle emoji fonts.

To simplify adaptation, RC provides an emoji module. Simply integrate it to support new emoji—no additional code required.

tip

Since current emoji fonts exceed 10MB, evaluate whether integration suits your needs.

    // If your androidx.appcompat:appcompat dependency is v1.4.0+, only add:
    implementation 'cn.rongcloud.sdk:emoji-compat:5.2.2'

    // For androidx.appcompat:appcompat below v1.4.0, add both:
    implementation 'cn.rongcloud.sdk:emoji-compat:5.2.2'
    implementation "androidx.emoji2:emoji2:1.1.0"

Disabling Built-in Emoji

tip

Available since SDK v5.2.3.

When users tap a conversation in the list, the SDK automatically navigates to RongConversationActivity with built-in emoji. To hide RC's default emoji, manually navigate to the chat UI while configuring to disable system emoji. This removes the emoji tab from the panel.

Interface

RouteUtils.routeToConversationActivity(context, conversationIdentifier, disableSystemEmoji, bundle)

Parameters

Parameter	Type	Description
context	Context	Activity context
conversationIdentifier	ConversationIdentifier	Conversation type. targetId represents the conversation ID—user ID for one-to-one chat, group ID for group chat.
disableSystemEmoji	Boolean	Whether to hide SDK's built-in emoji. true hides them, false shows them.
bundle	Bundle	Extended parameters

Sample Code

String targetId = "userId";
ConversationIdentifier conversationIdentifier = new ConversationIdentifier(Conversation.ConversationType.PRIVATE, targetId);
Boolean disableSystemEmoji = true;

RouteUtils.routeToConversationActivity(context, conversationIdentifier, disableSystemEmoji, bundle)

Stickers

IMKit's emoticon panel supports stickers. You can integrate RC's rcsticker library or add custom stickers.

Integrating RC Stickers

IMKit can integrate the rcsticker library, which includes a "Hi Leopard" sticker pack.

1. Download IMKit source code, then copy the rcsticker directory to your project.

2. Add this configuration to settings.gradle in your project root:

   include ':rcsticker'

3. Add this dependency in your app's build.gradle:

   implementation project(path: ':rcsticker')

After integration, the StickerExtensionModule adds an RC sticker tab to the emoticon panel. Tap it once to download stickers. Upon completion, all stickers will display in the panel.

Custom Stickers

tip

Custom emoticon resource codes must not conflict with those in rc_emoji.xml.

The StickerExtensionModule in IMKit's rcsticker library implements the IExtensionModule interface. Its getEmoticonTabs method adds custom sticker pages (IEmoticonTab instances) to the extension panel.

To add custom stickers, choose either approach:

• Implement IExtensionModule and its getPluginModules() to add IEmoticonTab instances (described below).
• Extend DefaultExtensionConfig to create custom panel configurations, then override getPluginModules().

Here's how to implement IExtensionModule for custom stickers:

1. Create MyEmoticonTab implementing IEmoticonTab.

   public class MyEmoticonTab implements IEmoticonTab {
   
       public MyEmoticonTab() {
       }
       @Override
       public Drawable obtainTabDrawable(final Context context) {
           return context.getResources().getDrawable(R.drawable.u1f603);
       }
   
       @Override
       public View obtainTabPager(Context context) {
           //See Step 2
           return initView(context);
       }
       @Override
       public void onTableSelected(int i) {
       }
   
      @Override
       public LiveData<String> getEditInfo() {
           return null;
       }
   }

2. In obtainTabPager, add the View to display in the panel. Example:

   public View initView(Context context) {
       View view = LayoutInflater.from(context).inflate(R.layout.view_emoji, null);
       RecyclerView rv = view.findViewById(R.id.recycler_view);
       //LinearLayoutManager handles single-column lists
       GridLayoutManager mLayoutManager = new GridLayoutManager(context, 5, OrientationHelper.VERTICAL, false);
       rv.setLayoutManager(mLayoutManager);
   
       // Google's default item animation for add/remove
       rv.setItemAnimator(new DefaultItemAnimator());
       rv.setHasFixedSize(true);
   
       //Mock data
       ArrayList newsList = new ArrayList<>();
       TypedArray array = context.getResources().obtainTypedArray(context.getResources().getIdentifier("rc_emoji_res", "array", context.getPackageName()));
       int i = -1;
       while (++i < array.length()) {
           newsList.add(array.getResourceId(i, -1));
       }
       adapter = new NewsAdapter(newsList);
       rv.setAdapter(adapter);
       return view;
       }

3. Create MyEmoticonTabExtModule implementing IExtensionModule. Return your sticker page list via getEmoticonTabs(). Reference IMKit's IExtensionModule.java and other implementations.

   public class MyEmoticonTabExtModule implements IExtensionModule {
       @Override
       public void onInit(Context context, String appKey) {
   
       }
   
       @Override
       public void onAttachedToExtension(Fragment fragment, RongExtension extension) {
   
       }
   
       @Override
       public void onDetachedFromExtension() {
   
       }
   
       @Override
       public void onReceivedMessage(Message message) {
   
       }
   
       @Override
       public List<IPluginModule> getPluginModules(Conversation.ConversationType conversationType) {
           return null;
       }
   
       @Override
       public List<IEmoticonTab> getEmoticonTabs() {
           List<IEmoticonTab> emoticonTabs = new ArrayList<>();
           emoticonTabs.add(myEmoticonTab);
           return emoticonTabs;
       }
   
       @Override
       public void onDisconnect() {
   
       }
   }

4. After initialization but before entering the chat UI, register your MyExtensionModule with IMKit's input area (RongExtension) via RongExtensionManager.

   RongExtensionManager.getInstance().registerExtensionModule(new MyExtensionModule());

Hiding the Emoticon Panel Entry

tip

Available since IMKit SDK v5.3.2.

When your app doesn't need emoticon input, hide the emoji button in the input bar to prevent users from opening the panel. See Input Area for details.