Come impostare il colore del messaggio di errore di TextInputLayout?


93

Come posso cambiare il colore del messaggio di errore che può essere impostato in modo che appaia sotto il campo di testo in a TextInputLayout(tramite setError(...)- vedi lo stato di errore qui )?

Normalmente si presenta come un colore rosso, che voglio cambiare. Quali nomi / chiavi degli elementi dovrei usare nel mio styles.xmlfile per scegliere il colore?

Grazie in anticipo.


Modificare:

app:errorTextAppearanceChiave aggiunta al mio 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>

e l'aspetto dell'errore (impostato su verde per il test) :

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

Il risultato è che il suggerimento e il messaggio di errore sono colorati (screenshot dall'emulatore Android in scala) :

Regular (nessun errore):

Prima dell'immagine

Stato di errore:

Dopo l'immagine

Modifica 2 / Risultato:

Quando viene visualizzato il messaggio di errore, il suggerimento sopra il campo assume lo stesso colore del messaggio di errore, sovrascrivendo il colore del suggerimento: questo è di progettazione.



Il colore dell'errore sostituisce il colore del suggerimento nello stato di errore. Questo è in base alla progettazione. Vedi google.com/design/spec/components/… Non puoi aggirare questo problema senza alterare la classe TextInputLayout.
Eugen Pechanec

@EugenPechanec Non mi ero reso conto che fosse così. Grazie per aver spiegato
Seb Jachec

1
@EugenPechanec Sono abbastanza sicuro che ti sbagli qui. La parte a cui ti riferisci proviene dal contatore dei caratteri. Per i campi normali, gli errori dovrebbero apparire come su questa immagine (notare che il suggerimento non è colorato) material-design.storage.googleapis.com/publish/material_v_4/…
Arkadiusz "vola" Rzadkowolski

2
@EugenPechanec code.google.com/p/android/issues/detail?id=195775 - era davvero un errore e verrà risolto nella versione futura :)
Arkadiusz "vola" Rzadkowolski

Risposte:


143

Crea uno stile personalizzato che utilizza @android:style/TextAppearancecome genitore nel tuo styles.xmlfile:

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

E usalo nel tuo 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">

esempio di errore

Edit: Impostare il suggerimento per l'oggetto, che è all'interno del vostro TextInputLayout ( EditText, TextView, etc.) per contenere diversi colori per il suggerimento e l'errore.


1
Grazie. Sembra semplice ma in qualche modo non sono riuscito a trovarlo per la vita di me!
Seb Jachec

2
Aggiornamento: è possibile modificare solo lo stile del messaggio di errore? Questo sembra cambiare anche lo stile dei suggerimenti sopra il campo.
Seb Jachec

Veramente? Non per me, guarda l'immagine sopra. Sei sicuro di assegnare lo stile a app:errorTextAppearance?
dabo248

1
@EugenPechanec semplificato sembra che questo: <android.support.design.widget.TextInputLayout app:errorTextAppearance="@style/error_appearance"><AutoCompleteTextView android:hint="@string/prompt_email"/></android.support.design.widget.TextInputLayout>. Quindi sì, è un altro TextView, ecco perché non prende il colore dell'errore da TextInputLayout.
dabo248

7
Se vuoi cambiare solo il colore, è meglio impostare lo stile parentsu parent="TextAppearance.Design.Error". In questo modo, mantiene la dimensione del testo predefinita e qualsiasi altro attributo, ma consente di personalizzare in modo specifico il colore dell'errore, che era l'obiettivo della domanda in questione.
w3bshark

28

In realtà, per cambiare solo il colore del messaggio di errore, puoi impostare textColorErrornel tuo tema (e anche impostare colorControlNormale colorControlActivatedper il widget generale e il colore del testo dei suggerimenti). TextInputLayoutraccoglie quell'attributo. NOTA: se si imposta errorTextAppearanceuno stile personalizzato, textColorErrornon avrà alcun effetto.

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

E nel tuo AndroidManifest.xml:

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

    <!-- ... -->

</application>

