How can I style the SearchView when using a Toolbar as an Action Bar?

Question

I'm using a Toolbar as an Action Bar in my app using the AppCompat v21 library, as described in this post on the Android Developers Blog. I've styled the action bar using theThemeOverlay.AppCompat.Dark.ActionBar theme so that the text is light. However, I'd like to make the Action Bar SearchView's search suggestion popup display dark text on a light background, and I've been unable to achieve this effect.

Here's the XML for my Action Bar Toolbar:

<android.support.v7.widget.Toolbar     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:id="@+id/toolbar_actionbar"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:minHeight="?attr/actionBarSize"     android:background="?attr/colorPrimary"     android:elevation="@dimen/action_bar_elevation"     app:theme="@style/ActionBarThemeOverlay"     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>  

I've tried extending the Action Bar theme overlay to style the SearchView:

<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">     <item name="searchViewStyle">@style/Widget.AppCompat.Light.SearchView</item> </style> 

I've added this same element to my main theme for good measure:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">     <item name="searchViewStyle">@style/Widget.AppCompat.Light.SearchView</item> </style> 

But the searchViewStyle elements don't seem to have any effect. How can I style the SearchView here?

Answer 1

As per the AppCompat v21 announcement blog post:

AppCompat offers Lollipop’s updated SearchView API, which is far more customizable and styleable (queue the applause). We now use the Lollipop style structure instead of the old searchView* theme attributes.

Here’s how you style SearchView (in values/themes.xml):

<style name="Theme.MyTheme" parent="Theme.AppCompat">    <item name="searchViewStyle">@style/MySearchViewStyle</item> </style> <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">    <!-- Background for the search query section (e.g. EditText) -->    <item name="queryBackground">...</item>    <!-- Background for the actions section (e.g. voice, submit) -->    <item name="submitBackground">...</item>    <!-- Close button icon -->    <item name="closeIcon">...</item>    <!-- Search button icon -->    <item name="searchIcon">...</item>    <!-- Go/commit button icon -->    <item name="goIcon">...</item>    <!-- Voice search button icon -->    <item name="voiceIcon">...</item>    <!-- Commit icon shown in the query suggestion row -->    <item name="commitIcon">...</item>    <!-- Layout for query suggestion rows -->    <item name="suggestionRowLayout">...</item> </style> 

As further researched in this blog post.

Answer 2

After digging into the source code and experimenting a bit, I've come up with a solution and cleared up a couple of sources of confusion. First, the SearchView style needs to be set in the app theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">     <item name="searchViewStyle">@style/MySearchViewStyle</item> </style> 

Then we need to set the suggestionRowLayout in the searchViewStyle:

<style name="MySearchViewStyle" parent="Widget.AppCompat.Light.SearchView">     <item name="suggestionRowLayout">@layout/search_suggestion_row</item> </style> 

In my question, I assumed that we could use @style/Widget.AppCompat.Light.SearchView to get a light suggestion menu, but it turns out that this isn't the case; we need to define our own layout. I based mine on abc_search_dropdown_item_icons_2line.xml from the AppCompat v21 library.