logo标签列表

从TextInputEditText中删除下划线

androidandroid-textinputlayoutandroid-textinputedittext
46

我有一个Android屏幕，可以让用户输入电子邮件。以下是代码片段，我想删除文本下方出现的下划线。

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:hint="@string/email"
    android:textColorHint="@color/blueBackground"
    app:boxBackgroundColor="@color/input_background"
    app:boxCornerRadiusBottomEnd="20dp"
    app:boxCornerRadiusBottomStart="20dp"
    app:boxCornerRadiusTopEnd="20dp"
    app:boxCornerRadiusTopStart="20dp"
    app:endIconMode="clear_text"
    app:endIconTint="@color/blueBackground"
    app:hintTextColor="@color/blueBackground">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/blueBackground"
        android:textSize="18sp"
        android:layout_margin="8dp" />

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

我尝试过 android:background="@null" 和

<item name="colorControlNormal">@android:color/transparent</item> <item name="colorControlActivated">@android:color/transparent</item>

但它没有起作用。

EditText

3
另外，您可以尝试使用app:boxStrokeWidth="0dp"。 - Shahrad Elahi
1
在我的情况下，只需要添加android:background="@android:color/transparent"就足够了。 - Constantine Kurbatov
15个回答
99

如果你想使用填充的框，那么以下代码对我非常有效。

app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"

在输入布局中添加上述行。

25
父级TextInputLayout中的 app:boxBackgroundMode="none" 。
通过这种方式，我也得到了正确的答案。 - Dhaval Solanki
3
它移除了基线，但添加了额外的顶部填充。 - PRANAV SINGH
24

2022更新

我的答案已被标记为所描述问题的解决方案，但看起来它已经过时，有一个更好的方法可以解决。请参考Gunavant Patel的答案获取最新的修复方法。

原始回答

看起来Material Components库使用app:boxStrokeColor绘制自己的下划线。这个属性是一个ColorStateList，所以你需要创建一个颜色状态列表资源，在其中所有状态的颜色都设置为透明。因此，基本上您需要创建一个新文件res/color/filename.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:color="@android:color/transparent"
        android:state_pressed="true"
        android:state_focused="true"
        android:state_selected="true"
        android:state_checkable="true"
        android:state_checked="true"
        android:state_enabled="true"
        android:state_window_focused="true" />
</selector>

将app:boxStrokeColor属性设置为@color/filename以实现效果。

然而，这样做会留下一条黑色的下划线，仍然不响应 android:background=@null 或者 <item name="colorControl*">@android:color/transparent</item>。

TL;DR

简短解决方案：如果使用style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"来设置TextInputLayout的轮廓，则框看起来几乎相同，但下划线消失了。要删除描边，请将app:boxStrokeColor属性设置为@null。

18
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="textInputStyle">@style/Widget.MyApp.TextInputLayout</item>
</style>

<style name="Widget.MyApp.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxStrokeWidth">0dp</item>
    <item name="boxStrokeWidthFocused">0dp</item>
</style>
11
请在TextInputLayout中设置boxBackgroundMode。这是消除TextInputLayout下划线的简单和正确方式。
<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:boxBackgroundMode="none" >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/inputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>
工作解决方案 - Annie
9
您只需要在组件中编写app:boxStrokeWidth="0dp"和app:boxStrokeWidthFocused="0dp"属性。 应该像这样编写：
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:boxStrokeWidth="0dp"
    app:boxStrokeWidthFocused="0dp"
    android:hint="@string/email"
    android:textColorHint="@color/blueBackground"
    app:boxBackgroundColor="@color/input_background"
    app:boxCornerRadiusBottomEnd="20dp"
    app:boxCornerRadiusBottomStart="20dp"
    app:boxCornerRadiusTopEnd="20dp"
    app:boxCornerRadiusTopStart="20dp"
    app:endIconMode="clear_text"
    app:endIconTint="@color/blueBackground"
    app:hintTextColor="@color/blueBackground">

<com.google.android.material.textfield.TextInputEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="@color/blueBackground"
    android:textSize="18sp"
    android:layout_margin="8dp" />

</com.google.android.material.textfield.TextInputLayout>
9
将TextInputLayout的背景设置为可绘制对象，将TextInputEditText的背景设置为透明即可移除下划线：
<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:hint="@string/email"
        android:background="@drawable/blue_drawable"
        app:endIconMode="clear_text"
        app:endIconTint="@color/black"
        app:hintTextColor="@color/black">

    <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:background="@android:color/transparent"
            android:textSize="18sp"
            android:layout_margin="8dp" />

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

blue_drawable.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="@android:color/holo_blue_bright"/></shape>

enter image description here

1
将android:background="@android:color/transparent"设置到TextInputEditText中可以从TextInputLayout中移除蓝色背景，但这并不能解决我的问题。 - Sagar Jogadia
我通过将一个可绘制对象添加为TextInputLayout的背景来解决了这个问题。 - no_name
8
如果您想使用填充并且没有下划线的app:boxBackgroundMode，那么以下内容将起作用。
<item name="boxStrokeWidthFocused">0dp</item>
<item name="boxStrokeWidth">0dp</item>
6
在TextInputLayout中添加这行代码对我有效：
app:boxStrokeWidth="0dp"

更新

在color资源目录中添加et_box_color.xml文件，并在其中添加以下行：

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:color="@color/transparent"
        android:state_pressed="true"
        android:state_focused="true"
        android:state_selected="true"
        android:state_checkable="true"
        android:state_checked="true"
        android:state_enabled="true"
        android:state_window_focused="true"/>
</selector>

现在请按以下方式添加您的材料编辑文本：
<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/textInputLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/border"
                app:boxStrokeColor="@color/et_box_color"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/llBank">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/etAmount"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="1dp"
                    android:background="#00FFFFFF"
                    android:gravity="center"
                    android:hint="Amount"
                    android:imeOptions="actionDone"
                    android:inputType="numberDecimal" />

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

我给TextInputLayout添加了一个背景色来制作边框，如果不需要可以移除TextInputLayout的背景色。为了使背景透明，需要设置TextInputEditText的背景色。
6
解决方法很简单，只需在TextInputLayout中添加以下这行代码： style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" 问题就会被解决。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接