TextInputLayout label overlapping AppCompatAutoCompleteTextView input

472 Views Asked by At

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

3

There are 3 best solutions below

1
On BEST ANSWER

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>
0
On

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>
    
0
On

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>