SearchView icon shows twice

Question

I've implemented SearchView inside my toolbar, following Android's official instructions.

SearchView works well itself, but when I tap the search icon, it is shifted to the left instead of showing the Search Hint and Close button, although if I click this "second Search" icon, finally I get the typical search view.

Here is my xml of the toolbar:

<item android:id="@+id/search"
        android:title="@string/search_view"
    app:showAsAction="collapseActionView|ifRoom"
    android:iconTint="@android:color/white"
        android:icon="@drawable/ic_search_white_24dp"
    app:actionViewClass="android.widget.SearchView" />

And my onCreateOptionsMenu

@Override
    public boolean onCreateOptionsMenu(Menu menu) {

        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.options_menu, menu);

        // Associate searchable configuration with the SearchView
        SearchManager searchManager =
                (SearchManager) getSystemService(Context.SEARCH_SERVICE);
        SearchView searchView =
                (SearchView) menu.findItem(R.id.search).getActionView();

        searchView.setSearchableInfo(
                searchManager.getSearchableInfo(getComponentName()));

        return true;
    }

And my manifest.xml

<activity
            android:name=".Activities.MainActivity"
            android:label="@string/addWordLabel_Act"
            android:launchMode="singleTop"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.SEARCH"/>
            </intent-filter>
            <meta-data
                android:name="android.app.searchable"
                android:resource="@xml/searchable" />
        </activity>

Finally, here you have some screenshots of the problem: SearchView before tapping

SearchView after first tap, Here's the problem

SearchView after second tap, "the normal SearchView"

And that's all.

Note: I haven't implemented an Activity/Fragment to handle the Search yet.

score 4 · Answer 1 · answered Oct 27 '19 at 01:01

4

Androidx solution

Adding this answer because my reputation wasn't enough to reply to Wesley Franks

Layout

app:actionViewClass="androidx.appcompat.widget.SearchView"

Activity (Kotlin)

menu?.findItem(R.id.search)?.actionView as? androidx.appcompat.widget.SearchView

Activity (Java)

(androidx.appcompat.widget.SearchView) menu.findItem(R.id.search).getActionView();

answered Oct 27 '19 at 01:01

Guilherme Taffarel Bergamin

274
1
4
13

works with androidx, this must be used for the apps being created with androidx. – 89n3ur0n Apr 25 '23 at 16:41

score 1 · Accepted Answer · answered Oct 20 '18 at 23:24

Finally, I got the solution. It was easy, but I've spent two days trying to figure it out.

Just, for compatibility issues, use

app:actionViewClass="android.support.v7.widget.SearchView"

instead of app:actionViewClass="android.widget.SearchView"

and, of course, change

SearchManager searchManager =
                (SearchManager) getSystemService(Context.SEARCH_SERVICE);
       SearchView searchView =
                (SearchView) menu.findItem(R.id.search).getActionView();

by

SearchManager searchManager =
                (SearchManager) getSystemService(Context.SEARCH_SERVICE);
        android.support.v7.widget.SearchView searchView =
                (android.support.v7.widget.SearchView) menu.findItem(R.id.search).getActionView();

can't use that with androidx – wesley franks Jul 20 '19 at 15:51 — wesley franks, Jul 20 '19 at 15:51

score 0 · Answer 3 · answered Feb 02 '20 at 18:15

This is best answer for this issue

@Override
    public void onCreateOptionsMenu(Menu menu, @NonNull MenuInflater inflater) {
        super.onCreateOptionsMenu(menu, inflater);
        inflater.inflate(R.menu.menu_main, menu);

        MenuItem myActionMenuItem = menu.findItem( R.id.action_search);
        final androidx.appcompat.widget.SearchView searchView = (androidx.appcompat.widget.SearchView) myActionMenuItem.getActionView();
        searchView.setOnQueryTextListener(new androidx.appcompat.widget.SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                searchView.setQuery("", false);
                searchView.setIconified(true);
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                  //Do your stuff
                return true;
            }
        });
    }

score 0 · Answer 4 · answered Feb 05 '20 at 06:35

0

If none of above solution works for you as in my case: Just set background color to the SearchView. And you will only see 1 magnifying glass icon.

answered Feb 05 '20 at 06:35

Navinpd

772
7
15

score 0 · Answer 5 · answered Feb 11 '21 at 07:55

Before Calling the Menu Item Clear the Menu First.

 menu.clear();

Full Code

 @Override
public void onCreateOptionsMenu(@NonNull Menu menu, @NonNull MenuInflater inflater) {
    menu.clear();
    inflater.inflate(R.menu.main, menu);
    SearchView searchView = (SearchView) menu.findItem(R.id.appSearchBar).getActionView();
    searchView.setQueryHint("Search...");
    searchView.setIconified(false);

onCreateOptionsMenu is use because i call it in Fragment.

SearchView icon shows twice

5 Answers5

Androidx solution

Layout

Activity (Kotlin)

Activity (Java)