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

user_14575901 0
Viewed 2086

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?

enter image description here

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>
material-design kotlin android java
2 Answers

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"

user_4512430

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