Diseñe Android EditText para mostrar un mensaje de error como lo describe google


151

Necesito un EditTextque se vea así en onError:

ingrese la descripción de la imagen aquí

llamando a onError se ve así en su lugar:

ingrese la descripción de la imagen aquí

Nota: la aplicación se ejecuta en SDK 19 (4.4.2)

min SDK es 1

¿Hay algún método similar a setError que lo haga automáticamente o tengo que escribir el código?

Gracias


1
Es poco probable que pueda hacer eso con solo un EditText. Lo más probable es que necesite algo que lo envuelva EditTexto lo agregue. Ver github.com/rengwuxian/MaterialEditText .
CommonsWare

Respuestas:


330

No es necesario usar una biblioteca de terceros ya que Google introdujo el TextInputLayoutcomo parte de la design-support-library.

Siguiendo un ejemplo básico:

Diseño

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />

</android.support.design.widget.TextInputLayout>

Nota: Al establecerlo app:errorEnabled="true"como un atributo de TextInputLayout, no cambiará su tamaño una vez que se muestra un error, por lo que básicamente bloquea el espacio.

Código

Para mostrar el error debajo del EditTextsimplemente necesita llamar #setErroral TextInputLayout(NO al niño EditText):

TextInputLayout til = (TextInputLayout) findViewById(R.id.text_input_layout);
til.setError("You need to enter a name");

Resultado

imagen que muestra el texto de edición con el mensaje de error

Para ocultar el error y restablecer el tinte, simplemente llame til.setError(null).


Nota

Para usar el TextInputLayoutdebe agregar lo siguiente a sus build.gradledependencias:

dependencies {
    compile 'com.android.support:design:25.1.0'
}

Establecer un color personalizado

Por defecto, la línea de EditTextserá roja. Si necesita mostrar un color diferente, puede usar el siguiente código tan pronto como llame setError.

editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP);

Para borrarlo, simplemente llame a la clearColorFilterfunción, así:

editText.getBackground().clearColorFilter();

3
Si ! Eso es ! ¿Cómo haces que la línea sea roja?
kmn

3
@kmn Hacer que la línea sea roja no sale de la caja, por lo que debe hacerlo por su cuenta. Mira mi edición. En términos de mover la Pista: Eso es afaik imposible.
reVerse

55
@Alessio Solo he intentado decir que debería funcionar cuando extiendes AppCompatActivity. Sin embargo: a partir de appcompat-v23 ya no es necesario configurar el colorFilter, tan pronto como llame textInputLayout.setError("Error messsage")al color del EditTextdebería volverse rojo. Para restablecerlo, es suficiente llamar textInputLayout.setError(null).
reVerse el

3
editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP);ya no es necesario con la última biblioteca de soporte
Antoine Bolvy el

13
Solo quería señalar, ya que es un detalle tan pequeño: estaba teniendo este problema al llamar a setError en el EditText, no en el TextInputLayout. Vi esta respuesta y aún no podía entender qué necesitaba cambiar. Muy fácil de perder.
h_k

8

Llama en myTextInputLayout.setError()lugar de myEditText.setError().

Estos contenedores y contenedores tienen una doble funcionalidad en la configuración de errores. La funcionalidad que necesita es la del contenedor. Pero podría requerir una versión mínima de 23 para eso.


7

Tu EditTextdebe estar envuelto en unTextInputLayout

<android.support.design.widget.TextInputLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tilEmail">

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/etEmail"
        android:hint="Email"
        android:layout_marginTop="10dp"
        />

</android.support.design.widget.TextInputLayout>

Para obtener un mensaje de error como lo desea, establezca el error en TextInputLayout

TextInputLayout tilEmail = (TextInputLayout) findViewById(R.id.tilEmail);
if (error){
    tilEmail.setError("Invalid email id");    
}

Debe agregar dependencia de biblioteca de soporte de diseño. Agregue esta línea en sus dependencias de gradle

compile 'com.android.support:design:22.2.0'

4

La respuesta de reVerse es excelente, pero no señaló cómo eliminar el tipo de información sobre herramientas de error flotante

Tendrás edittext.setError(null)que eliminar eso.
Además, como alguien señaló, no necesitasTextInputLayout.setErrorEnabled(true)

Diseño

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter something" />
</android.support.design.widget.TextInputLayout>

Código

TextInputLayout til = (TextInputLayout) editText.getParent();
til.setError("Your input is not valid...");
editText.setError(null);

1
TextInputLayout til = (TextInputLayout)editText.getParent();
til.setErrorEnabled(true);
til.setError("some error..");

77
setErrorEnabled no es necesario
JacksOnF1re

0

Si alguien aún enfrenta el error al usar la biblioteca de diseño de Google como se menciona en la respuesta, use esto como lo comentó @h_k, que es:

En lugar de llamar a setError en TextInputLayout , es posible que esté usando setError en EditText .


0
private EditText edt_firstName;
private String firstName;

edt_firstName = findViewById(R.id.edt_firstName);

private void validateData() {
 firstName = edt_firstName.getText().toString().trim();
 if (!firstName.isEmpty(){
//here api call for ....
}else{
if (firstName.isEmpty()) {
                edt_firstName.setError("Please Enter First Name");
                edt_firstName.requestFocus();
            } 
}
}

Al responder una pregunta anterior, su respuesta sería mucho más útil para otros usuarios de StackOverflow si incluyera algún contexto para explicar cómo ayuda su respuesta, particularmente para una pregunta que ya tiene una respuesta aceptada. Ver: ¿Cómo escribo una buena respuesta ?
David Buck
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.