17
Qualcuno dovrebbe davvero scrivere un libro su temi, stili e tutti i possibili attributi. Questo è davvero folle, puoi impostare il colore e lo stile in tanti modi, e non c'è modo di sapere quale sia la strada giusta da percorrere. E ovviamente non c'è alcuna documentazione :( voglio dire che c'è ma è davvero confuso.
aleksamarkoni

questa è una risposta molto migliore di quella con il punteggio più alto!
philthomas26

6
Per me, questa soluzione ha causato un errore ( textColorErrornon trovato), ma sono riuscito a impostare l' colorErrorattributo nel mio tema. Sembra che ogni versione di Android / Libreria di supporto abbia i propri attributi del tema.
Slav

10
Ricevo il messaggio di <item name="colorError">@color/error</item>
errore "Collegamento

4
Si prega di aggiornare il post .. textColorError è ora colorError.
Matt Wolfe

7

Una nota a margine. Ho provato la soluzione accettata con errorTextAppereance. Funziona molto bene, ma all'inizio il colore della sottolineatura in ingresso non cambiava dopo aver applicato un nuovo coloreerrorTextAppereance stile. Vedo che ci sono alcuni commenti e che altre persone stanno riscontrando lo stesso problema.

Nel mio caso, questo accadeva quando stavo impostando un nuovo stile dopo aver impostato un nuovo testo di errore. Come questo:

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

Dopo aver cambiato l'ordine di questi due metodi, il testo e il colore della sottolineatura cambiano come previsto.

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

E lo stile di aspetto del testo di errore è simile a questo:

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

Che aspetto ha il tuo R.style.InputError_Purple?
toobsco42

Lo stile @ toobsco42 definisce solo il colore del testo. Ho modificato la risposta con l'implementazione effettiva.
Ivan Marić

Grazie! Uso questa visualizzazione sia per un testo valido che per un testo di errore (verde e rosso) e il colore della sottolineatura che non cambiava correttamente mi stava facendo impazzire.
rexar5

6

Avevo bisogno di farlo dinamicamente. Utilizzando la riflessione:

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

Sarà necessario chiamare textInputLayout.setErrorEnabled(true)prima di invocare il metodo sopra affinché funzioni.


Il colore del testo dell'errore cambia ma il colore della sottolineatura rimane ancora. Cambia solo alla chiamata successiva alla stessa funzione
Mohammad Shabaz Moosa

@ Dr.aNdRO Questo utilizza la riflessione, non è garantito che funzioni sempre!
ucMedia

3

Con l' TextInputLayoutinclusione nella libreria dei componenti dei materiali, usa semplicemente l' app:errorTextColorattributo.

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

In uno stile personalizzato puoi usare:

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

inserisci qui la descrizione dell'immagine


1

AGGIORNARE

Utilizza invece una visualizzazione personalizzata e non questa


Una versione modificata della risposta di @ jared che funziona nel mio 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();
    }
}

Il colore del testo dell'errore cambia ma il colore della sottolineatura rimane ancora. Cambia solo alla chiamata successiva alla stessa funzione
Mohammad Shabaz Moosa

2
Non usare questo. questo non è affidabile al momento
Dr. aNdRO

0

Se stai utilizzando com.google.android.material.textfield.TextInputLayout questo layout di input di quanto hai impostato uno stile

<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

A seconda delle necessità, è possibile modificare / impostare il colore del testo di TextInputLayout dinamicamente o direttamente nel file XML di layout. Di seguito sono riportati frammenti di codice di esempio

Crea uno stile personalizzato che utilizzi @android: style / TextAppearance come genitore nel tuo file 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>

E usalo nel tuo widget TextInputLayout:

  1. Direttamente nel layout 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. Dinamicamente nella tua classe
your_input_layout.setErrorTextAppearance(R.style.style_error_appearance);

Se desideri impostare il colore del testo di errore singolo / stesso per la tua applicazione, definisci il colore del testo nel tema dell'app

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

E nel tuo AndroidManifest.xml:

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

    <!-- ... -->

</application>

-2

Ho esaminato la fonte TextInputLayout e mi sono reso conto che il colore del testo di errore è ottenuto da colors.xml. Basta aggiungerlo al tuo colors.xml:

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

Funziona per me con la libreria di design aggiunta.
Java Geek
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.