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 expect that it shows a keyboard so I can type in a search query. But it doesn't.

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