Material-components-android: [TextInputLayout] Hint text area background color glitch

[hummblebee]

Description: When a hint text is set in outlined mode with 0dp stroke, a white / gray color is applied to the background of hint text upon interaction with the TextInputLayout but is gone when you tap on another component and TextInputLayout loses focus!
Also when boxBackgroundColor is not set, this background color is expanded to fill the whole TIL!

Expected behavior:

Source code:

            <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textinputlayout_puzzles"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
            android:layout_width="256dp"
            android:layout_height="64dp"
            android:hint="@string/puzzles_menu_hint"
            app:boxBackgroundMode="outline"
            app:boxBackgroundColor="#FFE1E1"
            app:boxStrokeWidth="0dp"
            app:hintAnimationEnabled="true"
            app:hintEnabled="true">

            <AutoCompleteTextView
                android:id="@+id/exposed_dropdown_puzzle"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:editable="false"
                android:inputType="none" />
        </com.google.android.material.textfield.TextInputLayout>

Android API version: API 21 Android 6.0

Material Library version: 1.1.0-beta01

Device: HTC One

[leticiarossi]

The outlined dropdown menu uses colorSurface in order for the ripple to work (which is usually the background color of an application). My guess is your colorSurface is not #FFE1E1, so setting it to that in a theme overlay should solve the issue. We'll look into improving how the ripple works.

[deRonbrown]

For version 1.2.1, is overriding colorSurface still the preferred way to solve this issue? I'm attempting to do so, but not getting the results I'd expect.

View XML:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/summary_edit_notes_hint"
    style="@style/TextInputLayout.Form">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?attr/textAppearanceBody1"/>

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

Style:

<style name="Widget.Slopes.TextInputLayout.Form" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/text_input_form_outline</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="boxStrokeWidthFocused">1dp</item>
    <item name="boxBackgroundColor">@color/white</item>
     <item name="boxBackgroundMode">outline</item>
    <item name="hintAnimationEnabled">false</item>
    <item name="colorSurface">@android:color/black</item> <!-- Test -->
</style>

Box Stroke Color (text_input_form_outline.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#004288" android:state_focused="true"/>
    <item android:color="#004288" android:state_hovered="true"/>
    <item android:color="#004288"/>
</selector>

Current output:

[thevoiceless]

@deRonbrown did you ever make any progress on your issue? I have the same visual glitch

[leticiarossi]

Because colorSurface is a theme attribute it needs to be overridden via a materialThemeOverlay, so you'd need:

<style name="Widget.Slopes.TextInputLayout.Form" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextInputLayout</item>
    ...
</style>

<style name="ThemeOverlay.App.TextInputLayout" parent="">
    <item name="colorSurface">@color/your_color</item>
    <item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox</item>
    ...
</style>

[PhilippeBoisney]

@leticiarossi Even by overriding the materialThemeOverlay and setting the colorSurface attribute, the background color of the TextInputLayout is changed, but not the background color of the hint (Label) View 😕

Here is a simple by overriding the colorSurface with red color:

[PhilippeBoisney]

I suspect that the hint background color gets the background color of the parent...
If I change the background color of the LinearLayout containing the TextInputLayout, here is what I get:

[ikim24]

Duplicate of #1319