Cursor of edit text changes to black on error

222 views Asked by At

I have a weird bug in my app and I can't quite figure it out. I set up an edit text and changed the cursor color to white (default was dark blueish). This worked just fine, however as soon as I call edittext.error = "This is an error text" the cursor color changes to black. This does not make any sense to me, as black is never defined anywhere as any kind of primary/accent or surface color in my theme. Also according to the internet, the cursor is supposed to keep it's normal color, which should be just fine. If I set textCursorDrawable to null, it stays white (as is the text), even in error mode, but I cannot do this, because it also removes the thickness of the cursor, but if I set it to a static drawable, it also just changes the color on error.

This is my edit text:

<com.google.android.material.textfield.TextInputLayout
                        android:id="@+id/input_email_wrapper"
                        style="@style/TextInputLayoutStyle"
                        android:layout_width="0dp"
                        android:hint="@string/email_address"
                        android:labelFor="@id/input_email">

                        <com.google.android.material.textfield.TextInputEditText
                            android:id="@+id/input_email"
                            style="@style/TextInputEditText"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:afterTextChanged="@{viewModel::emailAfterTextChanged}"
                            android:inputType="textEmailAddress"
                            android:text="@={viewModel.user.email}"
                            tools:text="[email protected]" />

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

The viewModel then checks whether email got invalid, and if it did, it calls

binding.inputEmailWrapper.error = getString(R.string.email_invalid)

My styles:

<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="boxStrokeColor">@color/edit_text_border_selector</item>
        <item name="hintTextColor">@color/white</item>
        <item name="android:textColorHint">@color/edit_text_border_selector</item>
        <item name="endIconTint">@color/edit_text_border_selector</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginTop">@dimen/margin_top</item>
        <item name="materialThemeOverlay">@style/EditTextTheme</item>
    </style>

    <style name="TextInputEditText">
        <item name="android:textColor">@color/edit_text_content_color</item>
        <item name="android:textCursorDrawable">@drawable/edit_text_cursor</item>
    </style>

    <style name="EditTextTheme" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
        <item name="colorError">@color/red</item>
        <item name="colorPrimary">@color/white</item>
        <item name="colorControlActivated">@color/white</item>
        <item name="colorAccent">@color/orange</item>
    </style>

And the cursor drawable (before adding it, the issue also appeared):

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="2dp" />
    <solid android:color="?base_100" />
</shape>

Note: None of the named color selector anywhere use black as value. I checked the color value of the cursor with screenshot and it is truly pitch black.

My AppTheme:

<style name="AppThemeBJ" parent="Theme.MaterialComponents.NoActionBar">
        <!--Some MUST reference color resources instead of direct hex values
        as in code the color resource for the attribute may be fetched in some cases-->
        <item name="colorPrimary">@color/darkblue</item>
        <item name="colorPrimaryDark">@color/darkblue</item>
        <item name="colorAccent">@color/orange</item>
        <item name="colorError">@color/red</item>
        <item name="colorSecondary">@color/orange</item>
        <item name="colorOnSecondary">@color/white</item>
        <item name="preferenceTheme">@style/Theme.WtfPreference</item>
        <item name="android:colorBackground">@color/darkerblue</item>
        <item name="snackbarStyle">@style/SnackbarStyle</item>
        <item name="materialTimePickerTheme">@style/TimepickerStyle</item>
    </style>

The edit text in error state with cursor: enter image description here

With selection in error state: enter image description here

And in normal state: enter image description here

As you can see, the blackness only affects the cursor itself, not the selection thing around.

I can't see anything about it on the internet. I thought it was just supposed to keep the normal color?

EDIT #1: Even if I remove both the materialThemeOverlay and the textCursorDrawable, the issue still appears onError.

EDIT #2: The bug only happens with the outlined boxes. When I use the following style, the cursor stays in it's activated color (orange) on error:

<style name="TextInputLayoutStyle" parent="Widget.Design.TextInputLayout">
        <item name="hintTextColor">@color/orange</item>
        <item name="hintTextAppearance">@style/HintTextAppearance</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginTop">@dimen/margin_top</item>
        <item name="colorPrimary">@color/orange</item>
    </style>
2

There are 2 answers

17
suresh madaparthi On
              **Just My Suggestion**



              <com.google.android.material.textfield.TextInputLayout
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="30dp"
                app:boxCornerRadiusBottomEnd="13dp"
                app:boxCornerRadiusBottomStart="13dp"
                app:boxCornerRadiusTopEnd="13dp"
                app:boxCornerRadiusTopStart="13dp"
                app:boxStrokeColor="#8FC4C4C4"
                app:boxStrokeWidth="0.7dp">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:drawablePadding="10dp"
                    android:hint="Enter Email ID"
                    android:imeOptions="actionNext"
                    android:inputType="textEmailAddress"
                    android:paddingLeft="10dp"
                    android:textColor="#3E4C79"
                    android:textSize="15sp" />
            </com.google.android.material.textfield.TextInputLayout>
0
NyanLH On

Since version 1.10.0 you can do something like this in style.xml

<item name="cursorErrorColor">@color/error_color</item>
<item name="cursorColor">@color/normal_color</item>