Home » Android » android – Changing the background color of searchview autocomplete dropdown

android – Changing the background color of searchview autocomplete dropdown

Posted by: admin June 15, 2020 Leave a comment

Questions:

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.

enter image description here

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.

enter image description here

Is there any working solution for this?

How to&Answers:

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:

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:
enter image description here

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:

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:

Simple solution

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

enter image description here