How to hide underbar in EditText

Question

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.

Possible duplicate? http://stackoverflow.com/questions/5478109/remove-focus-border-of-edittext — Mohamed Taher Alrefaie, Jul 28 '14 at 16:14

score 1258 · Accepted Answer · edited May 20 '20 at 10:40

1258

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);

edited May 20 '20 at 10:40

murgupluoglu

6,524
4
33
43

answered Dec 20 '12 at 15:38

ha1ogen

13,375
3
19
19

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. – Peri Hartman Mar 09 '15 at 15:38
134

use this : `android:background="@android:color/transparent"` – dd619 Jul 02 '15 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? – Narendra Singh Nov 25 '15 at 09: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 Dec 01 '15 at 08:55
2

How can we do programmatically in java? – Jagdish Apr 03 '16 at 13:11
2

What is the default background, if we want to return it to default? – Aleksandar Stefanović Aug 06 '16 at 17:22
The syntax for this has been changed. To do it programmatically: myedittext.setBackgroundResource(R.color.fui_transparent);. I used to set the Visibility to false to nix the underbar and send a performclick message if the user clicked my custom textbox, but this has been more reliable. – Androidcoder Nov 09 '17 at 19:45

score 106 · Answer 2 · edited Mar 09 '15 at 12:21

106

Set background to null.

android:background="@null"

edited Mar 09 '15 at 12:21

Jurgo

907
4
18

answered Mar 09 '15 at 11:53

Vinayak V Naik

1,291
1
9
7

2

That's the same as background="#00000000". Doesn't really work. – Peri Hartman Mar 09 '15 at 15:38
16

This worked for me but I ended up doing `android:background="@android:color/transparent` because `@null` is scary. – Dick Lucas Jul 24 '15 at 23:19
3

@Richard why is ``@null`` scary? – Michael Aug 10 '15 at 01:31
@null will indicate no background exist. If we specify background="#00000000" it will draw white background with alpha value "0". – Vinayak V Naik Mar 19 '16 at 08:00
4

"@null" hides blinking cursor too, "@android:color/transparent" not. – Lukas Novak Jun 01 '17 at 14:15
1

@VinayakVNaik Actually #00000000 is transparent black . Not transparent white, which is #00ffffff – android developer Feb 13 '18 at 13:47
@LukasNovak On which Android version and device did you see this? To me it looks fine... – android developer Feb 13 '18 at 13:49
@DickLucas Null is not scary it's a lot useful.And in this case it's totally fine you can use setBackGroundDrawable(null); which makes the background the default like when it you havn't set it.(It's common between every layout not only this one). – Steve Moretz Feb 05 '19 at 13:49
@stevemoretz There is a reason null is known as the "billion dollar mistake." I avoid it whenever possible to avoid null pointer exceptions. In this case specifically, I avoid it because I would rather be explicit about the background I want. null in this case only implicitly sets the background to be transparent, who knows what it will mean in a future version of Android. Whereas setting it to android:color/transparent is explicit and not only is more likely to work in future Android versions, it's also clearer to other devs who will look at my code. – Dick Lucas Feb 05 '19 at 22:07
@DickLucas Ok let's clearify the null pointer exception is supposed to happen because,how the hell use an uninitialized pointer?But null is used for special cases in Views and also CustomViews and a lot of other case.You should get more involved with it.What is?@android:color/transparent let's take a look:#00000000,The value you as you can see in android package is same as null!Even internally in AppcompatEditText class setInternalBackgroundTint(null); is used and a lot of other cases.You better get more involved with null.Instead of being scared. – Steve Moretz Feb 06 '19 at 09:43

Yasin Kaçmaz · Answer 3 · 2017-07-25T10:24:09.770

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

edited Jul 25 '17 at 10:24

answered Dec 03 '15 at 14:21

Yasin Kaçmaz

6,573
5
40
58

This is way better than changing background of the entire view (as other answers suggest) – Alex Semeniuk Sep 28 '18 at 07: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 – cristianorbs Oct 31 '20 at 17:38

score 27 · Answer 4 · edited Jan 13 '15 at 17:21

27

Please set your edittext background as

android:background="#00000000"

It will work.

edited Jan 13 '15 at 17:21

Jared Burrows

54,294
25
151
185

answered Nov 16 '14 at 16:19

kishore kumar

279
3
4

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 – Peri Hartman Nov 16 '14 at 19:27
1

How to undo this programitically – Tushar Narang Jan 11 '16 at 07:27

score 24 · Answer 5 · edited Feb 03 '18 at 20:44

24

You can do it programmatically using setBackgroundResource:

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

edited Feb 03 '18 at 20:44

Zoe

27,060
21
118
148

answered Dec 12 '16 at 11:46

