Primeiras aulas do curso Android Brasil: implemente validações e formatações em formulários

Android Brasil: implemente validações e formatações em formulários

Criando formulário - Introdução

Oi, pessoal, beleza? Sou o Alex Felipe, instrutor da Alura e vou apresentar para vocês o curso de Android Brasil. Mas o que a gente vai ver nesse curso? Basicamente, nosso foco é implementar esse formulário que a gente está vendo para uma aplicação conhecida como Alura Food, que faz entrega de comida. Só que diferentemente de qualquer tipo de formulário que a gente vai implementar teremos restrições para se preocupar, como por exemplo componentes visuais.

Em seguida, perceba que vamos trabalhar também com o conceito de validação. Ou seja, se o campo não for preenchido a gente vai ter que tomar algum tipo de atitude e mostrar o erro de validação, como é o caso do nome, ele é obrigatório. A gente preenche nosso campo, sai, ele some. A gente vai aprender a lidar com esse tipo de evento conhecido como evento de foco.

Em seguida, perceba que também nosso campo de CPF teve o mesmo comportamento. A gente vai conseguir colocar esses comportamentos para mais de campo, vamos ver técnicas viáveis para fazer esse tipo de implementação. Além disso, para o CPF específico, teremos outros tipos de validações, como o número de dígitos.

A gente vai aprender todas essas regras que a gente tem no Brasil, de documentos, telefone, e vamos aplicar tudo nesse formulário, como é o caso de colocar um CPF com 11 dígitos, mas que é inválido. Vamos ver como colocar, por exemplo, um CPF válido, e ele valida para a gente.

Olha que legal, ele já formata. A gente vai aprender essa técnica bem bacana. Como fazemos isso. Vamos ver diversas técnicas, vamos trabalhar bastante com refatoração, e não fica por aqui. Vamos pegar o telefone, preencher o telefone, indicar o número de dígitos, da mesma maneira que quando entramos novamente ele tira o formato para preencher.

Vamos aprender muita coisa, vamos ver técnicas de validação, seja por técnicas de maneiras procedurais como usando bibliotecas, como o caso do CPF. Como o telefone, com expressão regular, que é outra técnica bem bacana. E na parte de e-mail vamos usar expressão regular para nos ajudar.

Por exemplo, na hora do e-mail, se faltar algo ele diz que é um e-mail inválido. Vamos ver como validar um e-mail. Por fim, vamos ver durante o momento que colocamos a senha, que temos a capacidade de colocar o ícone que mostra e esconde o campo. Vamos aprender a colocar esse campo bem comum em formulários.

Por fim, vamos colocar o comportamento para o botão cadastrar, que durante o processo de validação, se tudo estiver certo, ele vai apresentar a mensagem cadastro realizado com sucesso. Mas se por exemplo não preenchermos nenhum campo ou qualquer tipo de validação não acontecer, ele vai apresentar um campo obrigatório, uma mensagem, não vai indicar cadastro realizado.

Veja que todo esse fluxo que a gente tem durante esse formulário a gente vai trabalhar durante este curso. Perceba que não é tão trivial quanto só implementar o formulário, tem bastante coisa que a gente vai aprender aqui.

Existem alguns pré-requisitos que vou pedir para vocês. O primeiro é fazer os três primeiros cursos de Android, para terem base e não terem dúvidas em relação às implementações que vou fazer aqui. Além disso, também vou exigir que tenha pelo menos a introdução do curso de constraint layout, pelo menos os passos básicos de como implementar um layout por meio dele, porque é dessa maneira que estamos implementando layouts no Android, é uma nova técnica para complementar layouts.

Espero que você esteja animado com toda a proposta do curso, espero que tenha gostado, e vamos começar o projeto.

Criando formulário - Criando o projeto

Nosso primeiro passo é abrir o Android studio, para isso vou no menu iniciar e digitar Android studio. Ele vai começar a carregar a tela inicial dele, que vai fazendo antes de apresentar a tela inicial. Vamos dar uma olhada na versão que estamos utilizando. É a versão 3.1.2 e é ela que vamos utilizar no decorrer do curso. Ou seja, recomendo que você utilize a mesma versão caso tenha uma versão anterior, ou baixe a mais recente, que provavelmente não vai ter tantas mudanças comparada a essa.

Agora que a gente viu o ambiente que a gente vai usar aqui, a versão do Android studio, vamos começar criando o projeto. Para criar o projeto, a gente vem na opção start a new Android studio project. Vou clicar aqui e ele vai abrir o wizard para a gente preencher as informações do projeto.

Por padrão começa com o my application, mas como a gente sabe a gente tem que colocar o nome do nosso projeto. Para este curso, vamos desenvolver o Alura Food. Um projeto para uma app que vai fazer entregas de comida. Não vamos explorar esses documentos no momento de setup, mas mais para frente a gente vai olhar com mais detalhes o que temos de proposta de implementação.

