Material 3 Search Bar

Question

I'm trying to use the new Material 3 Search Bar (https://github.com/material-components/material-components-android/blob/master/docs/components/Search.md). So I 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>

Around this I have a LinearLayout in a CoordinatorLayout. I see the SearchBar at the right place, and the dot menu I implemented also works but when I click on the SearchBar it doesn't react. It's like clicking a button (I see the clicking feedback).

I except that it shows a keyboard so I can type in a search query. But it doesn't.

did you fixed it ? if yes can you tell me how ? – DrHowdyDoo Apr 16 '23 at 11:25 — DrHowdyDoo, Apr 16 '23 at 11:25

score 1 · Answer 1 · answered May 18 '23 at 19:37

1

You have to implement SearchView in your layout. And then connect them in code.

searchView.setupWithSearchBar(searchBar)

If you use CoordinatorLayout, use layout_anchor attribute without code.

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

answered May 18 '23 at 19:37

Ko Oo

11
2

Thanks. I gonna try it tomorrow but it sounds good. I already saw an example in the docs with the Searchview but I thought that that's not what I want. – Cameo07 May 19 '23 at 20:09
1

And that is NOT what I want. I want a simple search bar which is like a text input like in [this](https://github.com/Bnyro/ConnectYou) project. (It is written in Composer but that's what I want. – Cameo07 May 20 '23 at 10:49
you could probably create a custom search bar interface inspired from SearchBar code or find third party libraries. – Ko Oo May 20 '23 at 19:37
I have tried looking good but How to filter recycler view items. – Farzan Siddiqui Aug 22 '23 at 17:54

score 0 · Answer 2 · answered May 22 '23 at 06:21

First of all, If you are implementing a searchview in a toolbar or anywhere else, then you have to add implement a method to manually open up a search bar.

And, If you have a options menu there in the toolbar, then SearchView as the menu item is the best way to do it.

Here is how to do it,

Put a searchview item in the menu file like this:

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

Then, find the searchview item in onCreateOptionsMenu() in your activity or fragment,

val searchItem = menu.findItem(R.id.action_search)
val searchView = searchItem?.actionView as SearchView

Now, you can use this searchView as you want.

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

Material 3 Search Bar

2 Answers2