androidandroid-layoutmaterial-designandroid-constraintlayoutandroid-textinputlayout

Android Material TextInputLayout error message is displayed behinde Material TextInputEditText child


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 :)


Solution

  • 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>