How to change SearchView back button

Question

I have a SearchView on my Toolbar and I want to change the icon of the default back button.

This is my toolbar:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_awesome_toolbar"
    android:layout_width="fill_parent"
    android:layout_height="?android:attr/actionBarSize"
    app:titleTextColor="@android:color/black"
    android:elevation="5dp">

</android.support.v7.widget.Toolbar>

And this is the layout of my SearchView:

<?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/search"
        android:title="@string/search"
        app:icon="@drawable/ic_search_black_24dp"
        android:icon="@drawable/ic_search_black_24dp"
        app:showAsAction="always|collapseActionView"
        android:maxWidth="50dp"
        app:actionViewClass="android.support.v7.widget.SearchView"/>

</menu>

And this is how I create my option menu in my activity:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_search_team, menu);

    SearchManager searchManager = (SearchManager)
            getSystemService(Context.SEARCH_SERVICE);
    searchMenuItem = menu.findItem(R.id.search);

    searchView = (SearchView) searchMenuItem.getActionView();

    ImageView searchClose = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);
    searchClose.setImageResource(R.drawable.ic_action_cancel_black);
    searchClose.setVisibility(View.VISIBLE);

    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) searchClose.getLayoutParams();
    params.gravity = Gravity.RIGHT;
    searchClose.setLayoutParams(params);

    searchClose.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {

            //Clear query
            searchView.setQuery("", false);
            //Collapse the action view
            searchView.onActionViewCollapsed();
            //Collapse the search widget
            searchMenuItem.collapseActionView();

            listview.setVisibility(View.GONE);

            viewPager.bringToFront();

            appBarLayout.setVisibility(View.VISIBLE);
        }
    });

    for (TextView textView : findChildrenByClass(searchView, TextView.class)) {
        textView.setTextColor(Color.BLACK);
        textView.setHintTextColor(Color.BLACK);
    }

    searchView.setSearchableInfo(searchManager.
            getSearchableInfo(getComponentName()));
    searchView.setSubmitButtonEnabled(true);
    searchView.setOnQueryTextListener(this);

    return true;
}

The output of this is:

What I want is to hide this icon on the right or at least change the icon to the "x" image that I am defining as an ImageView in the code that I posted about my Activity.

Sam · Answer 1 · 2017-09-20T23:59:22.490

5

Just change it by Style is the easiest way.

<style name="Theme.myCustomThemeForMyApp" parent="android:Theme.Holo">
<item name="android:homeAsUpIndicator">@drawable/myCustomUpIndicator</item>

Here I will modify to help further.

   <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowBackground">@color/white</item>
    <item name="android:actionMenuTextColor">@color/white</item>
    <item name="android:homeAsUpIndicator">@drawable/ic_account</item>
</style>

This is a normal example of a base theme that modifies the primary color, primary dark, accent, windowbackground actionmenu text color and lastly the homeAsUpIndicator drawable.

Then just apply it to your activity or app like this:

<application
    android:name="com.appstudio35.application.A35Application"
    android:allowBackup="true"
    android:icon="@drawable/app_icon"
    android:label="@string/app_name"
    android:roundIcon="@drawable/app_icon"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

You may also choose to move the theme to a substyle like that extends the parent theme and remove the up drawable from the base theme to avoid affecting all activities:

 <style name="AppTheme.CustomUp">
    <item name="android:homeAsUpIndicator">@drawable/ic_account</item>
</style>

and only apply to a specific Activity like this:

<activity
        android:name="com.appstudio35.activities.MainActivity"
        android:screenOrientation="portrait"
        android:theme="@style/AppTheme.CustomUp"/>

edited Sep 20 '17 at 23:59

answered Sep 20 '17 at 23:47

Sam

5,342
1
23
39

Thanks for the reply! How can I apply this style to the SearchView? – Marcos Guimaraes Sep 20 '17 at 23:51
Styles are applied through the manifest. You already have a default AppTheme in your styles folder, just make an item like above that points to your drawable. Then simply assign that style to your activity or application for AppTheme and it will work. By assigning AppTheme to your Application it propagates through the activities. Then by overriding android:defaultStuff you are controlling the style of android controls. Make sense? You can do a lot with styling. – Sam Sep 20 '17 at 23:54
Hi, currently when I click on the searchView icon, searchView opens and listView appears. When I click the "searchView's "Back" arrow button it closes searchView but leaves listView opened. How do I make the searchView's "back" button close the listView at the same time it closes searchView? – iBEK Dec 06 '17 at 22:41
Hi iBek, just handle it in the option item selected method. @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { // Respond to the action bar's Up/Home button case android.R.id.home: finish(); return true; default: return super.onOptionsItemSelected(item); } } – Sam Dec 07 '17 at 16:35
@iBEK here is code to collapse and clear mSearchView.setIconified(true); mSearchView.onActionViewCollapsed(); – Sam Dec 07 '17 at 16:37
Is there a way that I can change the back button icon dynamically in code? – nuynait Jul 13 '20 at 18:51
1

sure @nuynait Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); toolbar.setNavigationIcon(R.drawable.ic_action_back); – Sam Jul 13 '20 at 21:09

score 0 · Answer 2 · answered Jun 16 '22 at 06:09

The icon to the right is called submit button, and it's explicitly set at your code in this line

searchView.setSubmitButtonEnabled(true);

remove the line and it won't be visible by default or set it to false

isSubmitButtonEnabled = false --> Kotlin

searchView.setSubmitButtonEnabled(false); --> Java

How to change SearchView back button

2 Answers2