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?

Lakeishalakeland

How can i change the bg color of searchview when expanded.? Is there any style property for this or should i use code?? – Astraphobia

Sorry, I don't know the answer to that question; it's been a while since I worked on this. – Lakeishalakeland

Its ok. Will figure it out. Thank you..! – Astraphobia

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.

Lakeishalakeland

Hi @Ben, I've added a style MySearchViewStyle and set close button, voice search button and suggestionsRowLayout and set this style as searchViewStyle in the app theme like you suggested but the searchview doesn't use that style. I'm using toolbar with theme set to ThemeOverlay.AppCompat.Dark.ActionBar. Could you please let me know if I'm missing something, I've read all the blogs about it, certainly I'm doing something wrong! – Mulish

@droidster Sorry, it's been a while since I've looked at this, and I'm still not sure whether my solution was the best approach, so I'm probably not the best person to ask. Sounds like it's probably worth opening a new question. Good luck! – Lakeishalakeland

No worries mate. I was able to sort it out. Just had to set the app theme in the toolbar layout. Thanks! This post helped me. – Mulish

Me working when use android.support.v7.widget.SearchView rather than android.widget.SearchView. – Eventful

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

Casease

Thanks! That's the route I was taking, but it turns out I was confused about a couple of things, as I describe in my answer. – Lakeishalakeland

@MichałK - it is working here. Feel free to ask a question with all your details! – Casease

Actually it was my stupid mistake. I used a custom adapter for suggestions – Geary

Is there any way to do this programmatically? – Beech

This doesn't work when using appcompat SearchView outside of the action bar (toolbar). Any ideas why? – Ketty

OK, I needed to use <item name="searchViewStyle"> instead of <item name="android:searchViewStyle"> in my theme, it works now. – Ketty

How can I change the text color of EditText in search view. I have tried <style name="SearchView" parent="Widget.AppCompat.SearchView"> <item name="android:inputType">textCapSentences|textNoSuggestions</item> <item name="android:textColor">@color/colorPrimary</item> </style> . and couldn't make it work . – Peradventure

@Peradventure - the EditText will be pulling the default coloring from your theme - make sure you're using the right ThemeOverlay on your Toolbar. – Casease

@shekar - all of AppCompat, this theming included, works down to API 7 – Casease

@ianhanniballake: How can i change the bg color of searchview when expanded.? Is there any style property for this or should i use code?? – Astraphobia

@BibinVelayudhan - queryBackground changes the background color of the EditText that is shown when the SearchView is expanded. – Casease

Quotes in this code need to be replaced with standard double quotes for it to compile. – Trichloride

I hate Android. – Alluvium

@Casease how I can change the result in this image ibb.co/N3WQ5Xg to remove the colored line on start of hint on focus and make it appears on query and also how can I change it's color , Also how can I add search icon on start on the searchview edittext and make it appears on focus and on query? it would be great if you can help – Meerkat

@Casease you can check the problem in details from this question #67767835 – Meerkat

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

Khaki

Answer 4

If it doesn;'t work you can code for it. I explain in this post. It is for xamarin forms, but i hope you can apply it to andoird native. You can change it's background, icon, clear icon as well as the color

How to change searchbar cancel button image in xamarin forms

Hog