Style Android SearchView Drop down popup

Question

I would like to know how to style the drop down popup of the Android 4.0 SearchView ?

I'm using the Theme.Sherlock.Light.DarkActionBar, but I don't know how to style the drop down search into a white background and a black text?

Answer 1

For some reason theming using the "searchAutoCompleteTextView" wasn't working for me either. So I solved it using the following code when setting up my SearchView:

Note: This is all done with the android v7 support/AppCompat library

public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.search_menu, menu);

    MenuItem searchItem = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);

    // Theme the SearchView's AutoCompleteTextView drop down. For some reason this wasn't working in styles.xml
    SearchAutoComplete autoCompleteTextView = (SearchAutoComplete) searchView.findViewById(R.id.search_src_text);

    if (autoCompleteTextView != null) { 
        autoCompleteTextView.setDropDownBackgroundResource(R.drawable.abc_search_dropdown_light);
    }
}

There are two search drop down resources provided by the compatibility library, they are

• R.drawable.abc_search_dropdown_light (Light background)
• R.drawable.abc_search_dropdown_dark (Dark background)

Answer 2

There're multiple steps of doing so

Firstly, you need to create a custom drawable with four states, you can refer to {ABSLibrary}/res/drawable/abs__list_selector_holo_dark.xml. It will be something like this :

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_window_focused="false" android:drawable="@android:color/transparent" />

<!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
<item android:state_focused="true"  android:state_enabled="false" android:state_pressed="true" android:drawable="@drawable/abs__list_selector_disabled_holo_dark" />
<item android:state_focused="true"  android:state_enabled="false"                              android:drawable="@drawable/abs__list_selector_disabled_holo_dark" />
<item android:state_focused="true"                                android:state_pressed="true" android:drawable="@drawable/abs__list_selector_background_transition_holo_dark" />
<item android:state_focused="false"                               android:state_pressed="true" android:drawable="@drawable/abs__list_selector_background_transition_holo_dark" />
<item android:state_focused="true"                                                             android:drawable="@drawable/abs__list_focused_holo" />

Save the custom drawable above (.xml format) into your own project res/drawable. Edit the styles accordingly by referring the sample above. Please note that the style might be deeply nested, just be patience looking down the tree.

Then create (or put into existing custom theme) a custom theme with the following, it should be saved as res/values/styles.xml:

<style name="Theme.MyCustomTheme" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="searchAutoCompleteTextView">@style/MySearchAutoCompleteTextView</item></style>

<style name="MySearchAutoCompleteTextView" parent="Sherlock.__Widget.SearchAutoCompleteTextView">
<item name="android:dropDownSelector">@drawable/myCustomDrawable_DropDown</item>
<item name="android:popupBackground">@drawable/myCustomDrawable_popupBackground</item></style>

Please note that the "myCustomDrawable_DropDown" and "myCustomDrawable_popupBackground" has to be the name of the custom drawable which you have just created.

You just have to know that the "android:dropDownSelector" and/or "android:popupBackground" are those who are responsible for the theming of the autocomplete popup box.

Finally, apply the theme in your Manifest!

<application
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/Theme.MyCustomTheme" > ...