Material-components-android: Exposed Dropdown Menu TextInputLayout hint overlaps text

[VGJohn]

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

[cgoodroe]

Seeing this as well, did you find a workaround?

It seems like the hint floating label/animation on the TextInputLayout isn't working as well. It just starts in the post-animation state instead of moving there after a selection.

[VGJohn]

@cgoodroe No I couldn't find a way around this issue, sorry. I ended up having to make a compromise with the app design instead until it is fixed. I'm surprised something like this went unnoticed.

[cgoodroe]

@VGJohn I think I've figured it out. Two things are going on here.

1) Remove all of your margins and paddings. Then add padding="16dp" on your parent ConstraintLayout. I think this will get you most of the way there.

2) This was my main issue, where the hint didn't seem to be working properly. It turns out that the dropdown was actually grabbing focus, but it's really difficult to tell when it's not editable. I believe this is expected behavior when it's the first field in your view hierarchy. You can test this by adding a second field beneath it and tap into it, you'll see your hint drop back down into its expected state.

Hope this helps. In case it matters, my parent layout is LinearLayout, and my app themes are:

Theme.MaterialComponents.DayNight.Bridge
Theme.MaterialComponents.DayNight.NoActionBar.Bridge

[VGJohn]

@cgoodroe Good to know. I do need the margins around the view and the padding in the AutoCompleteTextView is to actually stop the hint and text from being placed completely against the left side of the drop down box, which feels like another bug. Also changing the AutoCompleteTextView to be editable didn't make any difference, the hint would still overlap the text.

I believe the root of the problem is the height of the TextInputLayout isn't being calculated correctly. If you look at a normal TextInputLayout with a TextInputEditText inside, the overall height is quite large to accommodate the hint text but the same height isn't being applied here when it should be. It's as if the dropdown here is removing the extra padding that's normally included for the hint in the TextInputEditText. You can see this by manually setting the height of the TextInputLayout above to be larger than normal and hint stops overlapping, only issue with this is the height has to be very large which isn't acceptable either.

[cgoodroe]

@VGJohn it seems my assumption in part 1 of my previous reply was incorrect anyway, as even copy pasting your exact code doesn't reproduce the issue for me. My final guess is the device, I'm developing on Pixels which are probably the least likely to expose bugs like that. Sorry I couldn't help, and good luck!

[hummblebee]

@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.

[VGJohn]

@aliakbarmostafaei nice find and thanks for the workaround! Hopefully it gets a proper fix soon!

[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

[VGJohn]

@simne7 haven't tried that, nice job finding it though. The material.io docs should be updated to reflect this if it really is the intended way to define this component.

https://material.io/develop/android/components/menu/

[gabrielemariotti]

It should work without any problem with 1.1.0 - 1.2.0- 1.3.0-alpha02.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/dropdown"
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="hint"
    app:helperText="helper">

    <AutoCompleteTextView
        android:id="@+id/value"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="item" />

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

I think that the issue is solved.

[leticiarossi]

thank you for checking! I don't see it happening on my side either so will close the issue. If anyone still finds it please reopen with a sample app.