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