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

Answer 1

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

这似乎是一个 material 文本字段错误。
您可以使用此代码暂时将背景更改为白色。

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

Answer 3

对我来说，它与 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>

Answer 4

就我而言，需要更改 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>

Answer 5

我最近遇到了这个问题。 None 以上解决方案适用于最新的 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>

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

Answer 6

默认背景颜色基于 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/....."
      ..>

Answer 7

简单的方法对我有用！

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

Answer 8

方法一

(全透明背景)

<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

Answer 9

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

中设置

Android 中的 TextInputLayout 始终有默认背景

There is always a default background on TextInputLayout in Android

android

android-layout

android-textinputlayout

android-textinputedittext