Firebase App - Parte 1

7.2. Layout Tela de Cadastro

No fragmento de Cadastro vamos criar um formulário para o usuário preencher com seus dados. Nesta tela vamos usar TextInputLayout, uma maneira mais elegante de criar entradas de texto com as diretrizes do Material Design.

Abra o arquivo fragment_cadastro.xml e realize as seguintes alterações:

• Apague a TextView criada automaticamente
• Adicione um LinearLayout e configure sua orientação para a vertical e layout_height para wrap_content.
• Adicione ao LinearLayout quatro elementos TextInputLayout, aba Text. Observe que para cada novo elemento será criado também uma EditText. 
• Para cada TextInputLayout adicionado, configure as propriedades id como detalhado a seguir e crie uma propriedade hint adequada. Deixe a propriedade hint da EditText em branco senão uma se sobressai a outra.
• ids: nomeTextInputLayout, telefoneTextInputLayout, emailTextInputLayout e senhaTextInputLayout
• layout_height:wrap_content

• Adicione um Button e configure a propriedade id como cadastrarButton e adicione um recurso string para o texto do botão; "Cadastrar"

Use como base a figura a seguir:

Configurando a entrada de texto

• Selecione a EditText dos elementos nomeTextInputLayout, telefoneTextInputLayout e emailTextInputLayout para configurar a propriedade imeOptions para actionNext. Com essa configuração ficará mais fácil para o usuário preencher os dados usando o teclado.
• Selecione a EditText do último elemento, senhaTextInputLayout, e configure a propriedade imeOptions para actionDone. Com essa configuração finalizamos o preenchimento e o teclado irá se esconder quando o usuário clicar em prosseguir.
• Configure cada EditText para um tipo de dado específico. Isso ajuda no preenchimento dos dados pelo usuário. Assim, modifique a propriedade inputType como:
  • EditText do nomeTextInputLayout – selecione tipo text, variação textPersonName e textCapWords (coloca automaticamente letras maiúsculas)
  • EditText do telefoneTextInputLayout – selecione phone
  • EditText do emailTextInputLayout – selecione text e variação textEmailAddress
  • EditText do senhaTextInputLayout – selecione text e variação textPassword

As mudanças aplicadas não modificam a aparência do aplicativo mas sim sua usabilidade. O uso correto das propriedades imeOptions e inputType tornam a experiência do usuário mais agradável com o teclado virtual refletindo as configuração adequada.