Styling the SearchView Widget using support librar

Question

I'm trying to style the SearchView widget using the new AppCompat v21, but I'm facing some problems. No matter what layout I set on "suggestionRowLayout" attribute, it does nothing at all. The suggestion dropdown list of the SearchView remains the same way.

Other problem that I'm having is when the "accent color" is the same color as the "primary color", in the searchview is impossible to distinguish where is the caret. Do you know how can I change the accent color in the SearchView to only be applied there? I've found that Play Music has the same problem.

I'm following the guide from Android Developers blog:

http://android-developers.blogspot.com.es/2014/10/appcompat-v21-material-design-for-pre.html

Answer 1

My issue was that the Searchview was not of type android.support.v7.widget.SearchView, therefore all styling did not apply

 <item android:id="@+id/action_search"
        android:icon="@drawable/ic_action_search"
        android:title="@string/action_search"
        app:showAsAction="ifRoom"
        app:actionViewClass="android.support.v7.widget.SearchView"/>

Answer 2

According to what I have seen in the SearchView source suggestionRowLayout resource value in SearchView occurs when retrieving the attributes for the SearchView and in the method getSuggestionRowLayout(). On the other hand the implementation of SuggestionAdapter of v7 library is inflating abc_search_dropdown_item_icons_2line.

Idea for a workaround:

Try referencing different layout with help of refs.xml. Make sure you keep same ids for views as in abc_search_dropdown_item_icons_2line

 <item type="layout" name="abc_search_dropdown_item_icons_2line">@layout/my_suggestion_row</item>

Answer 3

suggestionsRowLayout wasn't working for me either.

In my case, I just needed to change the background color of each row and the text color.

So I just modified the layout of the View returned from newView() in my SuggestionsAdapter:

public class SuggestionsAdapter extends CursorAdapter
{
    public SuggestionsAdapter(Context context, Cursor cursor)
    {
        super(context, cursor, false);
    }

    @Override
    public void bindView(View view, Context context, Cursor cursor)
    {
        TextView tv = (TextView) view.findViewById(R.id.item);

        tv.setText(cursor.getString(COL_NAME));
    }

    @Override
    public View newView(Context context, Cursor cursor, ViewGroup parent)
    {
        LayoutInflater inflater = (LayoutInflater)
                context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        // I modified the layout of search_item.xml
        View view = inflater.inflate(R.layout.search_item, parent, false);

        return view;
    }
}

search_item.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="12dp" >

    <TextView
        android:id="@+id/item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/red" />

</LinearLayout>

You could of course set the background to a selector drawable for click highlights.