Android
UIKit Reactions

Reactions

In a group channel with multiple users, reactions become especially useful as a social interaction tool for uninterrupted engagement while chatting. Sendbird UIKit also supports the reactions feature in the framework. UIKit reactions, which are based on the Sendbird Chat SDK’s reactions feature, provide a default emoji set to suit diverse messaging needs. You can also customize the reactions UI just like the global themes.

Note: Currently, UIKit reactions are only available for group channels. Reactions are not supported for open channels and custom message types different from those provided by UIKit.


Implementation guide for reactions

Once a client app is connected with Sendbird server, the predefined emoji list can be accessed. A combination of the emoji list and reaction information contained within each message completes the look of the reactions UI.

In order to implement reactions, 2 settings need to be checked beforehand.

  • The application settings for reactions
  • The emojis registered in the application

Components

There are 3 ways in which reactions can be expressed by users:

  • Long tap on a message to select an emoji from the Emoji reaction bar
  • Tap on the Add reaction button to select an emoji
  • Tap on an existing emoji reaction in the Emoji reaction box to add a user count of the emoji reaction

ReactionLayout

Emoji reaction bar in Message menu

When a message does not contain any prior reaction data, the only means to add a reaction is by long pressing a message to view the Emoji reaction bar in the Message menu. The bar reveals a list of 5 to 6 emojis for user convenience in the chronological order of when each emoji was registered to Sendbird server. Tapping on the Add reaction button on the right end of the bar reveals the full Emoji list to add different emoji reactions.

If a message already contains reaction data, you can still long press a message to view the Emoji reaction bar. In this case, emoji reactions already added to the message by the current user are indicated with a highlighted background color.

Emoji reaction bar

Add reaction button

Add reaction button can be accessed either in the Emoji reaction box or on the Emoji reaction bar in the Message menu.

A long tap on a message can pop up the Emoji reaction bar where the Add reaction button appears. Meanwhile, a short tap on the button in the Emoji reaction box fires an onClick() event that then calls the Emoji list.

Add reaction button

Emoji list

Emoji list displays all emojis registered within an application. By default, UIKit provides 7 emojis and the list can be extended when you register more emojis through Chat Platform API. The Emoji list is refreshed when the application connects to the core SDK by comparing the prior emojiHash in the application to the emojiHash info from Sendbird server.

When the Emoji list is unfolded, emoji reactions already added to a message by the current user are indicated with a highlighted background color.

Emoji list

Emoji reaction box

When a text or file message contains reaction data, this data is displayed below the message in the form of emoji reactions. The count of users who have added the emoji reaction to the message is also marked right next to each emoji reaction.

Tapping an emoji in the Emoji reaction box adds or removes the reacted user count.

Emoji reaction box

Reacted user list

This list can be accessed by long pressing a reaction already displayed in an Emoji reaction box. The emoji reaction pressed is shown on a tab underlined, along with all the other reactions that were added to this message. In each tab, a list of users who have contributed to the user count is displayed.

Reacted user list


Customize the reactions UI

The following shows how to build ChannelFragment with the reactions-related methods of the fragment.builder().

Light Color Skin
Copy
ChannelFragment Fragment = new ChannelFragment.Builder(CHANNEL_URL)
    ...
    .setEmojiReactionClickListener(emojiReactionClickListener);
    .setEmojiReactionLongClickListener(emojiReactionLongClickListener);
    .setEmojiReactionMoreButtonClickListener(emojiReactionMoreButtonClickListener);
    ...

Style attributes

The following table lists items you can customize for the reactions UI.

AttributeResource typeDescription

sb_emoji_background

drawable/color

The background color of emoji reactions in the Emoji reaction box

sb_emoji_more_button_src

drawable

The image of the Add reaction button on the Emoji reaction bar

sb_emoji_reaction_background

drawable/color

The background color of an emoji reaction in the Emoji reaction box

sb_emoji_reaction_text_appearance

text appearance

The text size, color, font, and style of the emoji reaction count in the Emoji reaction box

sb_emoji_reaction_more_button_src

drawable

The image of the Add reaction button in the Emoji reaction box

sb_emoji_reaction_count_tab_layout_background

drawable/color

The background color of the emoji reaction tabs in the Reacted user list

sb_emoji_reaction_count_tab_indicator_color

color

The color of the underline for a selected emoji reaction tab in the Reacted user list

sb_emoji_reaction_user_nickname_appearance

text appearance

The text size, color, font, and style of the user nickname in the Reacted user list

Light Color Skin
Copy
<style name="Custom" parent="SendBird">
    <item name="sb_emoji_reaction_style">@style/custom</item>
</style>

<style name="custom" parent="Widget.SendBird.Emoji">
    <item name="sb_emoji_background"></item>
    <item name="sb_emoji_more_button_src"></item>
    <item name="sb_emoji_reaction_background"></item>
    <item name="sb_emoji_reaction_text_appearance"></item>
    <item name="sb_emoji_reaction_more_button_src"></item>
    <item name="sb_emoji_reaction_count_text_appearance"></item>
    <item name="sb_emoji_reaction_count_tab_layout_background"></item>
    <item name="sb_emoji_reaction_count_tab_indicator_color"></item>
    <item name="sb_emoji_reaction_user_nickname_appearance"></item>
</style>