How to remove white box from TextInputLayout

Question

Today I have just updated my dependencies of material design

from 1.0.0 to 1.1.0-alpha09

implementa         


        

Answer 1

Set this in your TextInputLayout:

app:boxBackgroundMode="none"

Probably you have set boxBackgroundMode to filled or maybe it's set by default. Just add above line, and this should fix the issue.

Answer 2

For me using @style/Widget.Design.TextInputLayout produced undesirable formatting results, specifically alignment issues with the editText box.

I used boxBackgroundMode set to none for awhile, and after updating material design in my project the error icon mentioned started showing. May be a bug (https://issuetracker.google.com/issues/122445449).

For now I'm still setting the boxBackgroundMode to none, and hiding the error icon by setting the color to transparent. This way I keep the material design.

app:boxBackgroundMode="none"
app:errorIconTint="@android:color/transparent"



<com.google.android.material.textfield.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        app:boxBackgroundMode="none"
        app:errorIconTint="@android:color/transparent"
        app:hintEnabled="false">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/message_ellipsis"
            android:inputType="textCapSentences|textMultiLine"
            android:paddingTop="10dp" />
    </com.google.android.material.textfield.TextInputLayout>

Answer 3

To revert back to old style with no filed background but only bottom border, one should use following style:

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

Using theme Widget.Design.TextInputLayout will generate expected output like below:

Answer 4

Using a material Theme the default style used by the TextInputLayout is @style/Widget.MaterialComponents.TextInputLayout.FilledBox

To obtain something similar just change the background color using the boxBackgroundColor attribute:

  <style name="CustomFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxBackgroundColor">@myColor</item>
  </style>

Also use the android:hint="@string/hint_enter_email" in the TextInputLayout not in the TextInputEditText