Curso Android Aula 08 - EditText Formulário de Login com validação

Introdução

Para quem está acompanhando o Curso On-Line Android do Básico ao Avançado, aprendeu como trabalhar com o Widget TextView nas duas aulas passada, aula 06 e aula 07, respectivamente.  Caso você esteja pela primeira vez neste curso, sugiro que assista as aulas anteriores.

Nesta aula irei abordar como trabalhar com o Widget EditText. Será com este componente que iremos capturar dados digitados pelos usuários nos formulários das aplicações Android.

Nesta aula também estarei usando e comentando o componente Button que será adicionado ao Layout da Tela, e na programação irei utilizar a Classe Toast para apresentar as mensagens ao usuário. Como não é o foco da aula, não entrarei em muitos detalhes, já que teremos aulas específicas para estudar e aprofundamento destes assuntos.

Objetivo

O objetivo desta aula é ensinar você como trabalhar corretamente com o componente EditText. Ao final desta aula você será capaz de criar formulários para entrada de dados em suas aplicações Android. Será capaz também de combinar em um mesmo formulário o componentes TextView e o EditText, o que vai lhe permitir criar a maioria dos formulários utilizados nas aplicações em geral.

Nesta aula, também estaremos aplicando conhecimentos vistos em aulas anteriores, tais como criação de projetos, customização de Layouts, etc.

Video demonstrativo da aplicação rodando no emulador

Criação do Projeto no Android Studio

Para esta aula,  iremos criar para esta aula um formulário padrão para Blank Activity.

Quando você criar o seu projeto no Android Studio, dê como nome para o Novo Projeto o nome CursoAndroidAula08. 

Protótipo da Tela de Login para esta aula

A tela de Login que iremos criar para estudar como trabalhar com o Widget EditText está apresentada abaixo:

Especificações da Tela

Está tela tem por objetivo receber o Login e a Senha do usuário, sendo que ao clicar no Botão Acessar, será feito uma validação testando se algo foi realmente digitado. Caso nenhuma informação tenha sido fornecida pelo usuário, uma mensagem será apresentada informando que os campos são obrigatórios. Caso os dados tenham sido informados, uma mensagem de boas vidas será apresentada para o usuário.

Widget EditText

Quando queremos capturar dados que serão digitados pelo usuário nas telas dos aplicativos, uma das opções é o componente EditText. É possível especificar que tipo de dado será capturado, facilitando assim a experiência de digitação por parte do usuário.

Por exemplo, se o formulário pedir um número de telefone. Veja na tela abaixo alguns exemplos disponiveis:

Na prática quando a propriedade inputType é especificada para o EditText, a aplicação selecionará em tempo de execução a melhor configuração de teclado para receber os dados digitados pelo usuário.

Veja alguns exemplos comentados:

EditText setado para capturar datas

EditText setado para capturar endereço de e-mail

EditText setado para captura valores com casas decimais

EditText setado para capturar senhas

Customizando o Layout padrão da Activity

Esta tela é bem simples de ser criada, mas para quem não está familiarizado com o Android Studio, é comum não conseguir chegar a este resultado nas primeiras tentativas. Minha dica é primeiro apenas adicionar os componentes desejados no formulário, na ordem em que vão aparecendo. Por último, teremos que customizar algumas propriedade de cada componente.

Tudo será explicado no decorrer da aula e também no video desta aula disponível no Canal YouTube do curso.

A primeira ação a fazer é localizar e  editar o arquivo de layout activity_main.xml e adicionar cinco campos.

• Um campo TextView para o Login
• Um campo EditText logo abaixo do Login para receber o login do usuário
• Um campo TextView para a Senha
• Um campo EditText logo abaixo da Senha para receber a senha do usuário
• Um botão Button logo abaixo do EditText senha.

Para incluir os componentes TextView, localize o conjunto Widgets destacado na imagem abaixo, clique e arraste-o para a posição desejada na tela.

Para incluir os componentes EditText, localize o conjunto Text Fields destacado na imagem abaixo. Neste exemplo estamos utilizando dois tipos de EditText, um para o Login e outro para a Senha.

• Selecione o Text Fields Person Name para o Login e arraste-o posicionando logo abaixo do TextView Login.
• Seleciona o Text Fields Password para a senha e arraste-o posicionando logo abaixo do TextView Senha.

PS: Na video aula desta aula, irei demonstrar como realizar estes passos.

O último passo será adicionar o Widget Button logo abaixo do EditText para a senha. Basta selecionar e posicionar conforme o exemplo abaixo.

Configurando as propriedades dos componentes da Tela

Será necessário ajustar algumas das propriedades dos Widget TextView e EditText da tela. Faça os ajustes conforme detalhado abaixo, editando o arquivo de layout XML. 

Estarei destacando as alterações para os IDs dos componentes, mas em todos os prints de tela, você poderá visualizar propriedade por propriedade de cada componente e mude conforme o caso.

