Home » Android » Android search widget How to hide the close button in search view by default?

Android search widget How to hide the close button in search view by default?

Posted by: admin May 14, 2020 Leave a comment

Questions:

I have implemented an android SearchView in ActionBar. When the SearchView gains focus, the close button [x] at the right shows up. I took a look at other android native apps, like Contacts and Gmail. The close button is not shown when the SearchView gains focus.

How to set my SearchView behave like that?

How to&Answers:

Setting searchView.setIconifiedByDefault(false) will disable collapsing the search view and also remove the close button.

Answer:

I faced the same problem with android.support.v7.widget.SearchView and found a solution. First, in onCreateOptionsMenu, you can obtain a reference to the SearchView as well as its close button:

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

    MenuItem searchItem = menu.findItem(R.id.action_search);
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);

    try {
        Field searchField = SearchView.class.getDeclaredField("mCloseButton");
        searchField.setAccessible(true);
        mSearchCloseButton = (ImageView) searchField.get(mSearchView);
    } catch (Exception e) {
        Log.e(TAG, "Error finding close button", e);
    }
}

Now you can try to modify the button. First I tried to use setVisibility(View.GONE) to hide the close button, but that doesn’t work, because the SearchView resets the visibility of its close button when the user interacts with the SearchView. So my solution was to use a transparent drawable and disable the click of the close button:

if (mSearchCloseButton != null) {
    mSearchCloseButton.setEnabled(false);
    mSearchCloseButton.setImageDrawable(getResources().getDrawable(R.drawable.transparent));
}

This article helped me as well:
http://novoda.com/blog/styling-actionbar-searchview

However, this is quite hacky to be honest. It would be cleaner to grab the SearchView source from https://android.googlesource.com/platform/frameworks/support.git/+/master/v7/appcompat/src/android/support/v7/widget/SearchView.java and create your own version of SearchView that does the hide/show of the close button.

Update:
Google just announced AppCompat v21, which has styling improvements for the SearchView widget:
http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html

Answer:

You can also use this to hide the close the button

ImageView closeBtn = (ImageView) searchView.findViewById(R.id.search_close_btn);
closeBtn.setEnabled(false);
closeBtn.setImageDrawable(null);

Answer:

You can get a link to the button from a SearchView object (AppCompat v23.2.1):

searchView = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id.action_search));
ImageView mCloseButton = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);

Then you can assign a listener to the SearchView text changes (SearchView also changes the visibility of the button, but the listener will be executed afterwards and will override those changes):

searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
    @Override
    public boolean onQueryTextSubmit(String query) {
        return false;
    }

    @Override
    public boolean onQueryTextChange(String newText) {
        mCloseButton.setVisibility(newText.isEmpty() ? View.GONE : View.VISIBLE);
        return false;
    }
});

And finally, a listener to hide the icon when SearchView is expanded from iconified state:

searchView.setOnSearchClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // hide "x" button if there is no text
        String query = searchView.getQuery().toString();
        mCloseButton.setVisibility(query.isEmpty() ? View.GONE : View.VISIBLE);
    }
});

Answer:

Posting for future visitors. Previous answers are old and not easy. All you have to do is to set null to app:closeIcon this way app:closeIcon="@null"

  <androidx.appcompat.widget.SearchView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:closeIcon="@null"   <!-- This simple solution -->
    app:iconifiedByDefault="false" />

Answer:

With AndroidX, android.support.v7.appcompat.R.id.search_close_btn won’t work

This will do the trick,

app:closeIcon="@null"