androidandroid-textinputlayoutandroid-textinputedittext

Remove underline from TextInputEditText


I have an android screen which takes email from the user. Below is the snippet of the code, I want to remove the underline which appears below the text.

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:hint="@string/email"
    android:textColorHint="@color/blueBackground"
    app:boxBackgroundColor="@color/input_background"
    app:boxCornerRadiusBottomEnd="20dp"
    app:boxCornerRadiusBottomStart="20dp"
    app:boxCornerRadiusTopEnd="20dp"
    app:boxCornerRadiusTopStart="20dp"
    app:endIconMode="clear_text"
    app:endIconTint="@color/blueBackground"
    app:hintTextColor="@color/blueBackground">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/blueBackground"
        android:textSize="18sp"
        android:layout_margin="8dp" />

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

I have tried android:background="@null" and

<item name="colorControlNormal">@android:color/transparent</item> <item name="colorControlActivated">@android:color/transparent</item>

But it is not working.

EditText


Solution

  • 2022 Update

    My answer has been marked as the solution for the described issue, but it looks like it's got outdated and there's been a better approach around. See Gunavant Patel's answer for an up to date fix.



    Original answer

    It looks like the Material Components library draws its own underline using app:boxStrokeColor. This attribute is a ColorStateList, so you have to create a color state list resource in which all states' colors are set to transparent. So basically you want to create a new file res/color/filename.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:color="@android:color/transparent"
            android:state_pressed="true"
            android:state_focused="true"
            android:state_selected="true"
            android:state_checkable="true"
            android:state_checked="true"
            android:state_enabled="true"
            android:state_window_focused="true" />
    </selector>
    

    and set the app:boxStrokeColor attribute to @color/filename.

    However, this left me with a black underline which still doesn't respond to android:background=@null or <item name="colorControl*">@android:color/transparent</item>.


    TL;DR

    Quickfix: if you set the TextInputLayout outlined using style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox", the box looks almost the same, but the underline is gone. In order to remove the stroke just set the app:boxStrokeColor attribute to @null.