Android Material TextInputLayout error message is displayed behinde Material TextInputEditText child

Question

Iam currently creating a Android UI with Material components. In my activity i use the error feature of the com.google.android.material.textfield.TextInputLayout-component.

The problem is that if to many components show an error the error messages is not displayed correctly. It looks like the message is behind the material.textfield.TextInputEditText, which is the child of the TextInputLayout. Please look at the screenshot for clarification.

Screenshot

Any guesses?

   <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.createOffer.CreateOfferActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="6dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <ImageView
            android:id="@+id/offerImage"
            android:layout_width="match_parent"
            android:layout_height="230dp"
            android:contentDescription="@string/postOffer_Image"
            android:scaleType="centerInside"
            app:layout_constraintBottom_toTopOf="@id/layout_Description"
            app:layout_constraintTop_toBottomOf="@id/progressBar"
            tools:srcCompat="@tools:sample/avatars" />

        <ProgressBar
            android:id="@+id/progressBar"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:elevation="10dp"
            android:indeterminate="true"
            android:max="100"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/createOffer"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/component_label_horizontal_margin"
            android:text="@string/postOffer_createOfferButton_Text"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/layout_PurchaseDate" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_Price"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/postOffer_editTextPrice_hint"
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/layout_Category"
            app:layout_constraintTop_toBottomOf="@id/layout_Description">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/editText_price"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:importantForAutofill="no"
                android:inputType="numberDecimal" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_Category"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:hint="@string/postOffer_Category"
            android:inputType=""
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/layout_Price"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/layout_ExpireDate">

            <AutoCompleteTextView
                android:id="@+id/filled_exposed_dropdown_ctagory"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusableInTouchMode="false"
                android:importantForAutofill="no" />

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

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_ExpireDate"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:hint="@string/postOffer_ExpireDateHint"
            android:inputType="none"
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/layout_PurchaseDate"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/layout_Category">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/editText_expireDate"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:importantForAutofill="no"
                android:inputType="date" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_PurchaseDate"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:cursorVisible="false"
            android:hint="@string/postOffer_PurchaseDateHint"
            android:inputType="none"
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/createOffer"
            app:layout_constraintTop_toBottomOf="@id/layout_ExpireDate">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/editText_purchaseDate"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusableInTouchMode="false"
                android:importantForAutofill="no"
                android:inputType="date" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_Description"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/general_description"
            android:inputType="textMultiLine"
            android:maxLines="5"
            app:counterEnabled="true"
            app:counterMaxLength="255"
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/layout_Price"
            app:layout_constraintTop_toBottomOf="@id/offerImage">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/description_EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:importantForAutofill="no" />
        </com.google.android.material.textfield.TextInputLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Regards :)

Answer 1

I think you accidentally connected the wrong dots of the constraint layout. Compare these lines:

android:id="@+id/layout_Category"
app:layout_constraintBottom_toTopOf="@id/layout_ExpireDate"
app:layout_constraintTop_toBottomOf="@id/layout_Price">
<!--            app:layout_constraintBottom_toTopOf="@id/layout_Price"-->
<!--            app:layout_constraintTop_toBottomOf="@id/layout_ExpireDate"-->

It works on my PC. But ofc i don't have your strings and image. I added some more margin too.

[Screenshot]1

Full code:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="6dp">

        <ImageView
            android:id="@+id/offerImage"
            android:layout_width="match_parent"
            android:layout_height="230dp"
            android:scaleType="centerInside"
            app:layout_constraintBottom_toTopOf="@id/layout_Description"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/progressBar"
            tools:srcCompat="@tools:sample/avatars" />

        <ProgressBar
            android:id="@+id/progressBar"
            style="@style/Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:elevation="10dp"
            android:indeterminate="true"
            android:max="100"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/createOffer"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="24dp"
            android:text="string/postOffer_createOfferButton_Text"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/layout_PurchaseDate" />
        <!--            android:layout_marginBottom="@dimen/component_label_horizontal_margin"-->

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_Description"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:hint="string/general_description"
            android:inputType="textMultiLine"
            android:maxLines="5"
            app:counterEnabled="true"
            app:counterMaxLength="255"
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/layout_Price"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/offerImage">

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

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_Price"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:hint="string/postOffer_editTextPrice_hint"
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/layout_Category"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/layout_Description">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/editText_price"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:importantForAutofill="no"
                android:inputType="numberDecimal" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_Category"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:hint="string/postOffer_Category"
            android:inputType=""
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/layout_ExpireDate"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/layout_Price">
            <!--            app:layout_constraintBottom_toTopOf="@id/layout_Price"-->
            <!--            app:layout_constraintEnd_toEndOf="parent"-->
            <!--            app:layout_constraintStart_toStartOf="parent"-->
            <!--            app:layout_constraintTop_toBottomOf="@id/layout_ExpireDate"-->
            <AutoCompleteTextView
                android:id="@+id/filled_exposed_dropdown_ctagory"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusableInTouchMode="false"
                android:importantForAutofill="no" />

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

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_ExpireDate"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:hint="string/postOffer_ExpireDateHint"
            android:inputType="none"
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/layout_PurchaseDate"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/layout_Category">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/editText_expireDate"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:importantForAutofill="no"
                android:inputType="date" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/layout_PurchaseDate"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:cursorVisible="false"
            android:hint="string/postOffer_PurchaseDateHint"
            android:inputType="none"
            app:errorEnabled="true"
            app:layout_constraintBottom_toTopOf="@id/createOffer"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/layout_ExpireDate">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/editText_purchaseDate"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:focusableInTouchMode="false"
                android:importantForAutofill="no"
                android:inputType="date" />
        </com.google.android.material.textfield.TextInputLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>