How to remove background color of text fields in Material Design

Question

In newer versions of material design library, the appearance of text fields has changed.

How can I revert it to its older style (without gray background and without complete border)?

From this: To this:

Image credits: this Medium article

Answer 1

This change is based on a user research and was introduced in version 1.1.0 of material design library for android (MDC). If you want the legacy look-and-feel, the official docs recommends this method:

Change a single text field:

<com.google.android.material.textfield.TextInputLayout
    ...
    style="@style/Widget.Design.TextInputLayout">
    ...
</com.google.android.material.textfield.TextInputLayout>

Change all text fields in your theme:

<style name="Theme.MyApp" parent="Theme.MaterialComponents.*">
    ...
    <item name="textInputStyle">@style/Widget.MyApp.TextInputLayout</item>
</style>

<style name="Widget.MyApp.TextInputLayout" parent="Widget.Design.TextInputLayout">
    <!-- My custom attrs -->
</style>