CODEWITHSUNDEEP
androidandroid-actionbarsearchview
Mureed Hussain
Mureed Hussain

Reputation: 2795

Android Actionbar SearchView change icon and remove extra spacing

I am implementing SearchView. I have added Search view and all its functionality successfully. Now i want to make it looks great.

I need two changes i tried every thing but nothing worked for me :

  1. I want to change search icon.
  2. I want to remove extra spacing at left side of searchView.

This is how currently my searchView looks like:

enter image description here

And here is what i want to make

enter image description here

menu/menu_search_action.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">

<item
    android:id="@+id/action_search"
    android:icon="@drawable/location_icon"
    android:orderInCategory="100"
    android:title="@string/action_search"
    app:actionViewClass="android.support.v7.widget.SearchView"
    app:showAsAction="always|collapseActionView" />

SearchCategoriesActivity.java

    @Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu_search_action, menu);


    MenuItem searchItem = menu.findItem(R.id.action_search);
    searchItem.expandActionView();
    MenuItemCompat.setOnActionExpandListener(searchItem, new MenuItemCompat.OnActionExpandListener() {
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {

            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {

            //DO SOMETHING WHEN THE SEARCHVIEW IS CLOSING
            back();
            return false;
        }
    });

    SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
    searchView = (SearchView) MenuItemCompat
            .getActionView(searchItem);
    if (searchView != null) {
        searchView.setSearchableInfo(searchManager
                .getSearchableInfo(getComponentName()));
        searchView.setIconifiedByDefault(false);
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
                    @Override
                    public boolean onQueryTextSubmit(String query) {
                        callSearch(query);
                        return true;
                    }

                    @Override
                    public boolean onQueryTextChange(String newText) {
                        callSearch(newText);
                        return true;
                    }
                });
    }

    for (TextView textView : findChildrenByClass(searchView, TextView.class)) {
        textView.setTextColor(Color.WHITE);
    }
    return super.onCreateOptionsMenu(menu);

}


@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            back();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

@Override
public void onBackPressed() {
    back();
}

private void back() {
    finish();
}

public static <V extends View> Collection<V> findChildrenByClass(
        ViewGroup viewGroup, Class<V> clazz) {
    return gatherChildrenByClass(viewGroup, clazz, new ArrayList<V>());
}

private static <V extends View> Collection<V> gatherChildrenByClass(
        ViewGroup viewGroup, Class<V> clazz, Collection<V> childrenFound) {

    for (int i = 0; i < viewGroup.getChildCount(); i++) {
        final View child = viewGroup.getChildAt(i);
        if (clazz.isAssignableFrom(child.getClass())) {
            childrenFound.add((V) child);
        }
        if (child instanceof ViewGroup) {
            gatherChildrenByClass((ViewGroup) child, clazz, childrenFound);
        }
    }

    return childrenFound;
}

Upvotes: 4

Views: 3027

Answers (3)

Ravi.Dudi
Ravi.Dudi

Reputation: 1364

set the MaxWidth programmatically to SearchView in onCreateOptionsMenu()

@override 
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu_search, menu);
    SearchView searchView = (SearchView)menu.findItem(R.id.menu_search).getActionView();
    searchView.setMaxWidth(Integer.MAX_VALUE);

For people using Kotlin 

searchview.maxWidth = Integer.MAX_VALUE

Upvotes: 2

niketshah09
niketshah09

Reputation: 490

Extra space between navigationBackButton and SearchView can be removed by adding app:contentInsetStartWithNavigation="0dp" in your toolbar.

<androidx.appcompat.widget.Toolbar 
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:contentInsetStartWithNavigation="0dp" />

Upvotes: 4

vidulaJ
vidulaJ

Reputation: 1270

Add a separate Theme as following for changing the search icon.

<style name="AppTheme.SearchView" parent="Widget.AppCompat.SearchView">
    <item name="searchIcon">@mipmap/ic_search_white</item>
    <item name="closeIcon">@mipmap/ic_clear_white</item>
</style>

Inside your Base Theme

<!-- Base application theme. -->
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

    <item name="searchViewStyle">@style/AppTheme.SearchView</item>

</style>

Upvotes: 5

Related Questions