Changing the background color of searchview autocomplete dropdown

Question

I have a searchview with a content provider for custom suggestions, which are displayed in a dropdown. However, the dropdown background is dark while the text is black so it's not very visible. My app theme is inheriting from Theme.AppCompat.Light so everything else in my app is black text on a light background.

I want to change the background of the dropdown so the text is readable but I haven't found any way of doing so. The closest I got was following the solution here: Style Android SearchView Drop down popup But when the dropdown appears, stuff looks messed up.

Is there any working solution for this?

Answer 1

Applying styles you can change the dropdown background color and the items text color and size

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

Answer 2

Here's one possibility.

Define a query suggestion row layout, e.g. R.layout.li_query_suggestion, that looks like this:

<?xml version="1.0" encoding="utf-8"?>
<TextView
    android:id="@android:id/text1"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:gravity="center_vertical"
    android:minHeight="56dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:textColor="@android:color/black"
    tools:text="Blah blah blah"/>

Notice that the background color is white and the text color is black. You can, of course, change these values.

Then, in your cursor adapter, specify the layout you created as the row layout. E.g.:

CursorAdapter suggestionAdapter = new SimpleCursorAdapter(
    getActivity(), 
    R.layout.li_query_suggestion, 
    null, 
    new String[]{"name"}, 
    new int[]{android.R.id.text1}, 
    0);

This will give you something that looks like the following:

Just fyi, my current theme looks like this:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/light_blue_500</item>
    <item name="colorPrimaryDark">@color/light_blue_700</item>
    <item name="colorAccent">@color/pink_a200</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="searchViewStyle">@style/CustomSearchView</item>
</style>

Answer 3

i think you should use

SearchView.SearchAutoComplete autoCompleteTextView = (SearchView.SearchAutoComplete) searchView.findViewById(R.id.search_src_text);
if (autoCompleteTextView != null) {
    autoCompleteTextView.setDropDownBackgroundDrawable(getResources().getDrawable(R.drawable.abc_popup_background_mtrl_mult));
}

this can set the SearchAutoComplete dropdown background to Light

Answer 4

Simple solution

int autoCompleteTextViewID = getResources().getIdentifier("search_src_text", "id", getPackageName());
mSearchAutoCompleteTextView = mSearchView.findViewById(autoCompleteTextViewID);
mSearchAutoCompleteTextView.setDropDownBackgroundResource(R.color.white);