610

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.

1

30 Answers 30

1263

You can set the EditText to have a custom transparent drawable or just use

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

or

android:background="@null"

or Programmatically

editText.setBackgroundResource(android.R.color.transparent);
7
  • 7
    The best answer, as ha1ogen says, is to make a custom drawable. Start with the 9-patch that is used for normal EditText fields. Modify it to strip out the underbar and other graphics you don't want. With this, your modified EditText will have the same margins and overall appearance as normal EditText fields. If you simply set the background to null, it will lose the margins. Commented Mar 9, 2015 at 15:38
  • 134
    use this : android:background="@android:color/transparent"
    – dd619
    Commented Jul 2, 2015 at 14:32
  • 5
    what if I am already having background of other color, lets say gray, how to remove underbar / underline in that case? Commented Nov 25, 2015 at 9:46
  • 10
    In Android 19, using android:background="@android:color/transparent" causes the same loss of margins issue... Is there an example anywhere of somebody creating such a custom drawable?
    – Anti Earth
    Commented Dec 1, 2015 at 8:55
  • 2
    How can we do programmatically in java?
    – Jagdish
    Commented Apr 3, 2016 at 13:11
107

Set background to null.

android:background="@null"
10
  • 2
    That's the same as background="#00000000". Doesn't really work. Commented Mar 9, 2015 at 15:38
  • 16
    This worked for me but I ended up doing android:background="@android:color/transparent because @null is scary.
    – Dick Lucas
    Commented Jul 24, 2015 at 23:19
  • 3
    @Richard why is @null scary?
    – Michael
    Commented Aug 10, 2015 at 1:31
  • 4
    "@null" hides blinking cursor too, "@android:color/transparent" not. Commented Jun 1, 2017 at 14:15
  • 1
    @VinayakVNaik Actually #00000000 is transparent black . Not transparent white, which is #00ffffff Commented Feb 13, 2018 at 13:47
44

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

2
  • This is way better than changing background of the entire view (as other answers suggest) Commented Sep 28, 2018 at 7:46
  • 1
    It also preserves the margins, since it doesn't remove the background itself, just change its color to transparent, so I went with this one Commented Oct 31, 2020 at 17:38
27

Please set your edittext background as

android:background="#00000000"

It will work.

2
  • 4
    It will sort-of work, but not properly. If you simply remove the background you will also lose the margins around the field - they are part of the default background. The right solution is to substitute a different background that simply doesn't have the underbar in it, as @ha1ogen suggests Commented Nov 16, 2014 at 19:27
  • 1
    How to undo this programitically Commented Jan 11, 2016 at 7:27
24

You can do it programmatically using setBackgroundResource:

editText.setBackgroundResource(android.R.color.transparent);
1
  • 2
    i don't know why, but it doesn't work . the line is still there
    – Hissaan
    Commented Aug 24, 2019 at 17:51
22

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

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.

1
  • 1
    This is a perfectly good option, too. It's a variation on setting a custom drawable. Commented Feb 22, 2016 at 19:15
16

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

1
  • 1
    The spacing issue comes from the error layout. In order to fix that set the errorEnabled property of the TextInputLayout to false app:errorEnabled="false"
    – Ulbo
    Commented Jan 5, 2018 at 15:24
12

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()
1
  • This answer is perfect and should be accepted. It can remove background without removing default padding. Commented Mar 7, 2018 at 12:00
11

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

2
  • 1
    I like this in conjunction with transparent background because it hides the bar that shows up below the text while typing - all I want is the text, no adornments.
    – 19Craig
    Commented Oct 18, 2019 at 22:40
  • 1
    This answer is the only one that worked for me since my edittext boxes are created programatically and each have different background colors so the background can not be null and rely on the parents background color Commented Dec 14, 2019 at 20:03
7

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"
            />
7

Use this code in Your XML Edittext

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

as shown in below code

         <EditText
                    android:id="@+id/EditText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"/>
5

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.

5

