ChatGPT解决这个技术问题 Extra ChatGPT

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.


m
murgupluoglu

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

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.
use this : android:background="@android:color/transparent"
what if I am already having background of other color, lets say gray, how to remove underbar / underline in that case?
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?
How can we do programmatically in java?
J
Jurgo

Set background to null.

android:background="@null"

That's the same as background="#00000000". Doesn't really work.
This worked for me but I ended up doing android:background="@android:color/transparent because @null is scary.
@Richard why is @null scary?
"@null" hides blinking cursor too, "@android:color/transparent" not.
@VinayakVNaik Actually #00000000 is transparent black . Not transparent white, which is #00ffffff
Y
Yasin Kaçmaz

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


This is way better than changing background of the entire view (as other answers suggest)
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
J
Jared Burrows

Please set your edittext background as

android:background="#00000000"

It will work.


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
How to undo this programitically
Z
Zoe stands with Ukraine

You can do it programmatically using setBackgroundResource:

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

i don't know why, but it doesn't work . the line is still there
P
Paul LeBeau

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

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


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"
D
Darush

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>

t
tir38

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.
H
Harvinder Singh

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


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.
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
l
live-love

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

b
bengongon97

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.


p
prashant kute

Simply Use This

 editText.setBackgroundColor(Color.TRANSPARENT);

a
androidguy

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


A
AKASH WANGALWAR

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

android:textCursorDrawable="@null"

Although this doesn't solve the question it was of help to me.
k
kingargyle

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.


R
Rehan Khan

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

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

Or

android:background="@null"

T
Twinkle

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

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

R
RAGHHURAAMM

Programmatically use : editText.setBackground(null)

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


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

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


B
Book Of Zeus

Set background to null

android:background="@null" in your xml 

H
HJ Song

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

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

R.color.transparent = #00000000


L
Lakhwinder Singh

if you are using background then you must use this tag

android:testCursorDrawable="@null" 

i
itabdullah

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

f
fcdt

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

С
Саша Мазур

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>