Roberto

4,524
1
38
30

2

i don't know why, but it doesn't work . the line is still there – Hissaan Ali Aug 24 '19 at 17:51

score 21 · Answer 6 · answered Aug 06 '20 at 10:36

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>

score 17 · Answer 7 · answered Feb 22 '16 at 16:03

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.

This is a perfectly good option, too. It's a variation on setting a custom drawable. — Peri Hartman, Feb 22 '16 at 19:15

score 16 · Answer 8 · edited Jul 19 '18 at 10:18

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

edited Jul 19 '18 at 10:18

ThePierrasse

15
5

answered May 25 '16 at 03:01

AjCodez

360
3
10

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 Jan 05 '18 at 15:24

score 12 · Answer 9 · edited Mar 28 '20 at 22:24

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()

This answer is perfect and should be accepted. It can remove background without removing default padding. — Pankaj Kumar, Mar 07 '18 at 12:00

score 11 · Answer 10 · answered Sep 26 '19 at 21:25

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

answered Sep 26 '19 at 21:25

Harvinder Singh

1,919
21
15

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 Oct 18 '19 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 – Sharone Lev Dec 14 '19 at 20:03

score 7 · Answer 11 · answered Mar 13 '18 at 20:18

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

Rehan Khan · Answer 12 · 2022-04-12T07:25:11.370

6

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

edited Apr 12 '22 at 07:25

answered Sep 07 '21 at 08:04

Rehan Khan

1,031
13
10

score 5 · Answer 13 · answered Aug 28 '18 at 07:13

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.

score 5 · Answer 14 · answered Nov 30 '18 at 08:39

5

Simply Use This

 editText.setBackgroundColor(Color.TRANSPARENT);

answered Nov 30 '18 at 08:39

prashant kute

333
4
9

score 4 · Answer 15 · answered Apr 04 '17 at 04:14

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

score 4 · Answer 16 · answered Jul 27 '17 at 08:05

4

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

android:textCursorDrawable="@null"

answered Jul 27 '17 at 08:05

AKASH WANGALWAR

1,326
1
14
21

Although this doesn't solve the question it was of help to me. – Rubén Viguera Sep 13 '18 at 08:53

score 4 · Answer 17 · answered Jul 31 '18 at 13:17

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.

score 3 · Answer 18 · edited Oct 07 '22 at 16:58

3

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);

edited Oct 07 '22 at 16:58

Dr Mido

2,414
4
32
72

answered Oct 03 '22 at 11:11

Hassam Saeed

31
4

score 2 · Answer 19 · edited Jun 05 '20 at 16:42

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

score 2 · Answer 20 · edited Mar 20 '19 at 06:58

2

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

Or

android:background="@null"

edited Mar 20 '19 at 06:58

Andreas

2,455
10
21
24

answered Mar 20 '19 at 06:32

Null Pointer Exception

1,555
14
13

score 1 · Answer 21 · edited Oct 19 '18 at 06:13

1

Programmatically use : editText.setBackground(null)

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

edited Oct 19 '18 at 06:13

RAGHHURAAMM

1,099
7
15

answered Oct 19 '18 at 05:39

Shubham Kaushik

11
2

score 1 · Answer 22 · edited Jun 20 '21 at 02:22

1

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

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

edited Jun 20 '21 at 02:22

Zain

37,492
7
60
84

answered Nov 29 '19 at 20:00

Carles Garrigues

11
1

Bhavin Solanki · Answer 23 · 2022-09-27T17:51:08.187

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

score 0 · Answer 24 · edited Mar 16 '19 at 06:41

0

Set background to null

android:background="@null" in your xml

edited Mar 16 '19 at 06:41

Book Of Zeus

49,509
18
174
171

answered Mar 16 '19 at 06:24

Josss

229
1
4
19

score 0 · Answer 25 · edited Aug 14 '19 at 08:37

0

if you are using background then you must use this tag

android:testCursorDrawable="@null"

edited Aug 14 '19 at 08:37

Lakhwinder Singh

6,799
4
25
42

answered Mar 16 '19 at 06:30

ATIQ UR REHMAN

431
3
12

score 0 · Answer 26 · answered Apr 29 '19 at 09:27

0

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

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

R.color.transparent = #00000000

answered Apr 29 '19 at 09:27

HJ Song

41
1
5

score 0 · Answer 27 · answered Nov 13 '19 at 11:08

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

score 0 · Answer 28 · edited Aug 28 '20 at 19:55

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

score 0 · Answer 29 · answered Sep 10 '21 at 10:51

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>

faribakhandani · Answer 30 · 2023-03-16T09:59:06.343

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>

How to hide underbar in EditText

30 Answers30

Linked

Related