TextInputLayout label overlapping AppCompatAutoCompleteTextView input

Question

I'm having an issue where my TextInputLayout label is being overlapped by the input within an AppCompatAutoCompleteTextView. My apologies if this has been answered before. Here is my code snippet:

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/commission_form_category_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

<androidx.appcompat.widget.AppCompatAutoCompleteTextView
                    android:id="@+id/commission_form_category_input"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/commission_form_category_label_text"
                    android:paddingHorizontal="16dp"
                    android:paddingVertical="16dp"
                    android:text="Hello"
                    android:singleLine="true"
                    android:textSize="16sp" />

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

Here is what it looks like: overlapping text

For `AutoCompleteTextView`s, you need to use an `ExposedDropdownMenu` style on the ``; e.g., `style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"`. — Mike M., Mar 06 '22 at 06:31
I didnt specifically need ExposedDropdownMenu, but I did need a style on TextInputLayout and I did need to remove my hardset padding in the auto complete text view. Thank you! — Bri_24, Mar 06 '22 at 18:43
If you don't use an `ExposedDropdownMenu` style with `AutoCompleteTextView`s, you might find that other things don't line up later. That is specifically what those styles are for. Just FYI. — Mike M., Mar 06 '22 at 18:44

score 0 · Answer 1 · answered Mar 06 '22 at 07:16

Change androidx.appcompat.widget.AppCompatAutoCompleteTextView to com.google.android.material.textfield.MaterialAutoCompleteTextView and add style to TextInputLayout

here is how it looks

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/commission_form_category_container"
    android:layout_width="match_parent"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
    android:hint="Hint"
    android:layout_height="wrap_content">

    <com.google.android.material.textfield.MaterialAutoCompleteTextView
        android:id="@+id/commission_form_category_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:singleLine="true"
        android:textSize="16sp" />

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

score 0 · Accepted Answer · answered Mar 06 '22 at 08:28

Try this-

 <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Example">

        <androidx.appcompat.widget.AppCompatAutoCompleteTextView
            style="@style/Widget.MaterialComponents.AutoCompleteTextView.FilledBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello" />
    </com.google.android.material.textfield.TextInputLayout>

Thank you! I needed to remove the padding from my AppCompatAutoCompleteTextView and add the style, the padding I was trying to set was messing up the format of the Auto Complete Text View — Bri_24, Mar 06 '22 at 18:41

score -1 · Answer 3 · answered Mar 06 '22 at 08:01

Instead of paddingVertical and paddingHorizontal you can specify padding via

paddingTop
paddingStart
paddingEnd

paddingBottom

 <com.google.android.material.textfield.TextInputLayout
     android:id="@+id/commission_form_category_container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
 <androidx.appcompat.widget.AppCompatAutoCompleteTextView
     android:id="@+id/commission_form_category_input"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:hint="@string/commission_form_category_label_text"
     android:paddingTop="24dp"
     android:paddingBottom="8dp"
     android:paddingStart="16dp"
     android:paddingEnd="16dp"
     android:text="Hello"
     android:singleLine="true"
     android:textSize="16sp" /></com.google.android.material.textfield.TextInputLayout>

TextInputLayout label overlapping AppCompatAutoCompleteTextView input

3 Answers3