¿Cómo configurar el color del mensaje de error TextInputLayout?


90

¿Cómo puedo cambiar el color del mensaje de error que se puede configurar para que aparezca debajo del campo de texto en un TextInputLayout(vía setError(...)- ver estado de error aquí )?

Normalmente se muestra como un color rojo, que quiero cambiar. ¿Qué nombres / claves de elementos debo usar en mi styles.xmlarchivo para seleccionar el color?

Gracias por adelantado.


Editar:

Añadida app:errorTextAppearanceclave a mi TextInputLayout:

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:id="@+id/welcome_current_week_container"
        app:errorTextAppearance="@style/WelcomeErrorAppearance">
        <EditText
            ..../>
    </android.support.design.widget.TextInputLayout>
</LinearLayout>

y la apariencia del error (establecido en verde para la prueba) :

<style name="WelcomeErrorAppearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@android:color/holo_green_dark</item>
</style>

El resultado es que tanto la sugerencia como el mensaje de error están coloreados (capturas de pantalla del emulador de Android escalado) :

Regular (sin error):

Antes de la imagen

Estado de error:

Después de la imagen

Editar 2 / Resultado:

Cuando aparece el mensaje de error, la sugerencia sobre el campo cambia al mismo color que el mensaje de error, anulando el color de la sugerencia, esto es por diseño.



El color de error reemplaza el color de sugerencia en estado de error. Esto es por diseño. Consulte google.com/design/spec/components/… No puede solucionar este problema sin modificar la clase TextInputLayout.
Eugen Pechanec

@EugenPechanec No me di cuenta de que este era el caso. Gracias por explicar
Seb Jachec

1
@EugenPechanec Estoy bastante seguro de que estás equivocado aquí. La parte a la que te refieres es del contador de caracteres. Para campos normales, los errores deben verse como en esta imagen (tenga en cuenta que la pista no está coloreada) material-design.storage.googleapis.com/publish/material_v_4/…
Arkadiusz 'vuela' Rzadkowolski

2
@EugenPechanec code.google.com/p/android/issues/detail?id=195775 - de hecho fue un error y se solucionará en la versión futura :)
Arkadiusz 'vuela' Rzadkowolski

Respuestas:


140

Cree un estilo personalizado que se utilice @android:style/TextAppearancecomo padre en su styles.xmlarchivo:

<style name="error_appearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/red_500</item>
    <item name="android:textSize">12sp</item>
</style>

Y utilícelo en su widget TextInputLayout:

 <android.support.design.widget.TextInputLayout
            android:id="@+id/emailInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorTextAppearance="@style/error_appearance">

ejemplo de error

Editar: Establecer la pista sobre el objeto, que está dentro de su TextInputLayout ( EditText, TextView, etc.) para mantener diferentes colores por la pista y el error.


1
Gracias. Parece sencillo, ¡pero no pude encontrarlo por mi vida de alguna manera!
Seb Jachec

2
Actualización: ¿Es posible simplemente cambiar el estilo del mensaje de error? Esto también parece cambiar el estilo de sugerencia sobre el campo.
Seb Jachec

De Verdad? No es para mí, mira la imagen de arriba. ¿Estás seguro de que le estás asignando el estilo app:errorTextAppearance?
dabo248

1
@EugenPechanec simplificado que tiene este aspecto: <android.support.design.widget.TextInputLayout app:errorTextAppearance="@style/error_appearance"><AutoCompleteTextView android:hint="@string/prompt_email"/></android.support.design.widget.TextInputLayout>. Así que sí, es otro TextView, por eso no toma el color de error del TextInputLayout.
dabo248

7
Si solo desea cambiar el color, es mejor que configure el estilo parenten parent="TextAppearance.Design.Error". De esa manera, conserva el tamaño de texto predeterminado y cualquier otro atributo, pero le permite personalizar específicamente el color de error, que era el objetivo de la pregunta en cuestión.
w3bshark

28

En realidad, para cambiar solo el color del mensaje de error, puede establecer textColorErrorsu tema (y también establecer colorControlNormaly colorControlActivatedpara el widget general y el color del texto de la sugerencia). TextInputLayoutrecoge ese atributo. NOTA: si establece errorTextAppearanceun estilo personalizado, textColorErrorno tendrá ningún efecto.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">@color/control_normal</item>
    <item name="colorControlActivated">@color/control_activated</item>
    <item name="textColorError">@color/error</item>
    <!-- other styles... -->
</style>

Y en su AndroidManifest.xml:

<application
    android:theme="@style/AppTheme"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name">

    <!-- ... -->

</application>

