7

I'm having an issue in my app where the error popup on EditTexts shows but the text is not visible. It looks something like this:

EditText error message

This happens with all the EditTexts in my app. Here's an example layout XML

Layout:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout
    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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient"
    android:fitsSystemWindows="true"
    tools:context=".ui.onboarding.profile.OnboardingUserProfileActivity">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        app:srcCompat="@drawable/shapes_background" />

    <ProgressBar
        android:id="@+id/login_progress"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:visibility="gone" />

    <ScrollView
        android:id="@+id/form"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp">

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="80dp"
            android:orientation="vertical">

            <android.support.constraint.ConstraintLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="40dp"
                android:layout_marginBottom="20dp">

                <ImageView
                    android:id="@+id/profileImageView"
                    android:layout_width="160dp"
                    android:layout_height="160dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/user_profile_placeholder"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"/>


                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/cameraImageButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|end"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:srcCompat="@android:drawable/ic_menu_camera" />
            </android.support.constraint.ConstraintLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/firstnameTvLayout"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginBottom="20dp"
                android:layout_weight="0.33"
                android:textColorHint="@color/colorVeryLightGray"
                android:theme="@style/AppTheme.WhiteColorAccent"
                app:errorTextAppearance="@style/error_appearance">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/firstnameTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/prompt_firstname"
                    android:inputType="textPersonName"
                    android:maxLines="1"
                    android:nextFocusDown="@id/lastnameTv"
                    android:nextFocusForward="@id/lastnameTv"
                    android:singleLine="true"
                    android:textColor="@android:color/white"
                    android:textColorHint="@color/colorWhite"
                    android:theme="@style/AppTheme.WhiteEditText"/>

            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/lastnameTvLayout"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginBottom="20dp"
                android:layout_weight="0.33"
                android:textColorHint="@color/colorVeryLightGray"
                android:theme="@style/AppTheme.WhiteColorAccent">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/lastnameTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/prompt_lastname"
                    android:inputType="textPersonName"
                    android:maxLines="1"
                    android:nextFocusDown="@id/usernameTv"
                    android:nextFocusForward="@id/usernameTv"
                    android:singleLine="true"
                    android:textColor="@android:color/white"
                    android:textColorHint="@color/colorWhite"
                    android:theme="@style/AppTheme.WhiteEditText" />

            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/usernameTvLayout"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.33"
                android:textColorHint="@color/colorVeryLightGray"
                android:theme="@style/AppTheme.WhiteColorAccent">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/usernameTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/prompt_username"
                    android:imeActionId="6"
                    android:imeActionLabel="@string/action_sign_in_short"
                    android:imeOptions="actionUnspecified"
                    android:maxLines="1"
                    android:nextFocusDown="@id/nextBtn"
                    android:nextFocusForward="@id/nextBtn"
                    android:singleLine="true"
                    android:textColor="@android:color/white"
                    android:textColorHint="@color/colorWhite"
                    android:theme="@style/AppTheme.WhiteEditText" />

            </android.support.design.widget.TextInputLayout>

        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/nextBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="16dp"
        android:text="@string/next"
        android:textStyle="bold"
        android:theme="@style/AppTheme.PrimaryButton"
        app:layout_anchor="@+id/form"
        app:layout_anchorGravity="bottom|center_horizontal" />

</android.support.design.widget.CoordinatorLayout>

And the styles:

<style name="AppTheme.WhiteColorAccent">
    <item name="colorAccent">@color/colorWhite</item>
</style>
  <style name="AppTheme.WhiteEditText" parent="Widget.AppCompat.EditText">
    <item name="android:textColor">@color/colorWhite</item>
    <item name="colorControlNormal">@color/colorVeryLightGray</item>
    <item name="colorControlActivated">@color/colorWhite</item>
    <item name="colorControlHighlight">@color/colorWhite</item>
</style>

Setting error in the activity using firstnameTv.error = "This field can not be empty" (Kotlin)

AskNilesh
  • 67,701
  • 16
  • 123
  • 163
Inn0vative1
  • 2,014
  • 3
  • 27
  • 43
  • For wich component are you setting the error message? TextInputLayout or TextInputLayout? – Pedro Massango Oct 07 '18 at 22:16
  • Your layout appears incomplete; it seems to be wrapped in a ConstraintLayout but I don’t see any constraints; did you purposely remove them? Also how/who is setting the error? – Martin Marconcini Oct 07 '18 at 22:41
  • Error is being set on the TextInputEditText using setError. I'll update the question to post the full layout. But not sure its layout dependent since all the EditTexts in my app have this problem – Inn0vative1 Oct 07 '18 at 22:46

4 Answers4

8

You need to use style="@style/AppTheme.WhiteEditText"

Instead of android:theme="@style/AppTheme.WhiteColorAccent"

