Home
/
UIKit
/
Android
/
Group channel

Message threading

Message threading is a feature that allows users to reply to each other's messages in a channel. Users can ask questions, give feedback or add context to a specific message without interrupting the conversation flow. A message thread refers to a group of messages and their replies. Currently, Sendbird UIKit only supports quote reply type of message threading where users' messages and replies are all shown in the channel view.


Limitations

Message threading currently has the following limitations:

  • UIKit message threading is available for group channels only.
  • Quote reply is the only reply type that Sendbird UIKit provides.
  • Sendbird UIKit only supports 1-depth threads, meaning you can't reply to a quote reply message.

How to use

To enable message threading, set the reply filter to quote reply mode:

// Turn on the quote reply mode.
SendBirdUIKit.setReplyType(ReplyType.QUOTE_REPLY);
// Turn off the quote reply mode.
SendBirdUIKit.setReplyType(ReplyType.NONE);

Reply to messages

Users can reply to messages in a group channel through the ChannelFragment class. The message list region of ChannelFragment will allow the users to press and hold the message they wish to reply to. A Message menu will appear and once they tap Reply, they can start quote replying using the QUOTE_REPLY mode of MessageInputView. A message that already has a reply is called a quoted message and the replied message is called a reply. Both quoted messages and replies can be either user messages or file messages.

Message menu

The Message menu contains an Emoji reaction bar, a Copy button, and a Reply button. To view the menu, long tap on a message in channel view. Then, tap Reply in the menu to quote reply to the selected message. The sendUserMessage(UserMessageParams params) method of ChannelFragment is invoked and the selected message becomes a quoted message.

The Reply button of a message that is already a reply appears as deactivated because Sendbird UIkit only supports 1-depth replies.

The Delete button of a quoted message that has one or more replies appears as deactivated. To delete the quoted message, its replies must be deleted first.

Customize the UI for quote reply in Message menu

The UI for quote reply in the Message menu can be customized through StringSet and IconSet.

StringSet for Message menu

The Reply text in the Message menu can be customized through StringSet. The StringSet is a set of strings used to compose a view. It’s a res/strings.xml file containing UIKit-defined string values.

<resources>
    <string name="sb_text_channel_anchor_reply">Reply</string>
</resources>

IconSet for Message menu

The following table shows a customizable reply message icon.

Icon nameImageDescription

icon_reply

An icon used to indicate Reply.

Message input

Once the current user chooses to Reply in the Message menu, they will be able to start quote replying through the QUOTE_REPLY mode of MessageInputView. The preview of the quoted message is displayed above the message input field region of ChannelFragment. Type a message in the input field and Send. Then, the sendUserMessage(UserMessageParams params) method of ChannelFragment is called to send the reply message.

If the user closes the quoted message in MessageInputView, they can end QUOTE_REPLY mode and the preview of the quoted message disappears.

Customize the UI for message input

You can customize the UI for message input view using StyleSet, StringSet, and IconSet.

StyleSet for message input

To customize the style of items in the message input view, you have to change the UIKit-defined style values in the res/values/style.xml file as shown below.

<style name="Custom" parent="SendBird">
    <item name="sb_message_input_style">@style/CustomMessageInput</item>
</style>

<style name="CustomMessageInput" parent="Widget.SendBird.MessageInput">
    ...

    <item name="sb_message_input_quote_reply_title_text_appearance"></item>
    <item name="sb_message_input_quoted_message_text_appearance"></item>
    <item name="sb_message_input_quote_reply_right_icon"></item>
    <item name="sb_message_input_quote_reply_right_icon_tint"></item>
    <item name="sb_message_input_quote_reply_right_icon_background"></item>
</style>

List of attributes of Widget.Sendbird.MessageInput

AttributeResource typeDescription

sb_message_input_quote_reply_title_text_appearance

text appearance

The size, color, font, and style of text for the reply title in the message input view.

