Crie o Android EditText para mostrar a mensagem de erro conforme descrito pelo google


151

Eu preciso de um EditTextque se parece com isso onError:

insira a descrição da imagem aqui

chamar onError se parece com isso:

insira a descrição da imagem aqui

Nota: o aplicativo está sendo executado no SDK 19 (4.4.2)

SDK mínimo é 1

Existe um método semelhante ao setError que faça isso automaticamente ou preciso escrever o código para ele?

Obrigado


1
É improvável que você seja capaz de fazer isso com apenas um EditText. Provavelmente, você precisará de algo que envolva EditTextou acrescente a ele. Consulte github.com/rengwuxian/MaterialEditText .
CommonsWare

Respostas:


330

Não há necessidade de usar uma biblioteca de terceiros, uma vez que o Google introduziu o TextInputLayoutcomo parte do design-support-library.

Seguindo um exemplo básico:

Layout

<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: Ao definir app:errorEnabled="true"como um atributo, TextInputLayoutele não mudará de tamanho quando um erro for exibido - portanto, basicamente bloqueia o espaço.

Código

Para mostrar o erro abaixo, EditTextbasta ligar #setErrorpara o TextInputLayout(NÃO no filho EditText):

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

Resultado

imagem mostrando o texto de edição com a mensagem de erro

Para ocultar o erro e redefinir a tonalidade, basta ligar til.setError(null).


Nota

Para usar o arquivo, TextInputLayoutvocê deve adicionar o seguinte às suas build.gradledependências:

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

Definindo uma cor personalizada

Por padrão, a linha do EditTextserá vermelha. Se você precisar exibir uma cor diferente, poderá usar o código a seguir assim que ligar setError.

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

Para limpá-lo, basta chamar a clearColorFilterfunção, assim:

editText.getBackground().clearColorFilter();

3
Sim ! É isso aí ! Como você faz a linha vermelha?
kmn

3
@kmn Tornar a linha vermelha não sai da caixa, então você precisa fazer isso sozinho. Veja minha edição. Em termos de mudança da dica: isso não é possível.
reverso

5
@Alessio Eu só estou tentando dizer que deve funcionar quando você estiver estendendo o AppCompatActivity. No entanto: no appcompat-v23, não é mais necessário definir o colorFilter, assim que você chamar textInputLayout.setError("Error messsage")a cor do EditTextvermelho. Para redefini-lo, basta ligar textInputLayout.setError(null).
reverso

3
editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP);não é mais necessário com a mais recente biblioteca de suporte
Antoine Bolvy

13
Só queria observar, já que é um detalhe tão pequeno - eu estava tendo esse problema chamando setError no EditText, não no TextInputLayout. Vi essa resposta e ainda não conseguia descobrir o que precisava mudar. Coisa muito fácil de perder.
h_k

8

Ligue em myTextInputLayout.setError()vez de myEditText.setError().

Esses contêineres e contenções têm dupla funcionalidade na configuração de erros. A funcionalidade que você precisa é a do contêiner. Mas você pode exigir a versão mínima de 23 para isso.


7

Seu EditTextdeve ser embrulhado em umTextInputLayout

<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 receber uma mensagem de erro como você deseja, defina o erro como TextInputLayout

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

Você deve adicionar a dependência da biblioteca de suporte ao design. Adicione esta linha em suas dependências gradle

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

4

A resposta do reVerse é ótima, mas não apontou como remover o tipo de dica de ferramenta de erro flutuante

Você precisará edittext.setError(null)remover isso.
Além disso, como alguém apontou, você não precisaTextInputLayout.setErrorEnabled(true)

Layout

<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..");

7
setErrorEnabled não necessário
JacksOnF1re:

0

Se alguém ainda estiver enfrentando o erro ao usar a biblioteca de design do google, conforme mencionado na resposta, use-o como comentado por @h_k, que é -

Em vez de chamar setError em TextInputLayout , você pode estar usando setError no próprio 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();
            } 
}
}

Ao responder uma pergunta antiga, sua resposta seria muito mais útil para outros usuários do StackOverflow se você incluísse algum contexto para explicar como sua resposta ajuda, principalmente para uma pergunta que já tenha uma resposta aceita. Veja: Como escrevo uma boa resposta .
David Buck
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.