[android] How to hide underbar in EditText

How can I hide the EditText underbar (the prompt line with little serifs at the ends)?

There might be a better way to do what I want: I have a layout with an EditText. Normally, this displays fine where the user can tap on it and begin entering or editing text.

Sometimes, however, I would like to use the same layout (simplifies other logic) to display the same data in a read-only manner. I want the presentation to be similar - it should have the same height and same font, but not have the underbar.

As a stop-gap measure, I'm going to implement this by removing the EditText and substituting a TextView. I think that will give the desired results, but it seems like a roundabout an expensive way to do something that ought to be easy to do by changing attributes.

Set background to null.

android:background="@null"

If you want this to affect all instances of EditText and any class that inherits from it, then you should set in your theme the value for the attribute, editTextBackground.

  <item name="android:editTextBackground">@drawable/bg_no_underline</item>

An example of the drawable I use is:

<inset xmlns:android="http://schemas.android.com/apk/res/android"
     android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
     android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
     android:insetTop="@dimen/abc_edit_text_inset_top_material"
     android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
    <selector>
      <item android:drawable="@android:color/transparent"/>
    </selector>
</inset>

This is slightly modified version of what the default material design implementation is.

When applied it will make all your EditText remove the underline throughout the app, and you don't have to apply the style to each and every one manually.

Programmatically use : editText.setBackground(null)

From xml use: android:background="@null"

If you are using the EditText inside TextInputLayout use app:boxBackgroundMode="none" as following:

<com.google.android.material.textfield.TextInputLayout
    app:boxBackgroundMode="none"
    ...
    >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

Please set your edittext background as

android:background="#00000000"

It will work.

To retain both the margins and background color use:

background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <padding
        android:bottom="10dp"
        android:left="4dp"
        android:right="8dp"
        android:top="10dp" />

    <solid android:color="@android:color/transparent" />

</shape>

Edit Text:

<androidx.appcompat.widget.AppCompatEditText
    android:id="@+id/none_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background"
    android:inputType="text"
    android:text="First Name And Last Name"
    android:textSize="18sp" />

In my case i was using custom background for edit text so setting background to @null or setting tint to transparent wasn't the solution for me so i played a little trick which worked for me very nicely i just set

android:inputType="textVisiblePassword"

and it gets the job done pretty well.. its not the optimal solution but it works

if your edit text already has a background then you can use following.

android:textCursorDrawable="@null"

Here's a way to hide it, without ruining the default padding:

fun View.setViewBackgroundWithoutResettingPadding(background: Drawable?) {
    val paddingBottom = this.paddingBottom
    val paddingStart = ViewCompat.getPaddingStart(this)
    val paddingEnd = ViewCompat.getPaddingEnd(this)
    val paddingTop = this.paddingTop
    ViewCompat.setBackground(this, background)
    ViewCompat.setPaddingRelative(this, paddingStart, paddingTop, paddingEnd, paddingBottom)
}

usage:

editText.setViewBackgroundWithoutResettingPadding(null)

Update:

If you find yourself always passing null, you can codify that in the method (and then you might as well overload EditText itself)

fun EditText.removeUnderline() {
    val paddingBottom = this.paddingBottom
    val paddingStart = ViewCompat.getPaddingStart(this)
    val paddingEnd = ViewCompat.getPaddingEnd(this)
    val paddingTop = this.paddingTop
    ViewCompat.setBackground(this, null)
    ViewCompat.setPaddingRelative(this, paddingStart, paddingTop, paddingEnd, paddingBottom)
}

// usage:
editText.removeUnderline()

You can set EditText's backgroundTint value to a specific color. If you set transparent color, underbar should gone.

android:backgroundTint="@color/Transparent"

<color name="Transparent">#00000000</color>

But you can use this in Api v21(Lollipop) or higher

Set background to null

android:background="@null" in your xml 

In my case, editText.setBackgroundResource(R.color.transparent); is best.

It doesn't remove default padding, just under bar.

R.color.transparent = #00000000

You have to set a minWidth too, otherwise the cursor will disappear if the text is empty.

        <EditText
            android:id="@+id/et_card_view_list_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="30dp"
            android:layout_weight="1"
            android:inputType="text"
            android:text="Name"
            android:background="@android:color/transparent"
            />

Simply Use This

 editText.setBackgroundColor(Color.TRANSPARENT);

android:inputType="textVisiblePassword|textMultiLine" android:background="@android:color/transparent"

...its not the optimal solution but it works.

android:background="@android:color/transparent"

Or

android:background="@null"

I discovered the most curious thing! If you set it to null using Data Binding: android:background="@{null}"

Then not only is the background removed, but the view still has the padding that was calculated from the default background. So for some reason the deferred null setting doesn't clear the padding from the previous bg..? The padding on the view is left/top/right 4dp, bottom 13dp (from emulator level 21).

May not have same end result on all API levels, so beware! Someone tell me if you test this and find it reliable. (Also note that that bottom padding sticks out because of that underline that was in the original. So you'll probably want to change it in the XML, or reset it in the code after it's loaded to equal top...

I have something like this which is very very useful:

generalEditText.getBackground().mutate().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);

where generalEditText is my EditText and color white is:

<color name="white">#ffffff</color>

This will not remove padding and your EditText will stay as is. Only the line at the bottom will be removed. Sometimes it is more useful to do it like this.

If you use android:background="@null" as many suggested you lose the padding and EditText becomes smaller. At least, it was my case.

A little side note is if you set background null and try the java code I provided above, your app will crash right after executing it. (because it gets the background but it is null.) It may be obvious but I think pointing it out is important.

An other option, you can create your own custom EditText like this :

class CustomEditText : androidx.appcompat.widget.AppCompatEditText {
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    private val paint = Paint()
    private val path = Path()

    init { // hide your underbar
        this.setBackgroundResource(android.R.color.transparent)

        // other init stuff...
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        // draw your canvas...
    }
}

You can do it programmatically using setBackgroundResource:

editText.setBackgroundResource(android.R.color.transparent);

What I did was to create a Shape drawable and set that as the background:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <padding
        android:top="8dp"
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp" />

    <solid android:color="#fff" />

</shape>

Note: I actually used @dimen and @color values for the firelds, but I've simplified the shape file here for clarity.

You can also define a STYLE for your editText so you can regroup all properties in common. It is very powerful if you have to multiple edit text that need to has the behaviour

Put the code in res/values/styles.xml

<style name="MyEditTextStyle" parent="@android:style/TextAppearance.Widget.EditText">
    <item name="android:background">@color/transparence</item> //NO UNDERBAR
    <item name="android:maxLines">1</item>
    <item name="android:height">28dp</item> //COMMON HEIGHT
</style>

After that you just need to call it in your editText

<EditText
    android:id="@+id/edit1"
    style="@style/MyEditTextStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<EditText
    android:id="@+id/edit2"
    style="@style/MyEditTextStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Using either property:

android:background="@null"

OR

android:background="@android:color/transparent"

worked for me to hide the underline of the EditText.

However, do note that it then causes a spacing issue with the TextInputLayout that I've surrounding the EditText

if you are using background then you must use this tag

android:testCursorDrawable="@null"