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.
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);
Set background to null.
android:background="@null"
android:background="@android:color/transparent
because @null
is scary.
@null
scary?
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
Please set your edittext background as
android:background="#00000000"
It will work.
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.
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 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>
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()
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
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"
/>
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.
Simply Use This
editText.setBackgroundColor(Color.TRANSPARENT);
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...
if your edit text already has a background then you can use following.
android:textCursorDrawable="@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.
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"/>
android:background="@android:color/transparent"
Or
android:background="@null"
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" />
Programmatically use : editText.setBackground(null)
From xml
use: android:background="@null"
android:inputType="textVisiblePassword|textMultiLine"
android:background="@android:color/transparent"
...its not the optimal solution but it works.
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
if you are using background then you must use this tag
android:testCursorDrawable="@null"
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" />
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>
Success story sharing
android:background="@android:color/transparent"
android:background="@android:color/transparent"
causes the same loss of margins issue... Is there an example anywhere of somebody creating such a custom drawable?