7. Desenhando as telas do aplicativo
7.3. Layout Tela de Login
No fragmento de Login vamos criar um formulário para o usuário preencher com seu usuário e senha . Nesta tela vamos usar TextInputLayout novamente.
Abra o arquivo fragment_login.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 dois elementos TextInputLayout,
- Para cada TextInputLayout adicionado, configure a propriedade 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: emailTextInputLayout2 e senhaTextInputLayout2
- Adicione um Button e configure a propriedade id como loginButton e adicione um recurso string para o texto do botão; "Login"
- Adicione um Button e configure a propriedade id como gotoCadastroButton e adicione um recurso string para o texto do botão; "Cadastrar novo usuário".
- Modifique a propriedade layout_width para match_parent e você obterá o visual abaixo:
Use como base a figura a seguir:
Configurando a entrada de texto
Selecione a EditText do elementos emailTextInputLayout e configurare a propriedade imeOptions para actionNext. E senhaTextInputLayout para actionDone.
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 emailTextInputLayout – selecione text e variação textEmailAddress
- EditText do senhaTextInputLayout – selecione text e variação textPassword