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

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.