46
votes

--- 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. :-)

4
please have a look at this question . stackoverflow.com/questions/13560438/…itsrajesh4uguys
Well, if I understand this right, they are solving it by using an own EditText. I was hoping for a simple "setTextColor" way but it doesn't seem to be that easy.Tobias Reich
Okay, I solved the color problem. But there is still the closing of the SearchView which doesn't work. Thank you anyway for your help!Tobias Reich
try to disable the focus from the view (if you are used edit text)itsrajesh4uguys
Funny enough, I solved it by using ((SearchView) searchMenuItem.getActionView()).setIconified(true); But I have to use it twice since the first one is "closing" my own text (and shows the hint) and the second one is then closing the hint and shows the magnifier. Weird but it works this way... If anyone has a better solution, let me know but for now, I'm happy! :-)Tobias Reich

4 Answers

29
votes

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);
15
votes

FYI now with ActionBar support v7 appcompat the way for change query hint color, text color, text size:

import android.support.v4.view.MenuItemCompat;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.SearchView.SearchAutoComplete;

...

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_home, menu);
    MenuItem searchItem = menu.findItem(R.id.item_search);
    mSearchView = (SearchView) MenuItemCompat.getActionView(searchItem);
    mSearchView.setOnQueryTextListener(this);
    mSearchView.setQueryHint(getString(R.string.text));
    SearchAutoComplete searchAutoComplete = (SearchAutoComplete) mSearchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
    searchAutoComplete.setHintTextColor(mRes.getColor(android.R.color.white));
    searchAutoComplete.setTextSize(14);

    return super.onCreateOptionsMenu(menu);
}
6
votes

I did rounded corner for Edit Text like this.

int searchPlateId = searchView.getContext().getResources().getIdentifier("android:id/search_plate", null, null);
        View searchPlate = searchView.findViewById(searchPlateId);
        searchPlate.setBackgroundResource(R.drawable.bg_white_rounded);

        int searchSrcTextId = getResources().getIdentifier("android:id/search_src_text", null, null);
        EditText searchEditText = (EditText) searchView.findViewById(searchSrcTextId);
        searchEditText.setTextColor(Color.BLACK);
        searchEditText.setHintTextColor(Color.LTGRAY);

        int closeButtonId = searchView.getContext().getResources().getIdentifier("android:id/search_close_btn", null, null);
        ImageView closeButtonImage = (ImageView) searchView.findViewById(closeButtonId);
        closeButtonImage.setColorFilter(ContextCompat.getColor(MainActivity.this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN);

bg_white_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff"/>
    <corners android:radius="8dp"/>
</shape>

Before click search button

After click search button

<SearchView
                android:id="@+id/searchView"
                android:layout_width="match_parent"
                android:queryHint="Serach"
                android:layout_height="match_parent"></SearchView>
1
votes

To resolve your number 2 question

Change this line:

.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM |  MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW);

To:

.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

use only SHOW_AS_ACTION_IF_ROOM parameter on setShowAsAction() method