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

Question

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?

...

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

What is style="@style/FontRoboRegularSizeMFontPrimaryOneLineMatchWrap" ? — Gabriele Mariotti, Oct 01 '19 at 10:03
@dimen/text_size_m @color/new_font_primary_color @string/font_roboto_regular match_parent — Oleh Liskovych, Oct 01 '19 at 10:09
@GabrieleMariotti I just changed background and found out that hint, cursor and underline just become white. — Oleh Liskovych, Oct 01 '19 at 10:14
Quite strange. What are the differences with the other textinputlayout in the screen? — Gabriele Mariotti, Oct 01 '19 at 10:14
how did you change the background? I don't see it the component — Gabriele Mariotti, Oct 01 '19 at 10:15
@GabrieleMariotti, the only difference is that first on in the focus. — Oleh Liskovych, Oct 01 '19 at 10:16
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/200226/discussion-between-oleh-liskovych-and-gabriele-mariotti). — Oleh Liskovych, Oct 01 '19 at 10:22
Check this [answer](https://stackoverflow.com/questions/56742148/colorcontrolactivated-for-textinputlayout-doesnt-work). It explain how the label and underline colors works. — Gabriele Mariotti, Oct 01 '19 at 10:26

score 2 · Accepted Answer · answered Oct 01 '19 at 10:43

2

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.

answered Oct 01 '19 at 10:43

Gabriele Mariotti

320,139
94
887
841

This requires switching from AppCompat Theme to Theme.MaterialComponents. Is there any way to fix appearance without switching? – Oleh Liskovych Oct 01 '19 at 11:30
Quite strange your comment. You are using the component `com.google.android.material.textfield.TextInputEditText` provided by the Material Components Library. It **requires** a [Material Components theme](https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#4-change-your-app-theme-to-inherit-from-a-material-components-theme). – Gabriele Mariotti Oct 01 '19 at 11:35
My theme is successor of Theme.AppCompat.Light.NoActionBar – Oleh Liskovych Oct 01 '19 at 11:39
You can check the doc. With the version 1.1.0 [it will not be possible](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/internal/ThemeEnforcement.java). In any case, the component uses the style described in the answer. You can try to force another style but it can work in a bad way. – Gabriele Mariotti Oct 01 '19 at 11:46
If I don't switch to MaterialComponents theme and try to use your style, I get: Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant). But if I don't use it, I can open this screen and nothing happens. – Oleh Liskovych Oct 01 '19 at 11:49
1

@OlehLiskovych It depends also by the version you are using. In any case you can't use this style without a Material Theme in your app. – Gabriele Mariotti Oct 01 '19 at 12:01

score 0 · Answer 2 · answered Jun 19 '20 at 08:48

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"
                    />

score 0 · Answer 3 · answered Sep 28 '20 at 16:22

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>

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

3 Answers3