如何从 TextInputLayout 中删除白框

Question

今天我刚刚更新了我的 dependencies of material design

从 1.0.0 到 1.1.0-alpha09

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

现在我在 com.google.android.material.textfield.TextInputLayout

中遇到奇怪的问题

这是我的代码

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

更新依赖项后，我在 TextInputLayout

中得到盒装设计

以上代码的输出

如果我使用 implementation 'com.google.android.material:material:1.0.0' 我会得到预期的结果

谁能帮我解决这个问题

如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。

更新

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

,

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

已解决

不需要使用boxBackgroundMode

您需要在 TextInputLayout

中添加 @style/Widget.Design.TextInputLayout

示例代码

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

输出

Answer 1

在您的 TextInputLayout 中设置：

app:boxBackgroundMode="none"

可能您已将 boxBackgroundMode 设置为 filled 或者默认设置。只需添加上面一行，这应该可以解决问题。

Answer 2

要恢复到没有归档背景但只有底部边框的旧样式，应使用以下样式：

<com.google.android.material.textfield.TextInputLayout
           ...
           style="@style/Widget.Design.TextInputLayout"
           ....
           >
</com.google.android.material.textfield.TextInputLayout>

使用主题 Widget.Design.TextInputLayout 将生成如下所示的预期输出：

Answer 3

使用 material Theme the default style used by the TextInputLayout 是 @style/Widget.MaterialComponents.TextInputLayout.FilledBox

要获得类似的效果，只需使用 boxBackgroundColor 属性更改背景颜色即可：

  <style name="CustomFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxBackgroundColor">@myColor</item>
  </style>

也用android:hint="@string/hint_enter_email"中的TextInputLayout而不是TextInputEditText中的

Answer 4

对我来说，使用@style/Widget.Design.TextInputLayout 产生了不良的格式化结果，特别是 editText 框的对齐问题。

我将 boxBackgroundMode 设置为 none 一段时间，在我的项目中更新 material 设计后，提到的错误图标开始显示。可能是一个错误 (https://issuetracker.google.com/issues/122445449)。

现在我仍然将 boxBackgroundMode 设置为 none，并通过将颜色设置为透明来隐藏错误图标。这样我就保留了 material 设计。

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>

Answer 5

与 com.google.android.material:material:1.3.0

相同的行为

将透明背景应用于 TextInputEditText 就可以了。

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

如何从 TextInputLayout 中删除白框

How to remove white box from TextInputLayout

android

android-layout

material-design

android-textinputlayout

androidx

已解决