Underline, cursor and hint disappeared at TextInputEditText in TextInputLayout on focus

user_3400881 0
Viewed 2601

I have an edit profile screen with bunch of TextInputEditTexts. It worked fine before, but now on focus underline, cursor and hint become invisible.

Has anyone faced the same problem?

enter image description here

...

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilFirstName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/ivContactIcon"
        app:layout_constraintEnd_toEndOf="@id/gEnd"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        android:layout_marginStart="@dimen/margin_32"
        android:layout_marginTop="@dimen/margin_24"
        android:hint="@string/profile_edit_hint_first_name"
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etFirstName"
            android:layout_height="wrap_content"
            style="@style/FontRoboRegularSizeMFontPrimaryOneLineMatchWrap"
            tools:text="Oleh"
            android:inputType="textCapWords"
            android:maxLines="1"
            android:nextFocusForward="@id/etLastName"
            android:imeOptions="actionNext"
            />
    </com.google.android.material.textfield.TextInputLayout>

...

UPDATE: After changing background of the root element it's clear that these elements become white. not disappeared.

enter image description here

android-textinputedittext android-textinputlayout material-components-android android-appcompat android
3 Answers

The default style used by the TextInputLayout is

<style name="Widget.MaterialComponents.TextInputLayout.FilledBox" parent="Base.Widget.MaterialComponents.TextInputLayout">
    <!-- underline color in FilledBox style -->
    <item name="boxStrokeColor">@color/mtrl_filled_stroke_color</item>

    <!-- The color of the label when it is collapsed and the text field is active -->
    <item name="hintTextColor">?attr/colorPrimary</item>
    ....
</style>

The mtrl_filled_stroke_color is based on the colorOnSurface.

Check in your theme the colorPrimary and the colorOnSurface values, or use a custom style with the same attributes described above.

user_20165620

If you're struggling like I did and the above solutions didn't work, it may be that your project's theme was set up with a white colorPrimary.

To fix you could create a custom style for your TextEdits and apply it to each:

styles.xml:

<style name="AppThemeCorrectPrimaryColor" parent="AppTheme">
    <item name="colorPrimary">@color/notAWhiteColor</item>
</style>

EditText:

<com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:theme="@style/AppThemeCorrectPrimaryColor"
                    />
user_58816470

I created the style for the TextInputLayout and define the colorControlActivated like

<style name="Widget.AppTheme.TextInputLayout.FilledBox.Dense" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
        <item name="hintTextColor">@color/black</item>
        <item name="boxBackgroundColor">@color/greyLight</item>
        <item name="boxStrokeWidth">0dp</item>
        <item name="colorControlActivated">@color/orange</item>
    </style>

and use theming instead of styling on the TextInputLayout

<com.google.android.material.textfield.TextInputLayout
        android:theme="@style/Widget.AppTheme.TextInputLayout.FilledBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.google.android.material.textfield.TextInputLayout>
user_44492780
Related