Material 3 Search Bar – Android

<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.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.). -->
</com.google.android.material.search.SearchView>

searchView.setupWithSearchBar(searchBar)

The Problem:

I’m trying to use the new Material 3 Search Bar, but when I click on it, nothing happens. I expect it to show a keyboard so I can type in a search query, but it doesn’t. I have implemented it like this:

<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/searchBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/searchbarHint"/>
    </com.google.android.material.appbar.AppBarLayout>

The Solutions:

Solution 1: Implement SearchView

To make the Search Bar functional, you need to implement a SearchView in your layout and connect it to the Search Bar in code.

• Add the SearchView below the SearchBar in your layout file:

“`
<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.). –>
</com.google.android.material.search.SearchView>
“`

• Connect the SearchView and SearchBar in code:

“`
searchView.setupWithSearchBar(searchBar)
“`

• Alternatively, if you’re using a CoordinatorLayout, you can use the layout_anchor attribute to connect the SearchView to the SearchBar without writing any code:

“`
<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.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.). –>
</com.google.android.material.search.SearchView>

</ul>

Solution 2: Use a SearchView as a menu item

If you are implementing a search view in a toolbar or anywhere else, you have to manually open up a search bar. And if you have an options menu in the toolbar, then `SearchView as the menu item` is the best way to do it. Here’s how:

• Put a search view item in the menu file:
  “`
  <item
  android:id="@+id/action_search"
  android:icon="@drawable/ic_search"
  android:title="Search Albums"
  app:showAsAction="collapseActionView|ifRoom"
  app:actionViewClass="androidx.appcompat.widget.SearchView" />
  “`

• Find the search view item in onCreateOptionsMenu() in your activity or fragment:
  “`
  val searchItem = menu.findItem(R.id.action_search)
  val searchView = searchItem?.actionView as SearchView
  “`

• Use the searchView as needed:
  “`
  searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
  override fun onQueryTextSubmit(query: String?): Boolean {
  val queryText = query.toString()
  searchView.clearFocus()
  return false
  }

          override fun onQueryTextChange(newText: String?): Boolean {
              val queryText = newText.toString()
              return false
          }
      })
  

  </ul>
  

  Q&A

  How can I connect searchView and searchBar in code?

  —

  Use searchView.setupWithSearchBar(searchBar).

  How can I manually open up a search bar in toolbar or anywhere else?

  —

  Implement findViewById(R.id.search_view).requestFocus().

  How can I use searchView as a menu item?

  —

  Use val searchItem = menu.findItem(R.id.action_search).

  Video Explanation:

  The following video, titled "Material 3 Search Bar with Jetpack Compose - Easy Tutorial ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

  

  Comments47 · The BEST Way to Implement a Search In Jetpack Compose - Android Studio Tutorial · How to Build Stunning Material 3 Apps with Jetpack ...