Styling android search view and drop down list in actionbar

Question

In my app, I have a searchview that displays search suggestions. I want the dropdown/spinner and text to be a particular color. Currently the only change I've been able to make is the text color of the inputted text via the following:

   <style name="MyApp.AutoCompleteTextView" parent="Widget.AppCompat.Light.AutoCompleteTextView">
    <item name="android:textColor">@color/white</item>
    <item name="android:textCursorDrawable">@null</item>
    <item name="android:background">@color/myBackgroundColor</item>
  </style>

The app currently displays the searchview results like this:

What I would like to know is how would I go about changing parts like the searchHint color, the drop down background and the drop down item text color?

I am targeting API 19+

Lepanto

Answer 1

So after a lot of searching, the closest solution I can find to this is as follows (thanks to GZ95's answer!):

SearchView searchView = new SearchView(context);
LinearLayout linearLayout1 = (LinearLayout) searchView.getChildAt(0);
LinearLayout linearLayout2 = (LinearLayout) linearLayout1.getChildAt(2);
LinearLayout linearLayout3 = (LinearLayout) linearLayout2.getChildAt(1);
AutoCompleteTextView autoComplete = (AutoCompleteTextView) linearLayout3.getChildAt(0);
//Set the input text color
autoComplete.setTextColor(Color.WHITE);
// set the hint text color
autoComplete.setHintTextColor(Color.WHITE);
//Some drawable (e.g. from xml)
autoComplete.setDropDownBackgroundResource(R.drawable.drop_down_bg);

It's not the most elegant but it has worked for me. The only question I have outstanding is how to change the suggested item text color. I am welcome to hear more optimal solutions to this problem

Lepanto

jedikv here try a cleaner soution: SearchView.SearchAutoComplete autoComplete = (SearchView.SearchAutoComplete) searchView.findViewById(R.id.search_src_text); autoComplete.setDropDownBackgroundResource(R.drawable.drop_down_bg); – Manlike

This was the only solution that have worked for me. Thanks – Uppercase

Answer 2

In your styles.xml, set the following to your AppTheme

<style name="AppTheme" parent="AppTheme.Base">
    <!-- Customize your theme here. -->
    <item name="android:dropDownItemStyle">@style/myDropDownItemStyle</item>
</style>

<style name="myDropDownItemStyle" parent="Widget.AppCompat.DropDownItem.Spinner">
    <item name="android:textColor">@color/secondary_text_default_material_light</item>
</style>

This can change the drop down item text color. Have a try.

Topliffe

How about without AppCompat? – Shama

@Shama change the myDropDownItemStyle 's parent style to the non-AppCompat style. What's your base theme? – Topliffe

Hi. My parent main style is android:style/Theme.Holo.Light.DarkActionBar. Now I tried to use style <name="MyDropDownItemStyle" parent="@android:style/Widget.Holo.DropDownItem"> <item name="android:textAppearance">@style/MyDropDownItemTextAppearance</item> </style> <style name="MyDropDownItemTextAppearance"> <item name="android:textColor">@android:color/black</item> </style> but it certainly does not work. Instead of android:style/Widget.Holo.DropDownItem I tried sth with Spinner in it to mimic your style, but it did not work either. – Shama

Seems Theme.Holo.Light is different with AppCompat. I found <item name="textAppearanceSearchResultTitle">@style/TextAppearance.Holo.Light.SearchResult.Title</item> In Theme.Holo.Light .You can look up the theme source code to find a solution. @Shama – Topliffe

Answer 3

You can define the following styles in the res/styles.xml if you're using android.support.v7.widget.SearchView.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="autoCompleteTextViewStyle">@style/myAutoCompleteTextViewStyle</item>
    <item name="textAppearanceSearchResultTitle">@style/mySearchResult</item>
</style>

<style name="myAutoCompleteTextViewStyle" parent="Widget.AppCompat.Light.AutoCompleteTextView">
    <item name="android:popupBackground">#ffffff</item>
</style>

<style name="mySearchResult" parent="TextAppearance.AppCompat.SearchResult.Title">
    <item name="android:textColor">#000000</item>
</style>

If you're using the default SearchView, the attributes should be "android:autoCompleteTextViewStyle" and "android:textAppearanceSearchResultTitle". I've written a post describing the details about this.

Shoeblack

the only solution that works on Android 4.2. Thanks! – Alexipharmic

Worked for me and the blog post is nice and succinct, thanks! – Luciferin

Answer 4

With styles you change the background of the dropdown and the items text color

<!-- ToolBar -->
<style name="ToolBarStyle" parent="Theme.AppCompat">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/white</item>
    <item name="android:dropDownItemStyle">@style/myDropDownItemStyle</item>
    <item name="android:dropDownListViewStyle">@style/myDropDownListViewStyle</item>
</style>


<style name="myDropDownItemStyle" parent="Widget.AppCompat.DropDownItem.Spinner">
    <item name="android:textColor">@color/secondary_text_default_material_light</item>
    <item name="android:textSize">14dp</item>
</style>

<style name="myDropDownListViewStyle" parent="Widget.AppCompat.ListView.DropDown">
    <item name="android:background">#FFF</item>
</style>

Tiffa

Answer 5

You could define suggestionRowLayout in themes.xml:

<resources>
<style name="AppTheme" parent="AppTheme.Base">
    <item name="searchViewStyle">@style/AppTheme.SearchView</item>
</style>

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/bluegrey_500</item>
    <item name="colorPrimaryDark">@color/bluegrey_900</item>
    <item name="colorAccent">@color/teal_500</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
</style>

<style name="AppTheme.SearchView" parent="Widget.AppCompat.SearchView">
    <!-- The layout for the search view. Be careful. -->
    <!--<item name="layout">...</item>-->
    <!-- Background for the search query section (e.g. EditText) -->
    <!--<item name="queryBackground">@color/bluegrey_400</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">@drawable/abc_ic_voice_search_api_mtrl_alpha</item>-->
    <!-- Commit icon shown in the query suggestion row -->
    <!--<item name="commitIcon">...</item>-->
    <!-- Layout for query suggestion rows -->
    <item name="suggestionRowLayout">@layout/item_suggestion_place</item>
</style>

Itagaki

Answer 6

I had the same problem (white text in suggestions on white background), but all answers don't work for me. So I finally solved this with changing textColor attribute for TextView for adapter, attached to AutoCompleteTextView:

code:

AutoCompleteTextView autoComplete = ...;
List<String> suggestions = Arrays.asList("a", "b", "c");
ArrayAdapter<String> adapter = new ArrayAdapter<>(context, R.layout.dropdown_item, suggestions);
autoComplete.setAdapter(adapter);

dropdown_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
      android:textColor="#000000"
      ...
/>

Rf