Voltando para o Android studio, vamos preencher as informações. Como vimos, vai se chamar Alura Food. Temos a company, que é o domínio que a gente vai ter, que é o Alura.com.br. Temos o local do projeto, que eu vou deixar como está, e aqui ele está indicando qual vai ser o pacote criado. Dou um next, já que não vou dar suporte a essas linguagens.

E aqui ele está indicando qual vai ser o sdk mínimo. Nesse caso, vou manter a sugestão dele, que é da API 15, que diz que atende 100% dos dispositivos que estão dentro da play store. Vou dar next.

Ele sugere para criar uma activity para inicializar o projeto e ter uma tela para executar. Como estamos fazendo a parte de setup, vamos aproveitar e pedir para ele criar a activity durante a criação do projeto, dessa maneira a gente testa também se está funcionando com a tela, bonitinho.

Vou escolher a empty activity, que é a que não tem layout pronto para a gente, e depois que a gente clicar em next ele vai indicar o que ele espera de informação da activity. O nome, se vai gerar arquivo de layout. Vamos fazer com que ele gere tudo isso para a gente. E depois quando precisarmos modificar com as informações que a gente espera a gente modifica.

Novamente, esse processo é para a gente fazer o setup do projeto e ver se tudo funciona de acordo. Vamos lá. Vou deixar com essas informações, para gerar o arquivo xml, vamos ver se vai sair o nome dele. Vou dar um finish e agora é questão de aguardar o Android studio finalizar o processo.

Ao finalizar o processo o Android studio já apresentou uma tela para a gente com o arquivo de código Java da activity e o arquivo xml. Cliquei nessa parte, ele deu um load lento, porque carregou alguma coisa, mas também apresenta para a gente o que ele criou. Perceba que fez aquela tela inicial, vazia, só com o Hello world, para ter um conteúdo.

Agora que a gente fez essa configuração dessa tela, vamos executar a app. A gente vem na opção do play, ele vai começar a procurar um dispositivo disponível. Eu já tinha criado um. Você pode também criar para manter o mesmo aspecto visual, ou você pode utilizar outro emulador que você preferir, ou mesmo seu celular.

Vou selecionar o simulador que já criei, dar um ok, e agora vamos aguardar o Android studio subir o emulador para a gente. Assim que finalizar a gente dá uma olhada se está tudo funcionando de acordo.

O Android studio finalizou a execução da app e apareceu a tela inicial para a gente. Vou até aumentar um pouco para ver com mais clareza. Esse processo do setup a gente conseguiu fazer sem problemas. À seguir a gente vai dar continuidade naquela proposta que a gente viu aqui, do Alura food.

Criando formulário - Adicionando TextInputLayout no layout

Agora a gente vai dar continuidade na implementação da Alura Food, que é um app para entregar comida. Vamos explorar um pouco desse documento e o que precisamos implementar a seguir?

Indo para a próxima tela, perceba que temos que implementar essa tela de cadastro, que é justamente um formulário que vai receber informações pessoais dos usuários. Aqui nosso cliente até deu um exemplo do que ele espera de informação, que é o nome completo, CPF, telefone com ddd, e-mail e senha. E aqui tem o resultado que ele espera quando implementar a tela.

Claro, além do visual ele espera um comportamento diferente do que vimos anteriormente, e vamos ver qual é ele. Quando o usuário tocar em um desses e digitar, como por exemplo o nome completo, ele espera que o label fique flutuando nessa parte de cima, é o comportamento que ele espera. Ele até fala que no momento em que colocar um texto ainda vai ser mantido o nome completo e o conteúdo. É dessa maneira que o input, a entrada, se mantem.

Como a gente pode fazer isso, colocar esse tipo de campo no nosso formulário? É justamente o que vamos aprender a fazer agora. Vamos lá. Voltando no Android Studio, a gente vai começar a implementar aquela tela de cadastro. O primeiro passo é criar uma atividade destinada para aquele formulário, portanto, vamos no nosso projeto, no pacote do Java, a gente vai criar uma nova activity. Para isso damos o insert e o activity. Vamos pegar uma vazia.

A gente vai criar aqui uma nova activity. Ele está até sugerindo uma main 2, porque tínhamos a anterior que foi usada para fazer o setup. A gente não vai utilizar ela e por isso vamos criar uma nova, que vai ter o nome desejado que a gente espera, vamos colocar o xml esperado e o pacote. Depois a gente descarta a que criamos anteriormente.

Aqui vamos colocar a activity que vai representar o formulário de cadastro, logo vai ser formulário cadastro activity. Vamos pedir para ele gerar o arquivo xml, vai ser esse padrão que ele está sugerindo, e vai ser nossa launcher, ele já está marcando para ter a extensão do app que a gente vai ter, e vamos deixar um pacote específico para activities, não no pacote raiz.

Então vai ser activity. A gente está criando nosso pacote. A linguagem vai ser em Java. Vou dar um finish e vamos esperar o Android studio finalizar o processo. Perceba que ele começa a fazer aquelas tarefas rodando. E finalizou.

Vou minimizar essa parte da task. Perceba que ele não achou a classe R porque espera que esteja no pacote raiz da activity, a gente precisa fazer o import. Ele já foi lá e fez para a gente.