sb_message_input_quoted_message_text_appearance

text appearance

The size, color, font, and style of text for the quoted message in the message input view.

sb_message_input_quote_reply_right_icon

drawable/color

The icon in the upper right corner of the message input view. By default, the icon acts as a button to end quote reply mode. The icon can be replaced with any other icon images.

sb_message_input_quote_reply_right_icon_tint

drawable/color

The color of the icon in the upper right corner of the message input view.

sb_message_input_quote_reply_right_icon_background

drawable/color

The background color or shape of the icon in the upper right corner of the message input view. Both the color and shape can be customized.

StringSet for message input

The text of the title in the message input view can be customized through StringSet. The StringSet is a set of strings used to compose a view. It’s a res/strings.xml file containing UIKit-defined string values.

<resources>
    <string name="sb_text_reply_to">Reply to %s&#8230;</string>
</resources>

IconSet for message input

The icon in the upper right corner of the message input view can be customized through IconSet.

IconImageDescription

icon_close

An icon used to close the current page.


Show replies

Users can view all quoted messages in the channel through BaseQuotedMessageView, MyQuotedMessageView, and OtherQuotedMessageView. Both MyQuotedMessageView and BaseQuotedMessageView inherit the properties and methods of BaseQuotedMessageView. The BaseQuoteMessageView only shows the quoted message and the title that indicates a user replied to another user as all reply messages are considered individual messages in the channel that inherit BaseViewHolder<BaseMessage>.

There are two types of quoted message views in a channel: MyQuotedMessageView and OtherQuotedMessageView. When the current user replies to a message in the channel, the quoted message is shown using MyQuotedMessageView. When another user in the channel replies to a message in the channel, the quoted message is displayed through OtherQuotedMessageView.

Customize quoted message view

You can customize the UI for quoted messages in a channel using StyleSet, StringSet, and IconSet.

StyleSet for quoted message

To customize the style of items in the quoted message view, you have to change the UIKit-defined style values in the res/values/style.xml file as shown below.

<style name="Custom" parent="SendBird">
    <item name="sb_my_quoted_message_style">@style/CustomMyQuotedMessage</item>
    <item name="sb_other_quoted_message_style">@style/CustomOtherQuotedMessage</item>
</style>

<style name="CustomMyQuotedMessage" parent="Widget.SendBird.MyQuotedMessageView">
    <item name="sb_quoted_message_title_icon"></item>
    <item name="sb_quoted_message_title_icon_tint"></item>
    <item name="sb_quoted_message_title_text_appearance"></item>
    <item name="sb_quoted_message_background"></item>
    <item name="sb_quoted_message_background_tint"></item>
    <item name="sb_quoted_message_file_icon_tint"></item>
    <item name="sb_quoted_message_text_appearance"></item>
</style>

<style name="CustomOtherQuotedMessage" parent="Widget.SendBird.OtherQuotedMessageView">
    <item name="sb_quoted_message_title_icon"></item>
    <item name="sb_quoted_message_title_icon_tint"></item>
    <item name="sb_quoted_message_title_text_appearance"></item>
    <item name="sb_quoted_message_background"></item>
    <item name="sb_quoted_message_background_tint"></item>
    <item name="sb_quoted_message_file_icon_tint"></item>
    <item name="sb_quoted_message_text_appearance"></item>
</style>

List of attributes of Widget.Sendbird.MyQuotedMessageView

AttributeResource typeDescription

sb_quoted_message_title_icon

drawable/color

The icon to the left of the text located above the quoted message. By default, the icon indicates that the current user replied to another user's message.

sb_quoted_message_title_icon_tint

drawable/color

The color of the icon, which is located on the left side of the text above the quoted message. By default, the icon indicates that the current user replied to another user's message.

sb_quoted_message_title_text_appearance

text appearance

The size, color, font, and style of text located above the quoted message. By default, the title indicates that the current user replied to another user's message.

sb_quoted_message_background

