Material-components-android: [TextInputLayout] Error text overlaps outline box

Created on 25 Feb 2020  路  7Comments  路  Source: material-components/material-components-android

Description:

When using the Widget.MaterialComponents.TextInputLayout.OutlinedBox style, the error text overlaps with the outline box:

image

Expected behavior:

It needs a little more top padding.

Source code:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/text_input_username"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/login_email"
    app:layout_constraintBottom_toTopOf="@id/text_input_password"
    app:layout_constraintEnd_toStartOf="@id/guideline_end"
    app:layout_constraintStart_toEndOf="@id/guideline_start"
    app:layout_constraintTop_toBottomOf="@id/text_welcome_back">

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

Android API version: 29

Material Library version: 1.1.0

Device: Emulator (Pixel 3A)

bug

Most helpful comment

Even I am facing the same issue in 1.1.0, can I set the padding programmatically for now?

All 7 comments

@Philio can you create a sample app. I tried a few different things but couldn't repro this.

Does the layout have enough space to fit properly?

does this happen when you have app:errorEnabled="true" in your xml layout?

does this happen when you have app:errorEnabled="true" in your xml layout?

I had forgotten to add this, however it only seems to add extra padding to the TextInputLayout but the error text is still in the same place.

I'll see if I can reproduce in a stand-alone app.

I couldn't reproduce it either in an empty project. It must be something specific to my project.

Screenshot_1582796374

I tried 1.2.0-alpha05 and that solved the problem.

With 1.1.0 looking at the layout inspector, for some reason the TextView for the error is outside the bounds of it's parent:

image

We did a bunch of improvements for text fields (including fixes to the error behavior) that are in most recent alphas and will appear in the next stable!

Even I am facing the same issue in 1.1.0, can I set the padding programmatically for now?

Was this page helpful?
0 / 5 - 0 ratings