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

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

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"

Advertisement

Answer