Exposed Dropdown Menu TextInputLayout hint overlaps text

After following the sample for setting up an exposed dropdown menu, it appears that the hint text always overlaps the text for the selected item. Also I have to add padding to the AutoCompleteTextView otherwise the text and hint are completely aligned to the start of the TextInputLayout.

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/dropdown"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="hint"
        app:helperText="helper"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <AutoCompleteTextView
            android:id="@+id/value"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="item"
            android:editable="false" />

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

</androidx.constraintlayout.widget.ConstraintLayout>

Android API version: 28

Material Library version: 1.1.0-alpha08

Device: Samsung S8

[simne7]

@VGJohn Did you try giving the AutoCompleteTextView a style? Seem like style="@style/Widget.MaterialComponents.AutoCompleteTextView.FilledBox" solves your problem even without the nice workaround provided above.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/dropdown"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="hint"
        app:helperText="helper"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <AutoCompleteTextView
            style="@style/Widget.MaterialComponents.AutoCompleteTextView.FilledBox"
            android:id="@+id/value"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:text="item"
            android:editable="false"  />

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

</androidx.constraintlayout.widget.ConstraintLayout>

Using Theme.MaterialComponents.Light on this activity this gives me

[0xLem0nade]

@VGJohn @cgoodroe Had the same issue here, running library version 1.1.0-alpha10 on an HTC device. After taking a look at the source code the issue seems to be caused by calculateLabelMarginTop() inside TextInputLayout.java on line 1836: https://github.com/material-components/material-components-android/blob/7bb525ff591eca829fabe002e127671843abe122/lib/java/com/google/android/material/textfield/TextInputLayout.java#L1836

switch (boxBackgroundMode) {
  case BOX_BACKGROUND_OUTLINE:
    return (int) (collapsingTextHelper.getCollapsedTextHeight() / 2);
  case BOX_BACKGROUND_FILLED:
  case BOX_BACKGROUND_NONE:
    return (int) collapsingTextHelper.getCollapsedTextHeight();
  default:
    return 0;
}

Apparently the margin calculation in not implemented for the Filled Box menu type!!! Which is surprisingly what we are using in our case! So armed with this knowledge here’s a workaround:

• Add these properties to the InputLayout component inside XML layout:
  app:boxBackgroundMode="outline" app:boxStrokeWidth="0dp"
• Apply Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu for the style of InputLayout with desired customizations.

This helps to get the top margin calculation working but mimicking the filled box type by removing the border.