Search code examples
androidxmlmaterial-components-androidandroid-search

How to add two trailing icons on Material3 Search Bar on Android?


I want to add two trailing icons (one of them being the 3 dots menu icon) on my Material 3 Search Bar.

Examples: Source: GitHubSource: GitHub

and this: enter image description here 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?


Solution

  • 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.