Como eu falei, a gente não vai fazer uso dessa main activity, por isso vou remover. Ele fala que está tendo uso dela, a gente pode deletar sem problema, vamos remover os outros passos também que estão fazendo uso dela. Agora precisamos remover o layout que foi criado para ela e no manifest precisamos também tirar a activity caso ela esteja aqui. Aparentemente não está. Quem está como launcher é o formulário cadastro, então consegui remover sem problemas.

Temos nosso formulário, nosso arquivo xml, e agora podemos começar a ver como vamos implementar aquele componente visual que a gente viu. Quando criamos uma activity novamente vem com o constraint layout, ou seja, como pré-requisito desse curso já até comentei que espero que você saiba sobre constraint layout, temos um curso específico para isso, como implementar layouts a partir dele. Espero que você saiba sobre esse conteúdo, que é o que vamos explorar bastante durante o curso.

Voltando aqui, o que isso impacta na implementação? Impacta que podemos usar o editor visual para nos orientar. A partir dele vamos ter um componente disponível que vai atender nosso aspecto visual desejado. A gente vai vir na parte de design e se viermos no text, perceba que temos diversos componentes para texto.

Aqui embaixo a gente tem um componente chamado text input layout, ele é aquele componente que a gente viu na tela que o cliente nos mandou, que vai ter o mesmo aspecto visual. Vai ser a partir dele que vamos conseguir implementar aquele comportamento. Vamos colocar no layout.

Vou clicar, arrastar e colocar no layout. Aparece um alerta falando que esse text input layout trata-se de um componentes que vem de dependência externa, não está ligado no sdk do Android, portanto ele vai ter que baixar uma dependência e aí sim vai colocar esse componente para a gente. Nesse caso, quando aparecer esse alerta a gente pode clicar em ok e agora o Android studio vai fazer todo o processo para colocar a dependência do nosso projeto e depois executar a task para baixar a dependência e colocar para a gente.

Vamos aguardar esse processo. Vamos dar uma olhada no que ele mudou no projeto. A gente vem no Gradle scripts, temos o build Gradle, que é onde a gente consegue colocar nossos arquivos de dependências de projeto. E se a gente reparar mais, no final tem uma nova dependência diferente das que vem por padrão quando a gente cria um projeto. É justamente essa Android support design.

Essa support design é uma biblioteca que vai ter diversos componentes visuais do próprio Google mesmo, atendendo uma técnica de padrões de design, disponíveis para a gente. E o text input layout é uma dessas ferramentas que a gente tem disponível quando utilizamos essa biblioteca.

Durante este curso vamos explorar só o text input layout, já que a gente não vai trabalhar muito em todas as partes visuais do design, dessa biblioteca, mas só para vocês saberem como ela foi adicionada, como conseguimos manter ela dentro do nosso projeto, já que é uma lib externa.

Vou fechar nosso arquivo de configuração do build. Voltando na parte do layout, vou maximizar novamente, deixa eu só aumentar aqui. A gente tem nosso text input layout. Como a gente sabe, a gente precisa definir as constraints, vou definir para a parte do início, do topo, do fim e de baixo.

Ficou centralizado. Como a gente sabe, quando temos essa parte de centralização conseguimos usar o bios para movimentar. A gente pode clicar, segurar e arrastar, vai sendo modificado sem problema. É outra técnica que podemos usar.

Subimos o text input design e podemos testar para ver se realmente está mantendo aquele comportamento que a gente viu que o cliente deseja. Considerando que ele já tem a mínima configuração para manter aquele comportamento. Logo mais vamos explorar mais dessa lib. Mas vamos ver se realmente aquele comportamento funciona.

Vamos executar a app. Podemos usar um atalho. Vamos usar o próprio emulador. Ele já apresenta a timelinha para a gente. Ficou cortado porque tem um tamanho fixo ali no text input layout. A gente consegue ver um pouco com a tela virada, porque está com tamanho fixo e vamos corrigir logo esse aspecto.

Perceba que aqui quando começamos a digitar texto ele já aparece texto e deixa a label na parte de cima. Como a gente viu, é justamente esse componente que vou utilizar durante o curso para manter o aspecto visual que o cliente pediu. Só para vocês terem essa parte do portrait, a gente vem no text input layout, com o mesmo esquema que já aprendemos, e colocamos ao invés de tamanho fixo o match constraint, que vai atingir o tamanho limite de acordo com as constraints.

Vamos executar novamente. Ele conseguiu colocar da maneira esperada. A gente aprendeu como podemos colocar o text input layout, e logo mais vamos começar com a implementação desse layout. Vamos pegar ele e implementar cada componente conforme as especificações que estamos vendo aqui.

Sobre o curso Android Brasil: implemente validações e formatações em formulários

O curso Android Brasil: implemente validações e formatações em formulários possui 246 minutos de vídeos, em um total de 61 atividades. Gostou? Conheça nossos outros cursos de Android em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Android acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas