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

implementation 'com.google.android.material:material:1.1.0-alpha09'

Now i"m getting strange issue in com.google.android.material.textfield.TextInputLayout

Here is my Code

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/emailTextInputLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/_10sdp">

            <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/emailTextInputEditText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/hint_enter_email"
                    android:imeOptions="actionNext"
                    android:inputType="textEmailAddress"/>
        </com.google.android.material.textfield.TextInputLayout>

after updating the dependencies I'm getting boxed design in my TextInputLayout

Output of above code

if i use implementation 'com.google.android.material:material:1.0.0' I'm getting expected result

Can anybody help me to solve this issue

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

UPDATE

I have already tried app:boxBackgroundMode="none" them I'm getting this

output ,

if i use app:boxBackgroundMode="outline" then getting this

output

SOLVED

No need to use boxBackgroundMode

You need to add @style/Widget.Design.TextInputLayout in your TextInputLayout

SAMPLE CODE

        <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/emailTextInputLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/_10sdp"
                style="@style/Widget.Design.TextInputLayout"
                app:errorTextAppearance="@style/error_appearance"
                android:textColorHint="@android:color/white">

            <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:id="@+id/emailTextInputEditText"
                    android:layout_height="wrap_content"
                    android:backgroundTint="@android:color/white"
                    android:gravity="center"
                    android:hint="@string/hint_enter_email"
                    android:imeOptions="actionNext"
                    android:textColorHint="@android:color/white"
                    android:inputType="textEmailAddress"
                    android:textColor="@android:color/white"
                    android:textSize="@dimen/_15ssp"/>
        </com.google.android.material.textfield.TextInputLayout>

OUTPUT

Use `boxBackgroundMode` to get rid of the issue, default is **filled**. — Jeel Vankhede, Aug 29 '19 at 05:41
@JeelVankhede thanks fro the replay if i have already tried `app:boxBackgroundMode="none"` them I'm getting this [output](https://i.stack.imgur.com/1MNyM.png) , if i use `app:boxBackgroundMode="outline"` then getting this [output](https://i.stack.imgur.com/RClPT.png) — Goku, Aug 29 '19 at 05:45
Okay, can you try with this as parent style also? `@style/Widget.Design.TextInputLayout` — Jeel Vankhede, Aug 29 '19 at 05:48
@JeelVankhede thanks it works can you please post that as answer so it can help others in future — Goku, Aug 29 '19 at 05:56
It is the standard behaviour. You can achieve something similar using a filled style with `@color/black` — Gabriele Mariotti, Aug 29 '19 at 05:57
@GabrieleMariotti tthanks but why it not required to add `@style/Widget.Design.TextInputLayout ` in version`1.0.0` — Goku, Aug 29 '19 at 05:59
@Goku It is not a good choice to use `Widget.Design.TextInputLayout` and not `Widget.MaterialComponents.TextInputLayout.*` — Gabriele Mariotti, Aug 29 '19 at 05:59
@GabrieleMariotti can you please explain more, if possible post as answer in brief so it can help me as well others also — Goku, Aug 29 '19 at 06:00
@GabrieleMariotti `Widget.Design.TextInputLayout` is already parent of `Widget.MaterialComponents.TextInputLayout.*` *(If you check source)* unless API changes. For now we're good to go. — Jeel Vankhede, Aug 29 '19 at 06:07
@JeelVankhede Exactly. And using that parent you will lose a lot of material attribute like shape and materialThemeOverlay — Gabriele Mariotti, Aug 29 '19 at 06:10

score 14 · Accepted Answer · answered Aug 29 '19 at 06:04

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:

score 3 · Answer 2 · answered Aug 29 '19 at 06:13

3

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

answered Aug 29 '19 at 06:13

Gabriele Mariotti

320,139
94
887
841

Thanks i'm using `style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox" app:boxBackgroundColor="@android:color/transparent"` but getting this [output](https://i.stack.imgur.com/LPYEy.png) – Goku Aug 29 '19 at 06:22
And my app this `style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"` – Goku Aug 29 '19 at 06:24
Use the same color of your app background, black in your case. – Gabriele Mariotti Aug 29 '19 at 06:25
Sir, i have already tried that check this [output](https://i.stack.imgur.com/YJZlZ.png) – Goku Aug 29 '19 at 06:32
@Goku Something strange in your style. You should use boxBackgroundColor with a dark color and hint text white or red. – Gabriele Mariotti Aug 29 '19 at 06:55

score 1 · Answer 3 · edited Sep 30 '19 at 04:45

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>

score 0 · Answer 4 · answered Aug 29 '19 at 05:43

0

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.

answered Aug 29 '19 at 05:43

Arslan Shoukat

432
4
10

Change your TextInputLayout. More details https://material.io/develop/android/components/text-input-layout/ – aslamhossin Aug 29 '19 at 06:14

score 0 · Answer 5 · answered Feb 16 '21 at 14:07

0

Same behavior with com.google.android.material:material:1.3.0

Applying transparent background to TextInputEditText does the tricks.

android:background="@android:color/transparent"

answered Feb 16 '21 at 14:07

user370305

108,599
23
164
151

How to remove white box from TextInputLayout

SOLVED

5 Answers5

Linked

Related