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.
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.
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>
.
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
.