Comment définir la couleur du message d'erreur TextInputLayout?


90

Comment puis-je changer la couleur du message d'erreur qui peut être défini pour apparaître sous le champ de texte dans un TextInputLayout(via setError(...)- voir l'état d'erreur ici )?

Il apparaît normalement sous la forme d'une couleur rouge, que je souhaite modifier. Quels noms / clés d'élément dois-je utiliser dans mon styles.xmlfichier pour cibler la couleur?

Merci d'avance.


Éditer:

app:errorTextAppearanceClé ajoutée à mon 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>

et l'apparence de l'erreur (définie en vert pour le test) :

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

Le résultat est que l'indice ainsi que le message d'erreur sont colorés (captures d'écran de l'émulateur Android mis à l'échelle) :

Régulier (pas d'erreur):

Avant l'image

État d'erreur:

Après l'image

Edit 2 / Résultat:

Lorsque le message d'erreur apparaît, l'indication au-dessus du champ prend la même couleur que le message d'erreur, remplaçant la couleur de l'indication - c'est par conception.



La couleur d'erreur remplace la couleur d'indication dans l'état d'erreur. C'est par conception. Voir google.com/design/spec/components/ ... Vous ne pouvez pas contourner ce problème sans modifier la classe TextInputLayout.
Eugen Pechanec

@EugenPechanec Je ne savais pas que c'était le cas. Merci d'avoir expliqué
Seb Jachec

1
@EugenPechanec Je suis presque sûr que vous vous trompez ici. La partie que vous faites référence provient du compteur de caractères. Pour les champs normaux, les erreurs devraient ressembler à cette image (notez que l'indice n'est pas coloré) material-design.storage.googleapis.com/publish/material_v_4/…
Arkadiusz 'vole' Rzadkowolski

2
@EugenPechanec code.google.com/p/android/issues/detail?id=195775 - c'était en effet une erreur et sera corrigé dans la prochaine version :)
Arkadiusz `` vole '' Rzadkowolski le

Réponses:


140

Créez un style personnalisé qui utilise @android:style/TextAppearancecomme parent dans votre styles.xmlfichier:

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

Et utilisez-le dans votre 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">

exemple d'erreur

Edit: Réglez l'indication sur l'objet, qui est à l' intérieur de votre TextInputLayout ( EditText, TextView, etc.) de tenir des couleurs différentes pour l'indication et l'erreur.


1
Merci. Cela semble simple mais je n'ai pas pu le trouver pour la vie de moi en quelque sorte!
Seb Jachec

2
Mise à jour: est-il possible de simplement changer le style du message d'erreur? Cela semble également changer le style d'indication au-dessus du champ.
Seb Jachec

Vraiment? Pas pour moi, regardez l'image ci-dessus. Êtes-vous sûr d'attribuer le style à app:errorTextAppearance?
dabo248

1
@EugenPechanec simplifié , il ressemble à ceci: <android.support.design.widget.TextInputLayout app:errorTextAppearance="@style/error_appearance"><AutoCompleteTextView android:hint="@string/prompt_email"/></android.support.design.widget.TextInputLayout>. Alors oui, c'est un autre TextView, c'est pourquoi il ne prend pas la couleur d'erreur du TextInputLayout.
dabo248

7
Si vous souhaitez modifier uniquement la couleur, il est préférable de définir le style parentsur parent="TextAppearance.Design.Error". De cette façon, il conserve la taille du texte par défaut et tous les autres attributs, mais vous permet de personnaliser spécifiquement la couleur d'erreur, ce qui était le but de la question à l'étude.
w3bshark

28

En fait, pour changer uniquement la couleur du message d'erreur, vous pouvez définir textColorErrordans votre thème (et également définir colorControlNormalet colorControlActivatedpour le widget général et la couleur du texte de l'indice). TextInputLayoutprend cet attribut. REMARQUE: si vous définissez errorTextAppearanceun style personnalisé, cela textColorErrorn'aura aucun effet.

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

Et dans votre AndroidManifest.xml:

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

    <!-- ... -->

</application>

17
Quelqu'un devrait vraiment écrire un livre sur les thèmes et les styles et tous les attributs possibles. C'est vraiment insensé, vous pouvez définir la couleur et le style de tant de façons, et il n'y a aucun moyen de savoir laquelle est la bonne voie à suivre. Et bien sûr, il n'y a pas de documentation du tout: (Je veux dire qu'il y en a mais c'est vraiment déroutant.
aleksamarkoni

c'est une bien meilleure réponse que la réponse la plus élevée!
philthomas26

6
Pour moi, cette solution a provoqué une erreur ( textColorErrorintrouvable), mais j'ai réussi à définir l' colorErrorattribut dans mon thème. Il semble que chaque version d'Android / Support Library possède ses propres attributs de thème.
Slav

9
Je reçois `` Échec de la liaison des ressources Android '', mais <item name="colorError">@color/error</item>fonctionne bien
m4n3k4s

4
Veuillez mettre à jour le message .. textColorError est maintenant colorError.
Matt Wolfe

7

Une note latérale. J'ai essayé la solution acceptée avec errorTextAppereance. Cela fonctionne vraiment bien mais au début, la couleur de soulignement d'entrée ne changeait pas après l'application d'un nouveau errorTextAppereancestyle. Je vois qu'il y a quelques commentaires et que d'autres personnes vivent le même problème.

Dans mon cas, cela se produisait lorsque je définissais un nouveau style après avoir défini un nouveau texte d'erreur. Comme ça:

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

Après avoir changé l'ordre de ces deux méthodes, le texte et la couleur de soulignement changent comme prévu.

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

Et le style d'apparence du texte d'erreur ressemble à ceci:

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

À quoi ressemble votre R.style.InputError_Purple?
toobsco42

Le style @ toobsco42 définit uniquement la couleur du texte. J'ai modifié la réponse avec la mise en œuvre réelle.
Ivan Marić

Merci! J'utilise cette vue à la fois pour un texte valide et un texte d'erreur (vert et rouge) et la couleur de soulignement ne changeant pas correctement me rendait fou.
rexar5

6

J'avais besoin de le faire de manière dynamique. Utilisation de la réflexion:

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

Vous devrez appeler textInputLayout.setErrorEnabled(true)avant d'appeler la méthode ci-dessus pour que cela fonctionne.


La couleur du texte d'erreur change mais la couleur de soulignement reste toujours Elle change uniquement lors du prochain appel à la même fonction
Mohammad Shabaz Moosa

@ Dr.aNdRO Cela utilise la réflexion, il n'est pas garanti de toujours fonctionner!
ucMedia

3

Avec le TextInputLayoutinclus dans la bibliothèque de composants matériels, utilisez simplement l' app:errorTextColorattribut.

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

Dans un style personnalisé, vous pouvez utiliser:

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

entrez la description de l'image ici


1

MISE À JOUR

Veuillez utiliser une vue personnalisée à la place et non celle-ci


Une version modifiée de la réponse de @ jared qui fonctionne dans mon cas:

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

La couleur du texte d'erreur change mais la couleur de soulignement reste toujours Elle change uniquement lors du prochain appel à la même fonction
Mohammad Shabaz Moosa

2
N'utilisez pas ça. ce n'est pas fiable pour le moment
Dr. aNdRO

0

Si vous utilisez com.google.android.material.textfield.TextInputLayout cette disposition d'entrée, vous ne définissez qu'un seul style

<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

Selon les besoins, on peut changer / définir la couleur du texte TextInputLayout dynamiquement ou directement dans le fichier XML de mise en page. Voici des exemples d'extraits de code

Créez un style personnalisé qui utilise @android: style / TextAppearance comme parent dans votre fichier 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>

Et, utilisez-le dans votre widget TextInputLayout:

  1. Directement dans la mise en page 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. Dynamiquement dans votre classe
your_input_layout.setErrorTextAppearance(R.style.style_error_appearance);

Si vous souhaitez définir une couleur de texte d'erreur unique / identique pour votre application, définissez la couleur du texte dans le thème de votre application.

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

Et dans votre AndroidManifest.xml:

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

    <!-- ... -->

</application>

-2

J'ai regardé dans la source TextInputLayout et j'ai réalisé que la couleur du texte d'erreur était obtenue à partir de colors.xml. Ajoutez simplement ceci à votre colors.xml:

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

Fonctionne pour moi avec la bibliothèque de conception ajoutée.
Java Geek
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.