Searching for Messages

The SearchInputView and SearchResultListView components can be used to search and display messages that contain specific text. The search is performed across all channels a user is a member of.

Light Mode	Dark Mode

Usage

Here's an example layout using these two Views:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <io.getstream.chat.android.ui.feature.search.SearchInputView
        android:id="@+id/searchInputView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <io.getstream.chat.android.ui.feature.search.list.SearchResultListView
        android:id="@+id/searchResultListView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/searchInputView" />

</androidx.constraintlayout.widget.ConstraintLayout>

We recommend using SearchViewModel to get search results from the Stream API and then render them using the SearchResultListView.

The basic setup of the ViewModel and connecting it to the View is done the following way:

// Instantiate the ViewModel
val searchViewModel: SearchViewModel by viewModels()

// Bind the ViewModel with SearchResultListView
searchViewModel.bindView(searchResultListView, viewLifecycleOwner)

// Instantiate the ViewModel
SearchViewModel viewModel = new ViewModelProvider(this).get(SearchViewModel.class);

// Bind it with SearchResultListView
SearchViewModelBinding.bind(viewModel, searchResultListView, getViewLifecycleOwner());

Finally, start the search by passing the search query to the ViewModel:

// Notify ViewModel when search is triggered
searchInputView.setSearchStartedListener(viewModel::setQuery)

// Notify ViewModel when search is triggered
searchInputView.setSearchStartedListener(viewModel::setQuery);

Handling Actions

In addition to the SearchStartedListener described above, SearchInputView allows you to listen for text changes by using listeners:

searchInputView.setContinuousInputChangedListener { query ->
    // Search query changed
}
searchInputView.setDebouncedInputChangedListener { query ->
    // Search query changed and has been stable for a short while
}

searchInputView.setContinuousInputChangedListener(query -> {
    // Search query changed
});
searchInputView.setDebouncedInputChangedListener(query -> {
    // Search query changed and has been stable for a short while
});

SearchResultListView exposes a listener for handling item clicks:

searchResultListView.setSearchResultSelectedListener { message ->
    // Handle search result click
}

searchResultListView.setSearchResultSelectedListener(message -> {
    // Handle search result click
});

You can also listen for pagination events when the user scrolls to the end of the search results:

searchResultListView.setLoadMoreListener {
    // Load more search results
}

searchResultListView.setLoadMoreListener(() -> {
    // Load more search results
});

To enable or disable pagination programmatically:

// Disable pagination
searchResultListView.setPaginationEnabled(false)

// Re-enable pagination
searchResultListView.setPaginationEnabled(true)

// Disable pagination
searchResultListView.setPaginationEnabled(false);

// Re-enable pagination
searchResultListView.setPaginationEnabled(true);

The full list of listeners available for SearchInputView can be found here, and for SearchResultListView here.

Updating the Search Query Programmatically

SearchInputView provides a way to change the search query programmatically:

searchInputView.setQuery("query")

searchInputView.setQuery("query");

You can also easily clear the current input:

searchInputView.clear()

searchInputView.clear();

Customization

Using XML Attributes

SearchInputView provides several XML attributes for customization:

<io.getstream.chat.android.ui.feature.search.SearchInputView
    android:id="@+id/searchInputView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:streamUiSearchInputViewHintText="Search messages"
    app:streamUiSearchInputViewTextColor="@color/text_color"
    app:streamUiSearchInputViewHintColor="@color/hint_color"
    app:streamUiSearchInputViewTextSize="16sp"
    app:streamUiSearchInputViewHeight="48dp"
    app:streamUiSearchInputViewBackground="@drawable/custom_background"
    app:streamUiSearchInputViewSearchIcon="@drawable/custom_search_icon"
    app:streamUiSearchInputViewClearInputIcon="@drawable/custom_clear_icon" />

The complete list of SearchInputView attributes:

• streamUiSearchInputViewHintText - The hint text displayed when the input is empty.
• streamUiSearchInputViewSearchIcon - The search icon drawable.
• streamUiSearchInputViewClearInputIcon - The clear input icon drawable.
• streamUiSearchInputViewBackground - The background drawable.
• streamUiSearchInputViewBackgroundOutlineColor - The background outline color.
• streamUiSearchInputViewBackgroundOutlineWidth - The background outline width.
• streamUiSearchInputViewTextColor - The input text color.
• streamUiSearchInputViewHintColor - The hint text color.
• streamUiSearchInputViewTextSize - The input text size.
• streamUiSearchInputViewHeight - The height of the search input view.
• streamUiSearchInputViewTextMarginStart - The start margin of the input text.
• streamUiSearchInputViewTextMarginEnd - The end margin of the input text.
• streamUiSearchInputViewIconSearchWidth - The width of the search icon.
• streamUiSearchInputViewIconSearchHeight - The height of the search icon.
• streamUiSearchInputViewIconSearchMarginStart - The start margin of the search icon.
• streamUiSearchInputViewIconClearWidth - The width of the clear icon.
• streamUiSearchInputViewIconClearHeight - The height of the clear icon.
• streamUiSearchInputViewIconClearMarginEnd - The end margin of the clear icon.

SearchResultListView also supports extensive customization:

• streamUiSearchResultListBackground - The background of the search results list.
• streamUiSearchResultListSearchInfoBarBackground - The background of the info bar.
• streamUiSearchResultListSearchInfoBarTextColor - The text color of the info bar.
• streamUiSearchResultListSearchInfoBarTextSize - The text size of the info bar.
• streamUiSearchResultListEmptyStateIcon - The icon displayed when results are empty.
• streamUiSearchResultListEmptyStateTextColor - The text color of the empty state.
• streamUiSearchResultListProgressBarIcon - The progress bar drawable.
• streamUiSearchResultListSenderNameTextColor - The color of the sender name.
• streamUiSearchResultListMessageTextColor - The color of the message text.
• streamUiSearchResultListMessageTimeTextColor - The color of the message time.

Using Style Transformations

Both views can be customized programmatically using style transformers:

TransformStyle.searchInputViewStyleTransformer = StyleTransformer { defaultStyle ->
    defaultStyle.copy(
        hintText = "Search for messages",
        textColor = Color.BLACK,
        hintColor = Color.GRAY,
    )
}

TransformStyle.searchResultListViewStyleTransformer = StyleTransformer { defaultStyle ->
    defaultStyle.copy(
        backgroundColor = Color.WHITE,
    )
}

TransformStyle.setSearchInputViewStyleTransformer(style -> {
    // Customize and return the style
    return style;
});

TransformStyle.setSearchResultListViewStyleTransformer(style -> {
    // Customize and return the style
    return style;
});