[SearchView] Undocumented how to actually use it

[rafrafek]

There is no documentation on how to use com.google.android.material.search.SearchView.

There is no setOnQueryTextListener, but all tutorials on the internet say it should be there.

There is no information on how to listen to the search input text changes. It's the most basic thing and without it the component is useless.

Google Gemini does not know the answer. ChatGPT4 does not know the answer.

I had to search the entire internet to find the answer:
https://stackoverflow.com/a/78060915/9737275

The answer is that searchView has a secret child editText that you can add a text change listener to. Please mention it in the documentation.

searchView.editText.addTextChangedListener

There is also no documentation on how to actually use it, e. g. with RecyclerView. It would be great to have it.

Thank you.

[dsn5ft]

This section of the documentation shows an example of how you can do searchView.getEditText().setOnEditorActionListener(...):

https://github.com/material-components/material-components-android/blob/master/docs/components/Search.md#search-view

Since SearchView simply exposes the EditText, we are not going to repeat all of the EditText APIs in our documentation, but we can make it a little more clear in that section.

And this section of the documentation shows how you can next a ScrollView, RecyclerView, etc. within a SearchView to show search suggestions / history:

https://github.com/material-components/material-components-android/blob/master/docs/components/Search.md#putting-it-all-together

We can make that a little more clear as well.

[rafrafek]

Thank you for your response!

How can I use setIconified? I want to collapse the search view when pressing the back button on Android 9.

[dsn5ft]

Ah I think you might be looking at the Android Framework SearchView which is meant to be embedded in Toolbars:

• https://developer.android.com/reference/android/widget/SearchView
• https://developer.android.com/develop/ui/views/search/training/setup

As opposed to the Material SearchView which is meant to be used with the Material SearchBar:

• https://developer.android.com/reference/com/google/android/material/search/SearchView
• https://m3.material.io/components/search/overview
• https://github.com/material-components/material-components-android/blob/master/docs/components/Search.md

[dsn5ft]

The Material SearchView doesn't have setIconified / setOnQueryTextListener methods.

[rafrafek]

The Material SearchView doesn't have setIconified / setOnQueryTextListener methods.

Yes, that's the issue.

How to collapse it then?

[rafrafek]

Got it!

        val callback = object : OnBackPressedCallback(false) {
            override fun handleOnBackPressed() {
                binding.searchView.hide()
            }
        }

        onBackPressedDispatcher.addCallback(callback)

        binding.searchView.addTransitionListener { _, _, newState ->
            if (newState === TransitionState.SHOWING) {
                callback.isEnabled = true
            } else if (newState === TransitionState.HIDING) {
                callback.isEnabled = false
            }
        }

[rafrafek]

In the xml example https://github.com/material-components/material-components-android/blob/master/docs/components/Search.md#putting-it-all-together
there is this thing I don't understand:

<!-- Screen content goes here. -->

when I use it to place the main content of my screen, UI elements like TextView, Button, ImageView, etc., the elements are rendered behind the search bar

My full xml code:

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

    <!-- NestedScrollingChild goes here (NestedScrollView, RecyclerView, etc.). -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/searchbar_scrolling_view_behavior">

        <!-- Screen content goes here. -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello, World!" />
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Click Me" />
        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.search.SearchBar
            android:id="@+id/search_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/searchbar_hint" />
    </com.google.android.material.appbar.AppBarLayout>

    <com.google.android.material.search.SearchView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:hint="@string/searchbar_hint"
        app:layout_anchor="@id/search_bar">
        <!-- Search suggestions/results go here (ScrollView, RecyclerView, etc.). -->
        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/search_results_recycler_view" />
    </com.google.android.material.search.SearchView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

[dsn5ft]

The app:layout_behavior="@string/searchbar_scrolling_view_behavior" scroll away mode will make the SearchBar float on top of the scrolling content:

https://github.com/material-components/material-components-android/blob/master/docs/components/Search.md#scroll-away-mode

Try using app:layout_behavior="@string/appbar_scrolling_view_behavior" instead if you want the scrolling content to not overlap the SearchBar.

[rafrafek]

Thanks!

[patrickfrei]

I'm using a ViewPager2 with fragments. Additionally, a TabLayout, whereas I've a fragment for each tab. Each fragment includes a RecyclerView list. Basically, the GUI looks like the M3 Catalog app RecyclerView Demo.

Looking at the M3 Catalog app and the documentation, I really don't understand how to apply the search string to the RecyclerView list of the currently selected tab and transfer the filtered list with the search results back to the RecyclerView defined within SearchView.

Does someone of you eventually have some sample code that shows the logic?