Android: Issues Styling a Material Outlined Dropdown Menu

Question

I have com.google.android.material.textfield.MaterialAutoCompleteTextView wrapped by a com.google.android.material.textfield.TextInputLayout and I managed to get it to the point where is almost looks like a Material Outlined Dropdown Menu. Right now I see a weird background on the top right label and extra black space on the top and bottom of the drop down and I can't seem get rid of it.

[![enter image description here][1]][1]

 <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/dropdown1"
                    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
                    app:layout_constraintTop_toTopOf="parent"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:boxStrokeColor="@color/plum"
                    android:textColorHint="@color/slate_3"
                    android:background="@color/white"
                    app:boxBackgroundColor="@color/white"
                    app:endIconTint="@color/plum"
                    android:hint="@string/asset_type"
                    app:theme="@style/Theme.MaterialComponents">
    
                    <com.google.android.material.textfield.MaterialAutoCompleteTextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="none"
                        android:textColor="@color/slate_4"
                        android:padding="@dimen/margin_padding_medium"
                        app:theme="@style/Theme.MaterialComponents"/>
                </com.google.android.material.textfield.TextInputLayout>





var textField = findViewById<TextInputLayout>(R.id.dropdown1)
        val items = listOf("Option 1", "Option 2", "Option 3", "Option 4")
        val adapter = ArrayAdapter(this, R.layout.dropdown_list_item, items)
        (textField.editText as? MaterialAutoCompleteTextView)?.setAdapter(adapter)




<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:maxLines="1"
    android:textSize="@dimen/text_size_large"
    android:textColor="@color/black"
    android:background="@color/white"
    android:padding="@dimen/margin_padding_medium"/>

[UPDATE 1]

I was able to remove the black bars on top and bottom of dropdown by setting a background drawable on the AutoCompleteTextView:

(textField.editText as? AutoCompleteTextView)?.setDropDownBackgroundDrawable( getDrawable(R.drawable.outlined_dropdown_bkgrd))

I still see the gray background on the label in the top left though.

---

[UPDATE 2 : March 25 2021]

Almost there....

The answer below by @Martin Zeitler lead me to figuring out that I needed to set a Material based theme on my activity definition in my manifest because the app:theme="@style/Theme.MaterialComponents" was causing issues. I could not set the Material based theme to my entire app as it may cause issues to legacy code. So as a result I used themes in my style resource to set all the styles for the TextInputLayout and AutoCompleteTextView:

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/dropdown1"
                style="@style/SecondaryTheme.TextInputLayout.ExposedDropdownMenu"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/SecondaryTheme.TextInputLayoutTheme.ExposedDropdownMenu"
                app:layout_constraintTop_toTopOf="parent">

                <AutoCompleteTextView
                    android:id="@+id/autocomplete_performance"
                    style="@style/SecondaryTheme.EditText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="This is the hintv5"
                    android:popupTheme="@style/SecondaryTheme.DropDownStyle"
                    android:singleLine="true"
                    android:inputType="none"/>
            </com.google.android.material.textfield.TextInputLayout>

Answer 1

Probably remove app:theme="@style/Theme.MaterialComponents" (in order to see if it may interfere) and try another style (or just customize the current style); these base styles are generally available:

Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu
Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu
Widget.MaterialComponents.TextInputLayout.FilledBox.Dense.ExposedDropdownMenu
Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu

In styles.xml that would be:

parent="Widget.MaterialComponents.TextInputLayout.*.ExposedDropdownMenu"

See chapter Implementing exposed dropdown menu theming for an example. There it also reads:

... you don't need to specify a style tag on the AutoCompleteTextView.