There is always a default background on TextInputLayout in Android

Question

I have TextInputLayout and TextInputEditText like this

<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/loginUsernameText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/text_input_margin_left_right"
            android:layout_marginRight="@dimen/text_input_margin_left_right"
            android:layout_marginTop="@dimen/text_input_margin_top_bottom"
            android:hint="@string/username"
            android:layout_below="@id/loginButtonLogin">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/loginUsername"
                android:layout_width="match_parent"
                android:padding="5dp"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"/>

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

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/loginPasswordText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/text_input_margin_left_right"
            android:layout_marginRight="@dimen/text_input_margin_left_right"
            android:layout_marginTop="@dimen/text_input_margin_top_bottom"
            android:hint="@string/password"
            android:layout_below="@id/loginUsernameText">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/loginPassword"
                android:layout_width="match_parent"
                android:padding="5dp"
                android:layout_height="wrap_content"
                android:inputType="textPassword"/>

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

This is my styles.xml file

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="TextAppearance.App.TextInputLayout" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">14sp</item>
    </style>

</resources>

So I am not using anything extra on TextInputLayout and they are appearing like this

This grey background is always there. How do I remove this background and just get the default TextInputLayout. Thanks.

check this https://github.com/material-components/material-components-android/issues/102 — ॐ Rakesh Kumar, May 15 '19 at 04:10

score 76 · Accepted Answer · edited May 22 '20 at 16:59

https://github.com/material-components/material-components-android/issues/102

It seems a material textfield bug.
You can use this code to change background white temporarily.

<com.google.android.material.textfield.TextInputLayout
   app:boxBackgroundColor="@android:color/transparent" 
   android:background="@android:color/transparent">
   <com.google.android.material.textfield.TextInputEditText/>
</com.google.android.material.textfield.TextInputLayout>

score 41 · Answer 2 · answered Jun 25 '19 at 18:50

41

One way to remove the background color is to adjust the background mode of TextInputLayout.

app:boxBackgroundMode="none"

Worked for me.

Example XML Code:

<com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:boxBackgroundMode="none"
            app:errorEnabled="true"
            app:hintEnabled="false"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="top"
                android:hint="@string/comment_placeholder"
                android:inputType="textCapSentences|textMultiLine"
                android:maxLength="500" />

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

answered Jun 25 '19 at 18:50

Andrew

619
1
7
10

Enjoy all the reputation! Haha! Thanks for the answer! – OhhhThatVarun Sep 14 '19 at 20:29
2

After I updated material design in my project, I noticed text input layouts with boxBackgroundMode set to none displayed an error icon. Not sure if this is a bug, but I set the error icon color to transparent to resolve it for now. - "app:errorIconTint="@android:color/transparent" – Andrew Sep 28 '19 at 20:27
14

It removes underline too – gbixahue Jun 23 '20 at 12:10
My `TextInputLayout` wraps an `AutoCompleteTextView` to implement a material spinner. I also had to set `app:endIconMode="none"` because the default material style applies a drop down arrow to the TIL as an end icon. If not set, an exception is thrown: `The current box background mode 0 is not supported by the end icon mode 3`. But once I do this, the drop down no longer works! – rmirabelle Feb 04 '21 at 19:06
Doesn't look as expected. Underline is missing. Solution of Mina chen seems to work. – The incredible Jan Jan 30 '23 at 08:45

score 15 · Answer 3 · answered Feb 19 '21 at 09:49

Method A

(completely transparent background)

<com.google.android.material.textfield.TextInputLayout
    app:boxBackgroundMode="filled"
    app:boxBackgroundColor="@null"
..>

<com.google.android.material.textfield.TextInputEditText
    android:backgroundTint="@android:color/transparent"
..>

Method B

(solid background colour)

<com.google.android.material.textfield.TextInputLayout
    app:boxBackgroundMode="filled"
    app:boxBackgroundColor="?android:attr/colorBackground"
..>

*For my case, I needed it to be fully transparent as the screen background is not a solid colour. If that's the case for you, go with Method A

score 8 · Answer 4 · answered Feb 18 '20 at 15:55

