4

Currently working on setting up an Exposed Dropdown menu item using the material design components and guidelines for menus. However when displaying my autocomplete text view it does not have the same background as my other text fields.

I have tried setting the boxBackgroundColor attribute on the TextInputLayout to a different color and modifying background on the Autocomplete TextView. Also I have tired seeing if I could modify the popup theme for the menu but have had no luck.

 // In the onCreateView of fragment

        ArrayAdapter<String> adapter = new ArrayAdapter<>(getContext(), R.layout.dropdown_menu_popup_item, getResources().getStringArray(R.array.down_payment_method_selection));
        monthsAtEmploymentSelection.setAdapter(adapter);


<com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"
                android:hint="@string/months_at_employment_hint"
                app:boxBackgroundColor="@color/white">

                <AutoCompleteTextView
                    android:id="@+id/months_at_employment_selection"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </com.google.android.material.textfield.TextInputLayout>

<!--dropdown_menu_popup_item.xml-->
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:textAppearance="?attr/textAppearanceSubtitle1"
    android:background="@color/white"/>

I would like the background to be transparent or match the current background that is set to white. Currently it is an off white that does not match the fields.

Example of color problems when using extended dropdown menu style

Dijkgraaf
  • 11,049
  • 17
  • 42
  • 54
Steven Elliott
  • 113
  • 1
  • 6

3 Answers3

10

Thanks to this issue, I learn that this can be done programatically:

val autoCompleteTv = binding.yourAutoCompleteTextView
autoCompleteTv.setDropDownBackgroundDrawable(
        ColorDrawable(ContextCompat.getColor(context, R.color.your_desired_color))
)
Emmanuel Guerra
  • 1,372
  • 1
  • 12
  • 20
7

By setting the attribute app:boxBackgroundColor="@color/yourcolor" on the TextInputLayout field in your layout file should correctly modify the background color.

You may also need to set the child elements android:background="@null", in my case the AutoCompleteTextView to correctly honor the boxBackgroundColor attribute. Per documentation the only time you should need to set the child elements background color is with an edittext field however I found I needed it with the autocomplete view due to how the apps bridge theme is set.

Steven Elliott
  • 113
  • 1
  • 6
0

You used style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu" as a style in AutoCompleteTextView.

Change that Light Gray colour in style.xml to your specific colour.

Pradip Vadher
  • 176
  • 8
  • 1
    That style is defined in the Material Components library, so I have nothing to change in my style.xml resource, nor have I defined that light gray color. In Order to have a dropdown/spinner using the material guidelines text field layout it is required to add that style to the TextInputLayout [see documentation](https://material.io/develop/android/components/menu/#exposed-dropdown-menus) – Steven Elliott Jun 18 '19 at 13:11