Home
/
UIKit
/
Android
/
Group channel

Message search is a feature that allows users to search for messages within a specific channel. It retrieves a list of messages that contains a search query from group channels joined by a user. You can search for either an exact match or a partial match.

Users can use this feature through the search bar in the message search view. When they search for a keyword in the search bar, the message search view will display the search results as shown below. Users can locate the message that they’re looking for by selecting the specific result.

Note : To learn more about implementing message search, refer to Search messages.

You can customize the UI for message search using the StyleSet and IconSet. To learn how to customize message search results, refer to the code in Customize the search results.

StyleSet

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

Light Color Skin
Copy
<style name="Custom" parent="SendBird">
    <item name="sb_search_bar_style">CustomSearchBar</item>
    <item name="sb_message_preview_style">CustomMessagePreview</item>
</style>

<style name="CustomSearchBar" parent="Widget.SendBird.SearchBar">
    <item name="sb_search_bar_background"></item>
    <item name="sb_search_divider_color"></item>
    <item name="sb_search_bar_text_input_background"></item>
    <item name="sb_search_bar_text_appearance"></item>
    <item name="sb_search_bar_hint_text"></item>
    <item name="sb_search_bar_hint_text_color"></item>
    <item name="sb_search_bar_clear_icon"></item>
    <item name="sb_search_bar_clear_icon_tint_color"></item>
    <item name="sb_search_bar_search_text"></item>
    <item name="sb_search_bar_search_text_appearance"></item>
    <item name="sb_search_bar_search_text_color"></item>
    <item name="sb_search_bar_search_text_background"></item>
    <item name="sb_search_bar_cursor_drawable"></item>
    <item name="sb_search_bar_search_icon"></item>
    <item name="sb_search_bar_search_icon_tint_color"></item>
</style>

<style name="CustomMessagePreview" parent="Widget.SendBird.MessagePreview">
    <item name="sb_message_preview_background"></item>
    <item name="sb_message_preview_username_text_appearance"></item>
    <item name="sb_message_preview_message_text_appearance"></item>
    <item name="sb_message_preview_sent_at_text_appearance"></item>
    <item name="sb_message_preview_divider_color"></item>
    <item name="sb_message_preview_message_metaphor_background_color"></item>
    <item name="sb_message_preview_message_metaphor_icon_tint_color"></item>
</style>
AttributeResource typeDescription

sb_search_bar_background

drawable/color

The shape and color of the search bar.

sb_search_divider_color

color

The color of the search result divider.

sb_search_bar_text_input_background

drawable/color

The shape and color of the text input box in the search bar.

sb_search_bar_text_appearance

text appearance

The size, color, font, and style of text in search bar.

sb_search_bar_hint_text

string

A placeholder text in the search bar. The default text is currently set to Search.

sb_search_bar_hint_text_color

color

The color of the placeholder text in the search bar.

sb_search_bar_clear_icon

drawable/color

The icon indicating a button to clear the text in the search bar.

sb_search_bar_clear_icon_tint_color

color

The color of drawing in the clear icon in the search bar.

sb_search_bar_search_text

string

The text button next to the search bar.

sb_search_bar_search_text_appearance

text appearance

The size, color, font, and style of the text button next to the search bar.

sb_search_bar_search_text_color

color

The color of the text button next to the search bar.

sb_search_bar_search_text_background

drawable/color

The background color of the text button next to the search bar.

sb_search_bar_cursor_drawable

drawable/color

The shape and color of the flashing vertical cursor in the search bar.

sb_search_bar_search_icon

drawable/color

The search icon located in the search bar.

sb_search_bar_search_icon_tint_color

color

The color of drawing in the search icon located in the search bar.

List of attributes of Widget.SendBird.MessagePreview

AttributeResource typeDescription

sb_message_preview_background

drawable/color

The background of message preview in the search results.

sb_message_preview_username_text_appearance

text appearance

The size, color, font, and style of text for the user name.

sb_message_preview_message_text_appearance

text appearance

The size, color, font, and style of text for the message.

sb_message_preview_sent_at_text_appearance

text appearance

The size, color, font, and style of text for the timestamp when a message was sent.

sb_message_preview_divider_color

color

The color of the message preview divider.

sb_message_preview_message_metaphor_background_color

color

The background color of the icon in the message search view.

sb_message_preview_message_metaphor_icon_tint_color

color

The color of drawing in the icon in the message search view.

To apply the declared custom styles, pass the unique URL of the channel and R.style.Custom to the MessageSearchFragment.Builder constructor as shown below:

Light Color Skin
Copy
new MessageSearchFragment.Builder(CHANNEL_URL, R.style.Custom).build();

IconSet

IconImageDescription

icon_search

A search icon used in the search bar.