Simply Use This

 editText.setBackgroundColor(Color.TRANSPARENT);
5

Several Ways to remove Underline in editText Android Studio

android:background="@null" The above line creates a problem at some point
or

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

** or Programmatically**

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

4

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

4

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

android:textCursorDrawable="@null"
1
  • Although this doesn't solve the question it was of help to me. Commented Sep 13, 2018 at 8:53
4

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.

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

Or

android:background="@null"
2

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" />
1

Programmatically use : editText.setBackground(null)

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

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

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

1

Okay So let make some easier things for do edittext in android, like outlinedbox and Null background of Edittext. is follows below.

Just Copy and Paste.

Edittext with OutlinedBox for password with toogle options at the end.

    <com.google.android.material.textfield.TextInputLayout    
          style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:hint="@string/password"
          app:boxCornerRadiusBottomEnd="10dp"
          app:boxCornerRadiusBottomStart="10dp"
          app:boxCornerRadiusTopEnd="10dp"
          app:boxCornerRadiusTopStart="10dp"
          app:boxStrokeColor="@color/primary_color"
          app:boxStrokeWidth="1dp"
          app:boxStrokeWidthFocused="1dp"
          app:errorIconDrawable="@null"
          app:hintTextColor="#d3d3d3"
          app:passwordToggleDrawable="@drawable/password_toggle"
          app:passwordToggleEnabled="true">
    
          <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/etPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:paddingStart="10dp"
                android:paddingEnd="0dp"
                android:textCursorDrawable="@null"
                android:textSize="12sp" />
</com.google.android.material.textfield.TextInputLayout>

Create Drawble for password_toggle

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_show" android:state_checked="true"/>
    <item android:drawable="@drawable/ic_hide"/>
</selector>

Now Edittext without any border.

For Email Edittext

<com.google.android.material.textfield.TextInputEditText
       android:id="@+id/email"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/bg_edittext"
       android:hint="@string/enter_your_email"
       android:imeOptions="actionDone"
       android:inputType="textEmailAddress"
       android:maxLines="1"
       android:padding="10dp"
       android:singleLine="true"
       android:textColor="@color/black"
       android:textColorHint="#d3d3d3"
       android:textSize="12sp" />

For Password Edittext.

<com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/bg_edittext"
       android:hint="@string/enter_your_password"
       android:imeOptions="actionDone"
       android:inputType="textEmailAddress"
       android:maxLines="1"
       android:padding="10dp"
       android:singleLine="true"
       android:textColor="@color/black"
       android:textColorHint="#d3d3d3"
       android:textSize="12sp" />
1

I solved this issue with the following:

 <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tv_input_password"
        android:layout_width="250dp"
        android:layout_height="50dp"
        app:errorEnabled="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.503"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_signin"
        app:layout_constraintVertical_bias="0.322"
        app:boxStrokeWidth="0dp"
        app:boxStrokeWidthFocused="0dp"
        app:passwordToggleEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/et_password"
            android:layout_width="250dp"
            android:layout_height="50dp"
            android:background="@drawable/shape1"
            />

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

in fact, with app:boxStrokeWidth="0dp" and app:boxStrokeWidthFocused="0dp" could remove underline.

a rectangle shape :

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

    <solid android:color="@color/white"/>
    <corners android:radius="50dp"/>
    <stroke android:width="0.75dp" android:color="#B1B0B3"/>



</shape>
0

Set background to null

android:background="@null" in your xml 
0

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

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

R.color.transparent = #00000000

0

if you are using background then you must use this tag

android:testCursorDrawable="@null" 
0

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" />
0

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

For fixed hint use this

        <item name="boxStrokeWidth">0dp</item>
        <item name="boxCornerRadiusTopStart">12dp</item>
        <item name="boxCornerRadiusTopEnd">12dp</item>
        <item name="boxCornerRadiusBottomStart">12dp</item>
        <item name="boxCornerRadiusBottomEnd">12dp</item>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.