Cómo ocultar la barra inferior en EditText


496

¿Cómo puedo ocultar la barra inferior de EditText (la línea de solicitud con pequeñas serif en los extremos)?

Puede haber una mejor manera de hacer lo que quiero: tengo un diseño con EditText. Normalmente, esto se muestra bien donde el usuario puede tocarlo y comenzar a ingresar o editar texto.

A veces, sin embargo, me gustaría usar el mismo diseño (simplifica otra lógica) para mostrar los mismos datos de una manera de solo lectura. Quiero que la presentación sea similar: debe tener la misma altura y la misma fuente, pero no la barra inferior.

Como medida provisional, voy a implementar esto eliminando el EditText y sustituyendo un TextView. Creo que eso dará los resultados deseados, pero parece una rotonda una forma costosa de hacer algo que debería ser fácil cambiando los atributos.


Respuestas:


1052

Puede configurar el EditTextpara tener un dibujo transparente transparente personalizado o simplemente usar

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

o

android:background="@null"

o programáticamente

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

77
La mejor respuesta, como dice ha1ogen, es hacer un dibujo personalizado. Comience con el parche 9 que se usa para los campos normales de EditText. Modifíquelo para quitar la barra inferior y otros gráficos que no desee. Con esto, su EditText modificado tendrá los mismos márgenes y apariencia general que los campos normales de EditText. Si simplemente establece el fondo en nulo, perderá los márgenes.
Peri Hartman

124
use esto:android:background="@android:color/transparent"
dd619

3
¿Qué pasa si ya tengo un fondo de otro color, digamos gris, cómo eliminar el subrayado / subrayado en ese caso?
Narendra Singh

66
En Android 19, el uso android:background="@android:color/transparent"causa el mismo problema de pérdida de márgenes ... ¿Hay algún ejemplo de alguien creando un dibujo tan personalizado?
Anti Earth

2
¿Cómo podemos hacer programáticamente en Java?
jagdish

100

Establecer fondo a nulo.

android:background="@null"

2
Es lo mismo que background = "# 00000000". Realmente no funciona.
Peri Hartman

14
Esto funcionó para mí, pero terminé haciendo android:background="@android:color/transparentporque @nullda miedo.
Dick Lucas

3
@ Richard ¿por qué da @nullmiedo?
Michael

@null indicará que no existe un fondo. Si especificamos background = "# 00000000" dibujará un fondo blanco con el valor alfa "0".
Vinayak V Naik

2
"@null" también oculta el cursor parpadeante, "@android: color / transparent" no.
Lukas Novak

37

Puede establecer EditTextel backgroundTintvalor de un color específico. Si establece un color transparente, la barra inferior debería desaparecer.

android:backgroundTint="@color/Transparent"

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

Pero puedes usar esto en Api v21(Lollipop)o más alto


Esto es mucho mejor que cambiar el fondo de la vista completa (como sugieren otras respuestas)
Alex Semeniuk

26

Establezca su fondo de edición de texto como

android:background="#00000000"

Funcionará.


3
Será una especie de trabajo, pero no correctamente. Si simplemente elimina el fondo, también perderá los márgenes alrededor del campo; son parte del fondo predeterminado. La solución correcta es sustituir un fondo diferente que simplemente no tiene la barra inferior, como sugiere @ ha1ogen
Peri Hartman

1
Cómo deshacer esto programáticamente
Tushar Narang

23

Puede hacerlo mediante programación usando setBackgroundResource:

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

No sé por qué, pero no funciona. la línea sigue ahí
Syed Hissaan

15

Lo que hice fue crear una forma dibujable y establecerla como fondo:

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

Nota: Realmente utilicé @dimeny @colorvalores para firelds, pero he simplificado el archivo de forma aquí para mayor claridad.


1
Esta también es una buena opción. Es una variación en la configuración de un dibujo personalizado.
Peri Hartman

15

Usando cualquiera de las propiedades:

android:background="@null"

O

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

funcionó para mí ocultar el subrayado de EditText.

Sin embargo, tenga en cuenta que luego causa un problema de espacio con el TextInputLayout que he rodeado el EditText


1
El problema de espacio proviene del diseño de error. Para corregir eso, establezca la propiedad errorEnabled de TextInputLayout en aplicación falsa: errorEnabled = "false"
Ulbo

12

