Como definir a cor da mensagem de erro TextInputLayout?


90

Como posso alterar a cor da mensagem de erro que pode ser definida para aparecer abaixo do campo de texto em um TextInputLayout(via setError(...)- veja o estado de erro aqui )?

Normalmente aparece como uma cor vermelha, que desejo alterar. Quais nomes / chaves de item devo usar em meu styles.xmlarquivo para direcionar a cor?

Desde já, obrigado.


Editar:

Adicionada app:errorTextAppearancechave ao meu 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 a aparência do erro (definido como verde para teste) :

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

O resultado é que a dica, bem como a mensagem de erro, são coloridas (capturas de tela do emulador Android em escala) :

Regular (sem erro):

Antes da Imagem

Estado de erro:

Depois da imagem

Editar 2 / Resultado:

Quando a mensagem de erro aparece, a dica acima do campo muda para a mesma cor da mensagem de erro, substituindo a cor da dica - isso ocorre por design.



A cor do erro substitui a cor da dica no estado de erro. Isso ocorre por design. Consulte google.com/design/spec/components/… Você não pode contornar isso sem alterar a classe TextInputLayout.
Eugen Pechanec de

@EugenPechanec Não sabia que era esse o caso. Obrigado por explicar
Seb Jachec

1
@EugenPechanec Tenho certeza que você está errado aqui. A parte que você está se referindo é do contador de caracteres. Para campos normais, os erros devem ser semelhantes a esta imagem (observe que a dica não está colorida) material-design.storage.googleapis.com/publish/material_v_4/…
Arkadiusz 'voa' Rzadkowolski

2
@EugenPechanec code.google.com/p/android/issues/detail?id=195775 - era realmente um erro e será corrigido na versão futura :)
Arkadiusz 'voa' Rzadkowolski

Respostas:


140

Crie um estilo personalizado que use @android:style/TextAppearancecomo principal em seu styles.xmlarquivo:

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

E use-o em seu 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">

exemplo de erro

Edit: Defina a dica sobre o objeto, o que está dentro de seu TextInputLayout ( EditText, TextView, etc.) para manter cores diferentes para a dica e o erro.


1
Obrigado. Parece simples, mas de alguma forma não consegui encontrar nada!
Seb Jachec

2
Atualização: É possível alterar apenas o estilo da mensagem de erro? Isso também parece alterar o estilo da dica acima do campo.
Seb Jachec

Realmente? Não para mim, olhe a foto acima. Tem certeza de que está atribuindo o estilo a app:errorTextAppearance?
dabo248 de

1
@EugenPechanec simplificado parece que isso: <android.support.design.widget.TextInputLayout app:errorTextAppearance="@style/error_appearance"><AutoCompleteTextView android:hint="@string/prompt_email"/></android.support.design.widget.TextInputLayout>. Então, sim, é outro TextView, é por isso que ele não pega a cor de erro do TextInputLayout.
dabo248

7
Se você quiser alterar apenas a cor, é melhor definir o estilo parentcomo parent="TextAppearance.Design.Error". Dessa forma, ele retém o tamanho do texto padrão e quaisquer outros atributos, mas permite que você personalize especificamente a cor do erro, que era o objetivo da questão em questão.
w3bshark

28

Na verdade, para alterar apenas a cor da mensagem de erro, você pode definir textColorErrorem seu tema (e também definir colorControlNormale colorControlActivatedpara o widget geral e cor de texto de dica). TextInputLayoutpega esse atributo. NOTA: se você definir errorTextAppearanceum estilo personalizado, textColorErrornão terá efeito.

<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 em seu AndroidManifest.xml:

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

    <!-- ... -->

</application>

17
Alguém realmente deveria escrever um livro sobre temas e estilos e todos os atributos possíveis. Isso é realmente insano, você pode definir cores e estilos de várias maneiras, e não há como saber qual é a maneira certa de seguir. E, claro, não há documentação alguma :( Quer dizer, há, mas é muito confuso.
aleksamarkoni

esta é uma resposta muito melhor do que a de maior pontuação!
philthomas26

6
Para mim essa solução gerou um erro ( textColorErrornão encontrado), mas consegui definir colorErroratributo no meu tema. Parece que cada versão da Biblioteca de suporte / Android tem seus próprios atributos de tema.
Eslavo

9
Estou recebendo 'Falha na vinculação de recursos do Android', mas <item name="colorError">@color/error</item>funciona bem
m4n3k4s

4
Atualize a postagem .. textColorError agora é colorError.
Matt Wolfe

7

Uma nota lateral. Eu tentei a solução aceita com um errorTextAppereance. Funciona muito bem, mas no início, a cor do sublinhado de entrada não mudou após a aplicação de um novo errorTextAppereanceestilo. Vejo que há alguns comentários e que outras pessoas estão enfrentando o mesmo problema.

No meu caso, isso estava acontecendo quando eu estava definindo um novo estilo após definir um novo texto de erro. Como isso:

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

Depois de trocar a ordem desses dois métodos, o texto e a cor do sublinhado mudam conforme o esperado.

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

E o estilo de aparência do texto de erro é mais ou menos assim:

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

Qual é a aparência do seu R.style.InputError_Purple?
toobsco42 de

O estilo @ toobsco42 define apenas a cor do texto. Editei a resposta com a implementação real.
Ivan Marić

Obrigado! Eu uso esta visão para um texto válido e um texto de erro (verde e vermelho) e a cor do sublinhado não mudar corretamente estava me deixando louco.
rexar5

6

Eu precisava fazer isso dinamicamente. Usando reflexão:

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

Você precisará chamar textInputLayout.setErrorEnabled(true)antes de invocar o método acima para que isso funcione.


A cor do texto de erro muda, mas a cor de sublinhado ainda permanece. Ela muda apenas na próxima chamada para a mesma função
Mohammad Shabaz Moosa

@ Dr.aNdRO Isso usa reflexão, não é garantido que funcione sempre!
ucMedia de

3

Com o TextInputLayoutincluído na Biblioteca de Componentes de Materiais, basta usar o app:errorTextColoratributo.

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

Em um estilo personalizado, você pode usar:

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

insira a descrição da imagem aqui


1

ATUALIZAR

Em vez disso, use uma visualização personalizada e não esta


Uma versão modificada da resposta de @jared que funciona no meu 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();
    }
}

A cor do texto de erro muda, mas a cor de sublinhado ainda permanece. Ela muda apenas na próxima chamada para a mesma função
Mohammad Shabaz Moosa

2
Não use isso. isso não é confiável no momento
Dr. aNdRO

0

Se você estiver usando com.google.android.material.textfield.TextInputLayout este layout de entrada, basta definir um 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

Dependendo da necessidade, é possível alterar / definir a cor do texto TextInputLayout dinamicamente ou diretamente no arquivo XML de layout. Abaixo está um exemplo de snippets de código

Crie um estilo personalizado que use @android: style / TextAppearance como pai em seu arquivo 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 use-o em seu widget TextInputLayout:

  1. Diretamente no 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 em sua classe
your_input_layout.setErrorTextAppearance(R.style.style_error_appearance);

Se você deseja definir uma única / mesma cor de texto de erro para seu aplicativo, defina a cor do texto no tema do aplicativo

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

E em seu AndroidManifest.xml:

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

    <!-- ... -->

</application>

-2

Eu olhei para a fonte TextInputLayout e percebi que a cor do texto de erro é obtida de colors.xml. Basta adicionar ao seu colors.xml:

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

Funciona para mim com a biblioteca de design adicionada.
Java Geek
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.