For me it worked with app:boxBackgroundColor="@null", like this:

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:boxBackgroundColor="@null"
        android:hint="@string/description">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textMultiLine|textCapSentences" />

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

score 5 · Answer 5 · answered Mar 13 '20 at 09:43

In me case needed change background in TextInputLayout and TextInputEditText

<com.google.android.material.textfield.TextInputLayout
    app:boxBackgroundColor="@color/transparent"
    android:background="@color/transparent"
    >
    <com.google.android.material.textfield.TextInputEditText
        android:background="@color/transparent"
        />
</com.google.android.material.textfield.TextInputLayout>

score 4 · Answer 6 · edited Dec 29 '20 at 10:00

4

Simple way worked for me!

app:boxBackgroundMode="filled"
app:boxBackgroundColor="@color/white"

edited Dec 29 '20 at 10:00

Dharman

30,962
25
85
135

answered Dec 29 '20 at 09:54

Osama Remlawi

2,356
20
21

Fatih Santalu · Answer 7 · 2020-07-02T15:04:21.293

I recently faced with this issue. None of the above solutions worked for the latest material theme release. Took me a while to figure it out. Here's my solution:

Style:

<style name="Widget.App.TextInputLayout" parent="Widget.Design.TextInputLayout">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.TextInputLayout</item>
    <item name="hintTextColor">@color/pink</item>
    <item name="android:textColorHint">@color/grey</item>
</style>

<style name="ThemeOverlay.App.TextInputLayout" parent="">
    <item name="colorControlNormal">@color/grey</item>
</style>

Usage:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/password"
        style="@style/Widget.App.TextInputLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/password"
        app:layout_constraintBottom_toTopOf="@+id/agreement"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/email">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"/>

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

Also I strongly recommend you to check this article out. Migrating to Material Components for Android

score 3 · Answer 8 · answered Jul 02 '20 at 22:38

3

The default background color is based on the colorOnSurface attribute.

You can override this value using:

<com.google.android.material.textfield.TextInputLayout
   android:theme="@style/MyTextInputLayout_overlay"
   ..>

with:

<style name="MyTextInputLayout_overlay">
    <item name="colorOnSurface">@color/....</item>
</style>

or you can use the boxBackgroundColor attribute (in the layout or in a custom style):

  <com.google.android.material.textfield.TextInputLayout
      app:boxBackgroundColor="@color/....."
      ..>

answered Jul 02 '20 at 22:38

Gabriele Mariotti

320,139
94
887
841

1

worked to me. Thanks – Ajay Nov 11 '21 at 20:20
With this trick, there is a tiny ugly appearance of hint text. – C.F.G Apr 27 '23 at 14:17

score 0 · Answer 9 · answered Apr 02 '21 at 17:23

0

At beginning everything was working fine. Later layout was broken. The reason was I changed property background TextInputEditText. Transaparency must be set on TextInputEditText, not in TextInputLayout android:background="#80FFFFFF"

answered Apr 02 '21 at 17:23

baobab159

51
6

I don't believe that a problem with the background (color) could break the layout. – The incredible Jan Jan 30 '23 at 09:06

score 0 · Answer 10 · answered Sep 22 '22 at 06:24

You can use these options to customise the TextInputLayout.

  <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/menuMakeList"
                    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="20dp"
                    android:background="@drawable/background_round_menu_selector"
                    app:boxBackgroundColor="@android:color/transparent"
                    app:boxBackgroundMode="outline"
                    app:boxStrokeColor="@android:color/transparent"
                    app:boxStrokeWidth="0dp"
                    app:endIconDrawable="@drawable/ic_arrow_down"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/textViewHeader">

                    <AutoCompleteTextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="null"
                        android:hint="Make"
                        android:inputType="none"
                        android:padding="16dp"
                        app:hintTextColor="#C8CCC9" />

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

This is how it will be coming up. I have used my custom rounded corners xml as background and override the colors from material background_round_menu_selector.xml.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners android:radius="15dp" />
    <stroke
        android:width="2dp"
        android:color="#EAEAEA" />
</shape>

There is always a default background on TextInputLayout in Android

10 Answers10