Android ActionBar Customize Search View

Tobias Reich picture Tobias Reich · Jan 3, 2013 · Viewed 84k times · Source

--- SOLVED THE PROBLEMS - ADDED THE ANSWERS IN EDIT TEXT ---

I'm using the ActionBar Sherlock in my Android App. There I want to show a SearchView. It works fine so far but I realize, I'm doing something wrong when trying to customize it.

I create it this way:

searchView.setQueryHint("Search: ");
searchView.setOnQueryTextListener(this);
searchView.setOnCloseListener(...);

searchMenuItem = menu.add("Search place");
searchMenuItem.setIcon(R.drawable.ic_action_search)
              .setActionView(searchView)
              .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM |  MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW);

I want to do two things:

  1. Change the color of the text "Search" which is shown in the appearing text field. It looks like I changed it with the overall text style in my theme but I hope I can set a separate color somehow.

  2. When opening this search View, it appears on the left side of the Action Bar. But I need it on the right side. The icon (the magnifier) actually is on the right side of the bar but pressing it opens the EditTextfield on the left side. I tried to use LayoutParams but I'm missing something essential when trying to add it to the Action Bar by using LayoutParams.

enter image description here

So hopefully someone might help me with that.

Thank you very much, Tobias

---- EDIT ----

Okay, so one thing is solved with this already. Adding the ActionBar by XML makes the TextEdit to the right.

getSupportMenuInflater().inflate(R.menu.activity_main, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) searchItem.getActionView();
Log.e(TAG, "searchView: " + searchView);

And in my menu.xml

<item android:id="@+id/action_search"
 android:title="Search"
 android:icon="@drawable/ic_action_search"          
 android:showAsAction="always"
 android:actionViewClass="com.actionbarsherlock.widget.SearchView" />

So at least one mystery solved (why ever this made a difference). But the newly created XML Doesn't close anymore when calling

searchMenuItem.collapseActionView();

So there is still something wrong with it.

--- EDIT 2 ---

Just to let you know. I found the solution for the text color. It can be achieved by using the AutoCompleteTextView of the SearchView:

AutoCompleteTextView searchText = (AutoCompleteTextView) searchView.findViewById(R.id.abs__search_src_text);
searchText.setHintTextColor(getResources().getColor(R.color.white));
searchText.setTextColor(getResources().getColor(R.color.white));    

So the last problem I have is that the SearchView is not closing any longer when submitting a text. So collapseActionView() etc. doesn't work. Any ideas?

--- EDIT 3 ---

Okay, I found a solution. I don't know if this is the correct way to do that but when using

((SearchView) searchMenuItem.getActionView()).setIconified(true);

it closes the EditText

I have to do it twice because the first time is only "deleting" my input text and shows the "hint" whereas the second use is "closing" the Hint EditText and collapses the searchView to the magnifier. Clumsy style but it works. :-)

Answer

ademar111190 picture ademar111190 · Jun 4, 2014

I did a class SearchViewFormatter to format easily the native SearchView android widget. An example:

new SearchViewFormatter()
            .setSearchBackGroundResource(R.drawable.my_bg)
            .setSearchIconResource(R.drawable.my_ic, true, false) //true to icon inside edittext, false to outside
            .setSearchVoiceIconResource(R.drawable.my_ic)
            .setSearchTextColorResource(R.color.my_color)
            .setSearchHintColorResource(R.color.my_color)
            .setSearchCloseIconResource(R.drawable.my_ic)
            .setInputType(InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS)
            .format(mSearchView);