I want to add two trailing icons (one of them being the 3 dots menu icon) on my Material 3 Search Bar.
Examples: Source: GitHub
and this: Source: Material 3
But I can't find any way to do this nor any documentation anywhere in Google's repos or Material's regarding this. It's in their guides, it should had a quick and easy way to do it, no?
My code right now which successfully shows the menu is this:
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
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/search_here"
app:menu="@menu/explorer_menu"
app:navigationIcon="@drawable/ic_logo" />
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.search.SearchView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:closeIcon="@drawable/ic_close"
app:layout_anchor="@id/searchBar">
<!-- Search suggestions/results go here (ScrollView, RecyclerView, etc.). -->
</com.google.android.material.search.SearchView>
Any ideas?
In order to add trailing icons to search bar, you have to create menu for it. The SearchBar
component is a child of a Toolbar, so you can specify menu value for it.
The SearchBar
does not have special "trailing-icon" field and google has to add it in their M3 implementation documentation.
Here's the example from my project:
searchbar_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/menu_sort"
android:icon="@drawable/sort"
android:title="@string/sort"
app:showAsAction="always"/>
<item android:id="@+id/menu_trend"
android:icon="@drawable/trending"
android:title="@string/trend"
app:showAsAction="always"/>
<item android:id="@+id/menu_options"
android:icon="@drawable/options"
android:title="@string/options"
app:showAsAction="always"/>
</menu>
Layout file:
<com.google.android.material.search.SearchBar
android:id="@+id/search_bar"
android:hint="@string/search"
app:menu="@menu/searchbar_menu" />
As a result, you get a search bar with always showing three icons at the end.
In order to better understand menu in android, I'd suggest you to look for the documentation in android-developers website.