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?

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

Solution 2

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.

Solution 3

Here's an example of search_suggestion_row.xml

    <?xml version="1.0" encoding="utf-8"?>
<!--
/*
 * Copyright (C) 2014 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="58dip"
                style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown">

    <!-- Icons come first in the layout, since their placement doesn't depend on
         the placement of the text views. -->
    <android.support.v7.internal.widget.TintImageView
               android:id="@android:id/icon1"
               android:layout_width="@dimen/abc_dropdownitem_icon_width"
               android:layout_height="48dip"
               android:scaleType="centerInside"
               android:layout_alignParentTop="true"
               android:layout_alignParentBottom="true"
               android:visibility="invisible"
               style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown.Icon1" />

    <android.support.v7.internal.widget.TintImageView
               android:id="@+id/edit_query"
               android:layout_width="48dip"
               android:layout_height="48dip"
               android:scaleType="centerInside"
               android:layout_alignParentTop="true"
               android:layout_alignParentBottom="true"
               android:background="?attr/selectableItemBackground"
               android:visibility="gone"
               style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown.Query" />

    <android.support.v7.internal.widget.TintImageView
               android:id="@id/android:icon2"
               android:layout_width="48dip"
               android:layout_height="48dip"
               android:scaleType="centerInside"
               android:layout_alignWithParentIfMissing="true"
               android:layout_alignParentTop="true"
               android:layout_alignParentBottom="true"
               android:visibility="gone"
               style="@style/RtlOverlay.Widget.AppCompat.Search.DropDown.Icon2" />


    <!-- The subtitle comes before the title, since the height of the title depends on whether the
         subtitle is visible or gone. -->
    <TextView android:id="@android:id/text2"
              style="?android:attr/dropDownItemStyle"
              android:textAppearance="?attr/textAppearanceSearchResultSubtitle"
              android:singleLine="true"
              android:layout_width="match_parent"
              android:layout_height="29dip"
              android:paddingBottom="4dip"
              android:gravity="top"
              android:layout_alignWithParentIfMissing="true"
              android:layout_alignParentBottom="true"
              android:visibility="gone" />

    <!-- The title is placed above the subtitle, if there is one. If there is no
         subtitle, it fills the parent. -->
    <TextView android:id="@android:id/text1"
              style="?android:attr/dropDownItemStyle"
              android:textAppearance="?attr/textAppearanceSearchResultTitle"
              android:singleLine="true"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_centerVertical="true"
              android:layout_above="@android:id/text2" />

</RelativeLayout>
<!-- From: file:/usr/local/google/buildbot/repo_clients/https___googleplex-android.googlesource.com_a_platform_manifest.git/lmp-mr1-supportlib-release/frameworks/support/v7/appcompat/res/layout/abc_search_dropdown_item_icons_2line.xml -->