No primeiro TextView atribua para a propriedade android:id o valor @+id/labelTitulo.

O próximo TextView é o que irá apresentar a mensagem Login na tela, atribua para a propriedade android:id o valor @+id/labelNome. Em seguida, atribua para a propriedade android:layout_below o valor @+id/labelTitulo. Note que estamos informando que o Login deve ser positionado logo abaixo do labelTitulo.

Agora vamos configurar o EditText. atribua para a propriedade android:id o valor @+id/editLogin. Em seguida, atribua para a propriedade android:layout_below o valor @+id/labelNome. Note que estamos informando que o EditText Login deve ser positionado logo abaixo do labelNome.

Vamos ajustar agora o TextView para apresentar a mensagem Senha. Atribua para a propriedade android:id o valor @+id/labelSenha. Em seguida, atribua para a propriedade android:layout_below o valor @+id/editLogin. Note que estamos informando que o TextView Senha deve ser positionado logo abaixo do editLogin.

O mesmo procedimento deve ser feito para o EditText Senha. Atribua para a propriedade android:id o valor @+id/editSenha. Em seguida, atribua para a propriedade android:layout_below o valor @+id/labelSenha. Note que estamos informando que o TextView Senha deve ser positionado logo abaixo do labelSenha.

O último componente a ser customizado é o Button. Atribua para a propriedade android:id o valor @+id/btnAcessar. Em seguida, atribua para a propriedade android:layout_below o valor @+id/editSenha. Note que estamos informando que o Button Acesar deve ser positionado logo abaixo do editLogin.

Propriedade android:layout_width

Note que para os componentes EditText e Button, a propriedade android:layout_width foi alterada para fill_parent, esta modificação fará com que o componente utilize todo o espaço horizontal disponível na tela do celular ou tablet.

Programação da Tela

Agora que estamos com o layout pronto, vamos partir para a programação da tela conforme as regras de negócios especificadas no início da aula.

A primeira tarefa a ser realizada de programação é criar os objetos necessários para trabalhar com os componentes EditText e Button.

Edit a classe MainAcitivity e adicione as três linhas de código java conforme modelo abaixo. Tome cuidado ao adicionar este código, será necessário importas as classes EditText e Button.

Agora dentro do método onCreate() vamos vincular os objetos editLogin, editSenha e btnAcessar aos seus respectivos ID definidos no Layout da tela.

Neste momento a aplicação compila sem erros, é bom você efetuar um teste de compilação. Caso encontre algum erro, verifique se tudo está correto com o arquivo de Layout e se todos os importes foram feitos.

Vamos programar o botão btnAcessar. Neste momento iremos verificar se os dados foram digitados pelo usuário e iremos apresentar uma mensagem de erro informando que os campos são obrigatórios. É possível testar Edit por Edit para informar exatamente qual dos dois campos está em branco. No nosso caso, irei fazer um teste apenas para os dois campos EditText. Fica a dica para você aprimorar o código exemplo desta aula.

O código acima deve ser adicionado logo abaixo do btnAcessar dentro do método onCreate(). Vamos comentar o que foi feito neste código.

o método setOnClickListener() basicamente ficará esperando uma ação do usuário até que o mesmo clique no botão. A regra de negócio para tratar o que deve ser feito ao clicar está programada no método onClick().

Neste exemplo, estamos testando com a estrutura if else se o tamanho campos editLogin e editSenha são iguais a zero. Caso afirmativo estamos assumindo que nada foi informado e apresentamos uma mensagem de que os campos são obrigatórios, caso contrário, assumimos que algo foi digitado e apresentamos uma mensagem de boas vindas.

Digitação dos dados na tela.

Mensagem de boas vindas caso algo tenha sido digitado.

Mensagem de erro informando que os campos são obrigatórios.

Os dados digitados são apagados programaticamente via setText().

Para apresentar as mensagens, usamos neste exemplo a classe Toast.

Teste sua aplicação

Para testar a aplicação criada nesta aula, você tem duas opções. A primeira é criar um dispositivo virtual AVD ou conectar um smartphone ou  tablet via porta USB ao seu computador.

Para publicar o APK basta rodar a aplicação e selecionar o dispositivo real ou virtual desejado.

Run 'app' compila e roda o aplicativo.

No meu caso, rodo diretamente em um Moto X.

Conclusão

Nesta aula nós aprendemos como trabalhar com o Widget EditText e criamos como exemplo um formulário de Login com validação. Também aplicamos os conceitos vistos em aulas anteriores do curso, como a criação de projetos no Android Studio, manipulação das propriedades de layout, etc. Foi visto também como trabalhar com o componente Button, capturar o clique do usuário e implementar uma simples regra de validação. Por último nesta aula, apresentamos uma mensagem simples para o usuário utilizando a Classe Toast.