在Android的TextInputLayout中，始终存在一个默认背景。

Question

我有这样的TextInputLayout和TextInputEditText

<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>

这是我的styles.xml文件

<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>

所以我在TextInputLayout上没有使用任何额外的东西，它们看起来像这样。这个灰色背景总是存在的。如何去掉这个背景并获得默认的TextInputLayout。谢谢。

- theanilpaudel

---

请查看此链接：https://github.com/material-components/material-components-android/issues/102 - ॐ Rakesh Kumar

Answer 1

看起来是一个材质文本框的错误。
您可以使用此代码暂时更改背景为白色。

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

<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>

- Mina chen

Answer 2

一种消除背景颜色的方法是调整TextInputLayout的背景模式。

app:boxBackgroundMode="none"

对我很有效。

XML示例代码：

<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>

- Andrew

---

享受所有的声誉！哈哈！感谢您的回答！ - OhhhThatVarun

在我的项目中更新了Material Design后，我注意到将boxBackgroundMode设置为none的文本输入布局显示了一个错误图标。不确定这是否是一个错误，但我将错误图标颜色设置为透明以暂时解决它。- "app:errorIconTint="@android:color/transparent" - Andrew

它也会移除下划线。 - gbixahue

我的 TextInputLayout 将 AutoCompleteTextView 包装起来，以实现 Material Design 风格的下拉选择框。我还不得不设置 app:endIconMode="none"，因为默认的 Material 风格会在 TIL 上应用一个下拉箭头作为结束图标。如果不设置，将抛出异常：The current box background mode 0 is not supported by the end icon mode 3。但一旦我这样做了，下拉选择功能就不再起作用了！ - rmirabelle

看起来不像预期的那样。缺少下划线。陈敏娜的解决方案似乎有效。 - The incredible Jan

Answer 3

方法A

(完全透明的背景)

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

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

方法B

(纯色背景)

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

*对于我的情况，由于屏幕背景不是纯色，所以我需要它完全透明。 如果你的情况也是这样，请选择方法A

- yukiko

Answer 4

对我而言，使用 app:boxBackgroundColor="@null" 可以解决问题，就像这样：

    <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>

- Gustavo Cantero

Answer 5

在我的情况下，需要更改TextInputLayout和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>

- KosWarm

Answer 6

对我来说，最简单的方法就是这样！

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

- Osama Remlawi

Answer 7

我最近遇到了这个问题。以上的解决方案都无法适用于最新的Material主题发布版。花费了我一些时间才发现解决方法。以下是我的解决方案：

样式：

<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>

使用方法：

<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>

我强烈推荐您阅读这篇文章：《迁移至 Android 材料组件》。

- Fatih Santalu

Answer 8

默认的背景颜色基于colorOnSurface属性。

您可以使用以下方法覆盖此值：

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

使用：

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

或者您可以使用boxBackgroundColor 属性（在布局中或自定义样式中）：

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

- Gabriele Mariotti

---

<com.google.android.material.textfield.TextInputLayout app:boxBackgroundColor="@color/....." ..> 对我很有用。谢谢 - Ajay

通过这个技巧，有一个微小的丑陋外观的提示文本。 - C.F.G

Answer 9

您可以使用这些选项来自定义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>

这就是它的呈现方式。我使用了自定义的圆角 XML 作为背景，并覆盖了来自材料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>

- vikas kumar

Answer 10

一开始一切都正常工作。后来布局出了问题。原因是我更改了 TextInputEditText 的背景属性。透明度必须在 TextInputEditText 中设置，而不是在 TextInputLayout 中设置android:background="#80FFFFFF"

- baobab159

---

我不相信背景（颜色）的问题会破坏布局。 - The incredible Jan