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.

In my case was enough to add `android:background="@android:color/transparent"` — Constantine Kurbatov, Jan 22 '22 at 16:58

Gunavant Patel · Answer 1 · 2020-07-13T10:21:09.317

95

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.

edited Jul 13 '20 at 10:21

answered Jun 27 '20 at 14:49

Gunavant Patel

1,413
1
13
17

score 25 · Answer 2 · answered Mar 21 '20 at 18:13

25

app:boxBackgroundMode="none" in parent TextInputLayout

answered Mar 21 '20 at 18:13

Pavlo28

1,454
2
16
30

Correct answer I also achieved by this – Dhaval Solanki May 27 '21 at 10:51
3

It removes the baseline but adds an extra top padding – PRANAV SINGH Jun 25 '21 at 18:00

jsamol · Accepted Answer · 2022-10-17T10:00:04.283

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.

score 18 · Answer 4 · answered Dec 18 '19 at 18:29

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="textInputStyle">@style/Widget.MyApp.TextInputLayout</item>
</style>

<style name="Widget.MyApp.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxStrokeWidth">0dp</item>
    <item name="boxStrokeWidthFocused">0dp</item>
</style>

score 10 · Answer 5 · answered Aug 07 '20 at 19:35

Please set boxBackgroundMode in TextInputLayout. This is the simple and proper way to remove underline in TextInputLayout

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:boxBackgroundMode="none" >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/inputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

no_name · Answer 6 · 2019-07-17T03:24:39.280

Setting the background of the TextInputLayout to a drawable and the one of the TextInputEditText to transparent removes the underline:

<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:background="@drawable/blue_drawable"
        app:endIconMode="clear_text"
        app:endIconTint="@color/black"
        app:hintTextColor="@color/black">

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

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

blue_drawable.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="@android:color/holo_blue_bright"/></shape>

Setting `android:background="@android:color/transparent"` to `TextInputEditText` removes the blue background from the `TextInputLayout` and is therefore not solving my issue — Sagar Jogadia, Jul 16 '19 at 23:54
I fixed this by adding a drawable as a background of the TextInputLayout — no_name, Jul 17 '19 at 03:26

score 9 · Answer 7 · answered Feb 17 '22 at 09:26

You just need write app:boxStrokeWidth="0dp" and app:boxStrokeWidthFocused="0dp" attributes for TextInputLayout component.

should be write like this:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:boxStrokeWidth="0dp"
    app:boxStrokeWidthFocused="0dp"
    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>

score 8 · Answer 8 · answered Apr 18 '20 at 13:21

8

If you want app:boxBackgroundMode with filled and without underline than this will work

<item name="boxStrokeWidthFocused">0dp</item>
<item name="boxStrokeWidth">0dp</item>

answered Apr 18 '20 at 13:21

Shweta Chauhan

6,739
6
37
57

Touhid · Answer 9 · 2020-04-19T07:26:45.883

Adding this line on TextInputLayout works for me:

app:boxStrokeWidth="0dp"

UPDATE

Inside color res directory add et_box_color.xml file and add below lines inside of it:

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:color="@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>

Now add Your Material Edit text like below:

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/textInputLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/border"
                app:boxStrokeColor="@color/et_box_color"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/llBank">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/etAmount"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="1dp"
                    android:background="#00FFFFFF"
                    android:gravity="center"
                    android:hint="Amount"
                    android:imeOptions="actionDone"
                    android:inputType="numberDecimal" />

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

I added a background to make a border of the TextInputLayout, remove background of TextInputLayout if you don't need. Background of TextInputEditText will be necessary to make background transparent.

score 6 · Answer 10 · edited May 11 '21 at 07:05

6

The solution is very simple, you have to add this line to TextInputLayout : style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" and it will be fixed.

edited May 11 '21 at 07:05

topsoftwarepro

773
5
19

answered May 09 '21 at 23:34

Amine Elkhalidy

61
1
1

score 3 · Answer 11 · answered Feb 29 '20 at 15:15

3

Easy way;

app:boxBackgroundMode="filled"
app:boxStrokeWidth="0dp"

answered Feb 29 '20 at 15:15

Cafer Mert Ceyhan

1,640
1
13
17

score 1 · Answer 12 · answered Oct 03 '19 at 07:58

Create a selector at res/drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.01" android:color="?attr/background" android:state_focused="true"/>
    <item android:alpha="0.01" android:color="?attr/background" android:state_hovered="true"/>
    <item android:alpha="0.01" android:color="?attr/background" android:state_enabled="false"/>
    <item android:alpha="0.01" android:color="?attr/background"/>
</selector>

background here - any color that is close to you background.

Way 1 Then set it to your TextInputLayout:

<com.google.android.material.textfield.TextInputLayout
...
  app:boxStrokeColor="@drawable/text_input_selector"
...

Way 2, trough styles:

styles.xml:

<style name="vm_textFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
        <item name="boxStrokeColor">@drawable/text_input_selector</item>
</style>

 <com.google.android.material.textfield.TextInputLayout
...
    style="@style/vm_textFilledBox"

score 0 · Answer 13 · answered Nov 28 '19 at 11:46

Make your custom TextInputLayout like this

package com.google.android.material.textfield

import android.content.Context
import android.util.AttributeSet
class TextInputLayoutWithoutUnderline @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : TextInputLayout(context, attrs, defStyleAttr) {

    override fun updateEditTextBackground() {
        // XXX don't call super on purpose
    }

}

iamkdblue · Answer 14 · 2020-12-05T14:58:18.127

0

Note: This answer about removing the underline while typing in TextInputEditText

After searching 6 hours about how to remove the underline from TextInputEditText, I found a single line solution, its just put android:inputType="text|textNoSuggestions" inside your TextInputEditText.

Now i am not getting any underline while typing in TextInputEditText

edited Dec 05 '20 at 14:58

answered Dec 05 '20 at 14:53

iamkdblue

3,448
2
25
43

Didn't help in my case. – CoolMind Sep 01 '23 at 16:55

score -1 · Answer 15 · edited Jul 16 '19 at 20:58

-1

Try setting background to @null or @android:color/transparent

edited Jul 16 '19 at 20:58

Tamir Abutbul

7,301
7
25
53

answered Jul 16 '19 at 18:56

SABANTO

1,316
9
24

3

As mentioned in the question, I have tried it but it didn't work – Sagar Jogadia Jul 16 '19 at 19:08

Remove underline from TextInputEditText

15 Answers15

2022 Update

Original answer

TL;DR

Linked