Now question is why need to use style Instead of android:theme

When you use style it apply will apply only to that view

and When you use android:theme it apply will apply view as well as all of its children.

Read more about What is the difference between style and android:theme attributes?

SAMPLE CODE

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:visibility="gone" />

    <ProgressBar
        android:id="@+id/login_progress"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:visibility="gone" />

    <ScrollView
        android:id="@+id/form"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        android:fillViewport="true">

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="80dp"
            android:orientation="vertical">

            <android.support.constraint.ConstraintLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="40dp"
                android:layout_marginBottom="20dp">

                <ImageView
                    android:id="@+id/profileImageView"
                    android:layout_width="160dp"
                    android:layout_height="160dp"
                    android:scaleType="fitXY"
                    android:src="@color/colorNavBar"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />


                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/cameraImageButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|end"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:srcCompat="@android:drawable/ic_menu_camera" />
            </android.support.constraint.ConstraintLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/firstnameTvLayout"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginBottom="20dp"
                android:layout_weight="0.33"
                android:textColorHint="@color/colorVeryLightGray"
                style="@style/AppTheme.WhiteColorAccent"
                >

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/firstnameTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="First Name"
                    android:inputType="textPersonName"
                    android:maxLines="1"
                    android:imeOptions="actionNext"
                    android:nextFocusDown="@id/lastnameTv"
                    android:nextFocusForward="@id/lastnameTv"
                    android:textColor="@android:color/white"
                    android:textColorHint="@color/colorWhite"
                    style="@style/AppTheme.WhiteEditText" />

            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/lastnameTvLayout"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginBottom="20dp"
                android:layout_weight="0.33"
                android:textColorHint="@color/colorVeryLightGray"
                style="@style/AppTheme.WhiteColorAccent">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/lastnameTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Last Name"
                    android:inputType="textPersonName"
                    android:maxLines="1"
                    android:nextFocusDown="@id/usernameTv"
                    android:nextFocusForward="@id/usernameTv"
                    android:singleLine="true"
                    android:textColor="@android:color/white"
                    android:textColorHint="@color/colorWhite"
                    style="@style/AppTheme.WhiteEditText" />

            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/usernameTvLayout"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginBottom="20dp"
                android:layout_weight="0.33"
                android:textColorHint="@color/colorVeryLightGray"
                style="@style/AppTheme.WhiteColorAccent">

                <android.support.design.widget.TextInputEditText
                    android:id="@+id/usernameTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="user Name"
                    android:imeActionId="6"
                    android:imeActionLabel="AB"
                    android:imeOptions="actionUnspecified"
                    android:maxLines="1"
                    android:nextFocusDown="@id/nextBtn"
                    android:nextFocusForward="@id/nextBtn"
                    android:singleLine="true"
                    android:textColor="@android:color/white"
                    android:textColorHint="@color/colorWhite"
                    style="@style/AppTheme.WhiteEditText" />

            </android.support.design.widget.TextInputLayout>

        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/nextBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="16dp"
        android:text="Next"
        android:textStyle="bold"
        app:layout_anchor="@+id/form"
        app:layout_anchorGravity="bottom|center_horizontal" />
</android.support.design.widget.CoordinatorLayout>

style

<style name="AppTheme.WhiteColorAccent">
    <item name="colorAccent">@color/colorWhite</item>
</style>

<style name="AppTheme.WhiteEditText" parent="Widget.AppCompat.EditText">
    <item name="android:textColor">@color/colorWhite</item>
    <item name="colorControlNormal">@color/colorVeryLightGray</item>
    <item name="colorControlActivated">@color/colorWhite</item>
    <item name="colorControlHighlight">@color/colorWhite</item>
</style>

OUTPUT

enter image description here

AskNilesh
  • 67,701
  • 16
  • 123
  • 163
1

You need to set the error in TextInputLayout, NOT in TextInputEditText

firstnameTvLayout.setError("Error goes here");

Also make sure you have done

firstnameTvLayout.setErrorEnabled(true);

See the documentation here for more details https://developer.android.com/reference/android/support/design/widget/TextInputLayout

Irshad P I
  • 2,394
  • 2
  • 14
  • 23
0

You have to use style instead of android:theme. If you set android:theme to a view group, its children (error pop-up, in this case) will use the same style.


Your code

<android.support.design.widget.TextInputLayout
    ....
    android:theme="@style/AppTheme.WhiteColorAccent"
    ....>

Change it to

<android.support.design.widget.TextInputLayout
    ....
    style="@style/AppTheme.WhiteColorAccent"
    ....>
Bertram Gilfoyle
  • 9,899
  • 6
  • 42
  • 67
0
textInputLayout.setErrorEnable(true);
Pang
  • 9,564
  • 146
  • 81
  • 122