Remove underline from TextInputEditText

Question

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.

Answer 1

If you want to use the filled box then below code perfectly work for me.

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

add above lines in the input layout.

Answer 2

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.