Search code examples
androidandroid-layoutkotlinandroid-textinputlayoutandroid-textinputedittext

Android EditText error message popup text not showing


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)


Solution

  • 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