Android Material 设计中TextInputLayout下的下划线如何去除？

Question

我试图从名为 TextInputLayout 的 material 设计组件中删除下划线。我已经尝试了 SO 的几个不同答案，但对我来说没有用，所以我决定问我自己的问题。

如何去掉这个下划线？

XML:

<com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/_10sdp"
            style="?colorOnPrimary"
            app:boxCornerRadiusTopEnd="@dimen/_5sdp"
            app:boxCornerRadiusTopStart="@dimen/_5sdp"
            app:startIconContentDescription="Heading">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/input_heading"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="@font/ubuntubold"
                android:hint="Heading"
                android:inputType="text" />

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

Answer 1

如 material 设计指南所述，这是 TextInputLayout 的激活指示器。

检查 Activation indicator attributes 了解详情。

一种解决方案是在您的应用中覆盖其中一些属性。

或者你可以这样做：

<com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/_10sdp"
            style="?colorOnPrimary"
            app:boxCornerRadiusTopEnd="@dimen/_5sdp"
            app:boxCornerRadiusTopStart="@dimen/_5sdp"
            app:startIconContentDescription="Heading"
            app:boxStrokeWidth="0dp"
            app:boxStrokeWidthFocused="0dp">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/input_heading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/ubuntubold"
        android:hint="Heading"
        android:inputType="text" />

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

检查app:boxStrokeWidth="0dp"和app:boxStrokeWidthFocused="0dp"

Answer 2

要删除下划线，您应该为 TextInputLayout 创建主题和样式

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

<style name="Widget.MyTheme.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxStrokeWidth">0dp</item>
    <item name="boxStrokeWidthFocused">0dp</item>
</style>

之后，将该主题分配给视图

    <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/ily"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintEnabled="false"
    android:theme="@style/MyTheme"
    >

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/etx"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:inputType="text"
        android:hint="Whatever you want"
        android:paddingTop="8dp"/>

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

Android Material 设计中TextInputLayout下的下划线如何去除？

How to remove the underline under TextInputLayout in Android Material Design?

java

android

kotlin

material-design