drawable/color

The background of the quoted message bubble. The shape of the quoted message bubble can be customized.

sb_quoted_message_background_tint

drawable/color

The background color of the quoted message bubble.

sb_quoted_message_file_icon_tint

drawable/color

The color of the icon to the left of the file message in the quoted message bubble. By default, the icon indicates that the message is a file message.

sb_quoted_message_text_appearance

text appearance

The size, color, font, and style of text in the quoted message bubble.

List of attributes of Widget.Sendbird.OtherQuotedMessageView

AttributeResource typeDescription

sb_quoted_message_title_icon

drawable/color

The icon to the left of the text located above the quoted message. By default, the icon indicates that a user replied to another user's message.

sb_quoted_message_title_icon_tint

drawable/color

The color of the icon, which is located on the left side of the text above the quoted message. By default, the icon indicates that a user replied to another user's message.

sb_quoted_message_title_text_appearance

text appearance

The size, color, font, and style of text located above the quoted message. By default, the title indicates that a user replied to another user's message.

sb_quoted_message_background

drawable/color

The background of the quoted message bubble. The shape of the quoted message bubble can be customized.

sb_quoted_message_background_tint

drawable/color

The background color of the quoted message bubble.

sb_quoted_message_file_icon_tint

drawable/color

The color of the icon to the left of the file message in the quoted message bubble. By default, the icon indicates that the message is a file message.

sb_quoted_message_text_appearance

text appearance

The size, color, font, and style of text in the quoted message bubble.

StringSet for quoted message

The texts in the quoted message view can be customized through StringSet. The StringSet is a set of strings used to compose a view. It’s a res/strings.xml file containing UIKit-defined string values.

<resources>
    <string name="sb_text_you">You</string>
    <string name="sb_text_reply_to">Reply to %s</string>
    <string name="sb_text_replied_to">%s replied to %s</string>
    <string name="sb_text_error_original_message_not_found">Couldn\'t find the original message for this reply.</string>
</resources>

IconSet for quoted message

The icon to the left of the title in the quoted message view can be customized through IconSet.

IconImageDescription

icon_reply_filled

An icon indicating that a user replied to another user's message.


Event handler for quote reply

The quoted message view supports an event handler for tap gestures. When the current user taps or presses and holds the quoted message, the onListItemClick() or onListItemLongClick() method of ChannelFragment is called and the identifier becomes StringSet.QuoteReply.

Customize onListItemClick() and onListItemLongClick()

You can customize the action by overriding the onListItemClick() and onListItemLongClick() methods in the ChannelFragment class. To do so, follow the guide below:

  1. Create a new fragment that inherits ChannelFragment as a subclass.
  2. Override onListItemClick() and onListItemLongClick() methods in the fragment.
  3. Apply the customized fragment by using the ChannelFragment.Builder().setCustomChannelFragment() method.
public class ChannelFragment {
    @Override
    public void onListItemClick(View view, String identifier, int position, BaseMessage message) {
        switch (identifier) {
            case StringSet.Chat:
                // ClickableViewType.Chat
                break;
            case StringSet.Profile:
                // ClickableViewType.Profile
                break;
            case StringSet.QuoteReply:
                // ClickableViewType.Reply
                break;
        }
    }

    @Override
    public void onListItemLongClick(View itemView, String identifier, int position, BaseMessage message) {
        switch (identifier) {
            case StringSet.Chat:
                // ClickableViewType.Chat
                break;
            case StringSet.Profile:
                // ClickableViewType.Profile
                break;
            case StringSet.QuoteReply:
                // ClickableViewType.Reply
                break;
        }
    }
}

List of fragment methods

MethodDescription

onListItemClick()

Called when the quoted message is tapped and redirects the current user to the original message in the channel. You can override this method and add more parameters.

onListItemLongClick()

Called when the quoted message is long pressed and redirects the current user to the original message in the channel. You can override this method and add more parameters.