Android ActionBar Customize Search View

Question

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

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 1

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

Answer 2

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);
}

Answer 3

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>

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

Answer 4

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