Material-components-android: [TextInputLayout] Stroke around FilledBox or changing position and background color of label in OutlinedBox

[lebzuch]

Is your feature request related to a problem? Please describe.
I love material TextInputLayout but my clients aren't ready for changing layouts. They used to have background with border in edit texts and label inside of the container.

Describe the solution you'd like
I would love to have possibility to setting stroke around FilledBox edit text.

Describe alternatives you've considered
As alternative there can be possibility of setting label position inside of the container in OutlinedBox edit text which will work as label in FilledBox and label background color which will fit to container background color.

Right now I found workaround by setting background with different states on FilledBox edit text but you clearly annotate in material components readme to do not set background for it.

Additional context

Normal view:

Filled focused:

[hunterstich]

You could create something like this if you remove the background from both TextInputLayout and TextInputEditText and remove stroke from a TextInputLayout and provided your own StateListDrawable as the background of TextInputLayout.

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/text_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:hint="Email"
        app:boxBackgroundColor="@android:color/transparent"
        app:boxStrokeWidth="0dp"
        app:boxStrokeWidthFocused="0dp">
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/edit_text"
            android:background="@android:color/transparent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>

// res/drawable/text_field_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <stroke android:width="1dp" android:color="?attr/colorPrimary"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <stroke android:width="1dp" android:color="?attr/colorControlNormal"/>
        </shape>
    </item>
</selector>

[hunterstich]

Since we already have 2 well-defined text field variants its unlikely design and/or eng would approve pulling in a third as an official feature.

Going to go ahead and close this but feel free to continue discussing and I'll try to answer any questions. If the above background state list solution doesn't work we can brainstorm on other solutions.

[lebzuch]

Hi @hunterstich, thanks for response. Like I said

Right now I found workaround by setting background with different states on FilledBox edit text but you clearly annotate in material components readme to do not set background for it.

If this is your recommended way of doing it so I'm happy :)

[thevoiceless]

Commenting in case anyone else stumbles across this issue in the future: Providing your own background works for almost everything, but you do lose the automatic error coloring:

[oradkovsky]

I don't think I lost any styling, but here is the way I did it:

1. Base my TextInputLayout style on parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
2. Provided custom materialThemeOverlay inheriting @style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox
3. Inside materialThemeOverlay implementation, used color state list for backgroundTint

Also worth mentioning, my input layout was actually outlined type, and I was directly setting boxStrokeColor as another color state list. But in the end when setError got called the outline was correctly drawn as "red".