Chat UIKit Android v2

Chat UIKit Android

Chat UIKit

Android

Version 2

Sendbird Chat UIKit v2 for Android is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Message search

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.

Customize the UI for message search

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.

<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>

Attribute	Resource type	Description
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.

Attribute	Resource type	Description
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:

new MessageSearchFragment.Builder(CHANNEL_URL, R.style.Custom).build();

IconSet

Icon	Image	Description
icon_search		A search icon used in the search bar.

On this page

Customize the UI for message search

Sample app

Message search

Customize the UI for message search

StyleSet

List of attributes of Widget.SendBird.SearchBar

List of attributes of Widget.SendBird.MessagePreview

IconSet