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

Question

I was trying to remove the underline from a material design component named TextInputLayout . I have tried several different answers from SO which didn't work out for me so I decided to ask my own question.

How can I remove this underline?

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

As stated in the material design guideline, this is activation indicator of TextInputLayout.

Check Activation indicator attributes for details.

One solution is to override some of those attributes inside your app.

Or you can do something like this:

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

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

Answer 2

To remove the underline you should create a theme and a style for your 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>

After that, asign that theme to the view

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