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>

Have you tried [this](https://stackoverflow.com/a/65274302/14493188)? I just tested and `android:background="@null"` works for me. You can add a list of answers that you have tried so that we do not need to ask what you have tried. — MaLa, Dec 26 '20 at 16:05
Yeah I did. It just removed the background completely. I mean the gray background — michaelgrigoryan25, Dec 26 '20 at 16:07
I tried adding for both container and the edittext. Same thing happened — michaelgrigoryan25, Dec 26 '20 at 16:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226445/discussion-between-matias-lappalainen-and-michael-grigoryan). — MaLa, Dec 26 '20 at 16:13

score 7 · Accepted Answer · answered Dec 26 '20 at 16:47

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"

Thank you so much! This has fixed my problem. By the way can you provide the link to that part of the documentation — michaelgrigoryan25, Dec 26 '20 at 17:32
https://material.io/components/text-fields/android#filled-text-field you have to manually find the text "Activation indicator attributes". Didn't find any anchor for this part. — saiful103a, Dec 26 '20 at 17:34

score 1 · Answer 2 · answered Oct 19 '21 at 14:50

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>

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

2 Answers2