17
Alguien debería realmente escribir un libro sobre temas y estilos y todos los atributos posibles. Esto es realmente una locura, puede establecer el color y el estilo de muchas maneras, y no hay forma de saber cuál es la correcta. Y por supuesto no hay documentación en absoluto :( me refiero no hay sino que es realmente confuso.
aleksamarkoni

¡Esta es una respuesta mucho mejor que la de mayor puntuación!
philthomas 26

6
Para mí, esta solución causó un error ( textColorErrorno encontrado), pero logré establecer un colorErroratributo en mi tema. Parece que cada versión de Android / Support Library tiene sus propios atributos de tema.
Eslavo

9
Recibo ' <item name="colorError">@color/error</item>
Error en la

4
Actualice la publicación ... textColorError ahora es colorError.
Matt Wolfe

7

Una nota al margen. He probado la solución aceptada con errorTextAppereance. Funciona muy bien, pero al principio, el color del subrayado de entrada no cambiaba después de aplicar un nuevo errorTextAppereanceestilo. Veo que hay algunos comentarios y que otras personas están experimentando el mismo problema.

En mi caso, esto sucedía cuando estaba configurando un nuevo estilo después de configurar un nuevo texto de error. Me gusta esto:

passwordInputLayout.error = "Password strength"
passwordInputLayout.setErrorTextAppearance(R.style.InputError_Purple)

Después de cambiar el orden de estos dos métodos, el texto y el color del subrayado cambian como se esperaba.

passwordInputLayout.setErrorTextAppearance(R.style.InputError_Purple)
passwordInputLayout.error = "Password strength"

Y el estilo de apariencia del texto de error se parece a esto:

<style name="InputError" parent="TextAppearance.Design.Error"/>
<style name="InputError.Purple">
    <item name="android:textColor">@color/purple</item>
</style>

¿Cómo es tu R.style.InputError_Purple?
toobsco42

El estilo @ toobsco42 solo define el color del texto. Edité la respuesta con la implementación real.
Ivan Marić

¡Gracias! Utilizo esta vista tanto para un texto válido como para un texto de error (verde y rojo) y el color del subrayado que no cambiaba correctamente me estaba volviendo loco.
rexar5

6

Necesitaba hacer esto de forma dinámica. Usando la reflexión:

public static void setErrorTextColor(TextInputLayout textInputLayout, int color) {
  try {
    Field fErrorView = TextInputLayout.class.getDeclaredField("mErrorView");
    fErrorView.setAccessible(true);
    TextView mErrorView = (TextView) fErrorView.get(textInputLayout);
    Field fCurTextColor = TextView.class.getDeclaredField("mCurTextColor");
    fCurTextColor.setAccessible(true);
    fCurTextColor.set(mErrorView, color);
  } catch (Exception e) {
    e.printStackTrace();
  }
}

Deberá llamar textInputLayout.setErrorEnabled(true)antes de invocar el método anterior para que esto funcione.


El color del texto de error cambia, pero el color del subrayado permanece. Cambia solo en la próxima llamada a la misma función
Mohammad Shabaz Moosa

@ Dr.aNdRO Esto usa la reflexión, ¡no se garantiza que funcione siempre!
ucMedia

3

Con lo TextInputLayoutincluido en la Biblioteca de componentes de materiales, simplemente use el app:errorTextColoratributo.

    <com.google.android.material.textfield.TextInputLayout
        app:errorTextColor="@color/...."
        .../>

En un estilo personalizado puedes usar:

<style name="..." parent="Widget.MaterialComponents.TextInputLayout.FilledBox" >
   <item name="errorTextColor">@color/...</item>
   ...
</style>

ingrese la descripción de la imagen aquí


1

ACTUALIZAR

Utilice una vista personalizada en su lugar y no esta


Una versión modificada de la respuesta de @ jared que funciona en mi caso:

public static void setErrorTextColor(TextInputLayout textInputLayout, int color) {
    try {
        Field fErrorView = TextInputLayout.class.getDeclaredField("mErrorView");
        fErrorView.setAccessible(true);
        TextView mErrorView = (TextView)fErrorView.get(textInputLayout);
        mErrorView.setTextColor(color);
        mErrorView.requestLayout();
    } catch (Exception e) {
        e.printStackTrace();
    }
}

El color del texto de error cambia, pero el color del subrayado permanece. Cambia solo en la próxima llamada a la misma función
Mohammad Shabaz Moosa

2
No uses esto. esto no es confiable a partir de ahora
Dr. aNdRO

0

Si está utilizando com.google.android.material.textfield.TextInputLayout este diseño de entrada, simplemente establezca un estilo

<com.google.android.material.textfield.TextInputLayout
                        android:id="@+id/textInputLayoutPassword"
                        style="@style/LoginTextInputLayoutStyle"



<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">@color/text_input_box</item>
        <item name="errorTextColor">@color/colorRed</item>
    </style>

0

Dependiendo de la necesidad, se puede cambiar / establecer el color del texto TextInputLayout de forma dinámica o directamente en el archivo XML de diseño. A continuación se muestran fragmentos de código de muestra

Cree un estilo personalizado que use @android: style / TextAppearance como padre en su archivo styles.xml :

<style name="style_error_appearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/color_error</item>
    <item name="android:textSize">11sp</item>
</style>

Y utilícelo en su widget TextInputLayout:

  1. Directamente en diseño XML
 <android.support.design.widget.TextInputLayout
            android:id="@+id/your_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorTextAppearance="@style/style_error_appearance">
  1. Dinámicamente en tu clase
your_input_layout.setErrorTextAppearance(R.style.style_error_appearance);

Si desea establecer el mismo color de texto de error para su aplicación, defina el color del texto en el tema de su aplicación

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Error text color... -->
    <item name="textColorError">@color/color_error</item>
    <!-- other styles... -->
</style>

Y en su AndroidManifest.xml:

<application
    android:theme="@style/AppTheme"
    android:icon="@drawable/ic_launcher"
    android:label="@string/your_app_name">

    <!-- ... -->

</application>

-2

Miré la fuente de TextInputLayout y me di cuenta de que el color del texto de error se obtiene de colors.xml. Simplemente agregue esto a su colors.xml:

<color name="design_textinput_error_color_light" tools:override="true">your hex color</color>

Funciona para mí con la biblioteca de diseño agregada.
Java Geek
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.