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

Question

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?

@Hexley21 Yes, your solution! Thanks a lot :) – tzegian Jul 03 '23 at 21:12 — tzegian, Jul 03 '23 at 21:12

score 1 · Accepted Answer · answered Jul 02 '23 at 18:41

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.

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

1 Answers1