Aquí hay una manera de ocultarlo, sin arruinar el relleno predeterminado:

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

uso:

editText.setViewBackgroundWithoutResettingPadding(null)

Actualizar:

Si se encuentra siempre pasando nulo, puede codificar eso en el método (y luego también podría sobrecargar EditText)

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

Esta respuesta es perfecta y debe ser aceptada. Puede eliminar el fondo sin eliminar el relleno predeterminado.
Pankaj Kumar

6

También debe establecer un minWidth, de lo contrario el cursor desaparecerá si el texto está vacío.

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

6

En mi caso, estaba usando un fondo personalizado para editar texto, por lo que establecer el fondo en @null o establecer el tinte en transparente no era la solución para mí, así que jugué un pequeño truco que funcionó muy bien para mí.

android:inputType="textVisiblePassword"

y hace el trabajo bastante bien ... no es la solución óptima pero funciona


1
Me gusta esto junto con un fondo transparente porque oculta la barra que aparece debajo del texto mientras escribo: todo lo que quiero es el texto, sin adornos.
19Craig

1
Esta respuesta es la única que funcionó para mí, ya que mis cuadros de edición de texto se crean programáticamente y cada uno tiene diferentes colores de fondo, por lo que el fondo no puede ser nulo y depender del color de fondo de los padres
Sharone Lev

5

Tengo algo como esto que es muy muy útil:

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

donde generalEditText es mi EditText y el color blanco es:

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

Esto no eliminará el relleno y su EditText permanecerá como está. Solo se eliminará la línea en la parte inferior. A veces es más útil hacerlo así.

Si usa android:background="@null"tantas sugerencias, pierde el relleno y EditText se vuelve más pequeño. Al menos, fue mi caso.

Una pequeña nota al margen es que si establece un fondo nulo y prueba el código de Java que proporcioné anteriormente, su aplicación se bloqueará justo después de ejecutarla. (porque obtiene el fondo pero es nulo). Puede ser obvio, pero creo que señalarlo es importante.


4

¡Descubrí lo más curioso! Si lo configura para nullusar Enlace de datos: android:background="@{null}"

Entonces no solo se elimina el fondo, sino que la vista todavía tiene el relleno que se calculó a partir del fondo predeterminado. Entonces, por alguna razón, la configuración nula diferida no borra el relleno del bg anterior ...? El relleno en la vista es 4dp izquierda / superior / derecha, 13dp inferior (desde el nivel 21 del emulador).

Es posible que no tenga el mismo resultado final en todos los niveles de API, ¡así que tenga cuidado! Alguien dígame si prueba esto y lo encuentra confiable. (También tenga en cuenta que ese relleno inferior sobresale debido a ese subrayado que estaba en el original. Por lo tanto, es probable que desee cambiarlo en el XML o restablecerlo en el código después de que se cargue en la parte superior igual ...


4

si su texto de edición ya tiene un fondo, puede usar lo siguiente.

android:textCursorDrawable="@null"

Aunque esto no resuelve la pregunta, fue de ayuda para mí.
Rubén Viguera

4

Si desea que esto afecte a todas las instancias de EditText y cualquier clase que herede de él, entonces debe establecer en su tema el valor para el atributo, editTextBackground.

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

Un ejemplo del dibujo que uso es:

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

Esta es una versión ligeramente modificada de cuál es la implementación de diseño de material predeterminada.

Cuando se aplica, hará que todo su EditText elimine el subrayado en toda la aplicación, y no tiene que aplicar el estilo a todos y cada uno manualmente.



2

También puede definir un ESTILO para su editText para que pueda reagrupar todas las propiedades en común. Es muy poderoso si tiene que editar múltiples textos que necesitan tener el comportamiento

Ponga el código en 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>

Después de eso solo necesita llamarlo en su 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

Uso programático: editText.setBackground(null)

De xmluso:android:background="@null"



1

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

... no es la solución óptima pero funciona.


0

Establecer fondo como nulo

android:background="@null" in your xml 

0

En mi caso, editText.setBackgroundResource(R.color.transparent);es lo mejor.

No elimina el relleno predeterminado, justo debajo de la barra.

R.color.transparent = #00000000


0

si está utilizando el fondo, debe usar esta etiqueta

android:testCursorDrawable="@null" 

0

Para conservar los márgenes y el color de fondo, 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>

Editar texto:

<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" />
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.