Home » Android » There is always a default background on TextInputLayout in Android

There is always a default background on TextInputLayout in Android

Posted by: admin June 15, 2020 Leave a comment

Questions:

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
enter image description here

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

How to&Answers:

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>

Answer:

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>

Answer:

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>

Answer:

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>