CODEWITHSUNDEEP
androidstylessearchview
dyancat
dyancat

Reputation: 1675

Changing the background color of searchview autocomplete dropdown

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?

Upvotes: 10

Views: 12355

Answers (4)

Zain
Zain

Reputation: 40830

Simple solution

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

enter image description here

Upvotes: 1

AntPachon
AntPachon

Reputation: 1192

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>

Upvotes: 16

MoMo Wang
MoMo Wang

Reputation: 111

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

Upvotes: 11

Justin Pollard
Justin Pollard

Reputation: 6679

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>

Upvotes: 11

Related Questions