Telas de cadastro

Prévia do material em texto

DESENVOLVIMENTO 
PARA DISPOSITIVOS 
MÓVEIS
Ubiratan Roberte Cardoso Passos
Telas de cadastro
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
 � Reconhecer a criação de telas de cadastro.
 � Identificar os elementos principais para a criação de uma tela de 
cadastro.
 � Desenvolver um projeto prevendo a aplicação dos recursos disponíveis.
Introdução
As telas de cadastro estão presentes em grande parte das aplicações 
para dispositivos móveis. Diferente do que ocorre no desenvolvimento 
de aplicações para Web ou para desktop, em dispositivos móveis existe 
uma maior preocupação em se desenvolver telas enxutas, mas capazes de 
recuperar informações que sejam realmente importantes para a aplicação 
ou para seu desenvolvedor.
Neste capítulo, você aprenderá a utilizar os conhecimentos adquiridos 
até aqui na criação de telas de cadastro para aplicações de dispositivos 
móveis. Você aperfeiçoará seus conhecimentos na construção de inter-
faces gráficas com o usuário, na utilização dos componentes visuais do 
Android e no acesso a alguns componentes de hardware e software do 
dispositivo móvel.
Telas de cadastro
Diversas aplicações Android (salvo jogos e algumas aplicações de cunho 
geral, ou até mesmo específicas, mas voltadas para a resolução de pequenos 
problemas pontuais) exigirão que o usuário realize algum tipo de cadastro. Os 
motivos podem variar, desde a necessidade de conhecer melhor os usuários, 
até a necessidade de atribuir um pouco mais de segurança para a aplicação, 
permitindo o cadastro de senhas e definição de perfis de usuários (DEITEL; 
DEITEL; DEITEL, 2015).
Seja qual for o propósito, a criação de telas para coleta de informações de 
usuários a partir de dispositivos móveis não segue o mesmo padrão (modelo) 
de telas com o mesmo propósito desenvolvidas para aplicações Web ou desktop. 
Quando se trata de dispositivos móveis, existem limitações consideráveis 
quanto à resolução e ao leiaute, o que gera uma série de novos desafios para 
o desenvolvedor.
Requisitos para telas de cadastro
As telas de cadastro são, sem dúvidas, requisitos de grande parte dos sistemas 
de aplicativos desenvolvidos, sejam eles para desktop, Web ou dispositivos 
móveis. Por isso, buscamos reunir neste material algumas dicas e exemplos 
para que você possa construir telas de cadastro de alta qualidade. Observe 
alguns modelos de telas de cadastro na Figura 1. 
Figura 1. Diferentes modelos de telas de cadastro.
Fonte: om_illustrations/Shutterstock.com.
Não é incomum encontrar aplicações que utilizem telas de cadastro, pois 
muitos desenvolvedores ou empresas de desenvolvimento têm grande interesse 
em conhecer seus usuários. As telas de cadastro estão entre os meios mais 
utilizados para alcançar este objetivo e não é difícil perceber que existem 
muitas semelhanças entre diferentes telas de cadastro observadas em apli-
cações de software.
Telas de cadastro2
Principais elementos de uma tela de cadastro
Ao criar uma tela de cadastro, você deve ter em mente que o usuário prefere 
algo simples, rápido e pouco ou nada burocrático. O usuário quer utilizar o 
sistema, ver suas funcionalidades, e quer fazer isso do modo mais rápido 
possível. Telas com muitas perguntas ou campos para preencher (muitas vezes 
não obrigatórios) são cansativas e podem afastar seu usuário.
Observe como são as telas de alguns dos aplicativos que você utiliza, além 
de ajudar a determinar como será a estrutura de sua tela, isso possivelmente lhe 
permitirá perceber que existem semelhanças entre elas. Existem, no entanto, 
diferenças sutis, principalmente na disposição dos campos na tela e na forma 
como as informações são solicitadas, sendo comuns as seguintes solicitações: 
e-mail, nome, sexo, data de nascimento, número do telefone, senha e foto. 
É comum que mais informações sejam solicitadas ao usuário, mas quando 
necessárias, essas informações podem ser acessadas em telas de suporte ao 
cadastro (denominamos assim as telas que coletam informações adicionais). 
Buscando melhorar a navegabilidade, tornar o uso da aplicação mais amigável 
e não cometer exageros gráficos, muitas aplicações oferecem o recurso de 
complementação do cadastro. Dessa forma, quando o usuário julgar necessário, 
ele pode acessar telas auxiliares para inserir mais informações em seu cadastro. 
A utilização de cadastros pré-existentes em redes sociais como fonte de entrada de 
dados para o cadastro de usuários em suas aplicações não somente é possível, como 
tem se tornado prática comum entre os desenvolvedores de aplicações móveis e Web.
A partir de sua conta em algum sistema de rede social (Google, Facebook, LinkedIn) 
o usuário pode autenticar e importar tais dados para efetuar seu cadastro na aplicação. 
É possível, inclusive, que o usuário utilize sempre esta autenticação como padrão de 
acesso à aplicação. 
Em Android, um dos recursos que permite a integração com as contas Google do 
usuário é o Google Sign In. Mais informações (em inglês) sobre este recurso podem 
ser adquiridas no link a seguir.
https://qrgo.page.link/RyVQE
3Telas de cadastro
Criando telas de cadastro
A primeira observação a ser feita é que para qualquer aplicação na qual seja 
exigido algum tipo de cadastro, uma tela de autenticação (login) de usuário é 
apresentada. Acreditamos que, ao desenvolver sua aplicação, caso ela venha 
a requerer algum tipo de cadastro do usuário, você obrigatoriamente deverá 
desenvolver uma tela de autenticação. Para este importantíssimo componente 
de uma tela de cadastros, o Android Studio oferece um template pronto, como 
observamos na Figura 2. Basta escolher o template activity login ao adicionar 
uma nova activity ou iniciar seu projeto. No entanto, vale lembrar que para 
este material utilizamos uma empty activity.
Figura 2. Template do Android Studio de uma tela de autenticação. 
Como padrão, a tela de login oferecida pelo Android Studio não possui 
campo para apresentação de foto do usuário (caso este já possua cadastro) e não 
existe a opção de recuperação de senha. Observa-se também que, no modelo, 
o botão utilizado para realizar a autenticação é o mesmo botão utilizado para 
realizar um novo registro, ficando a cargo do desenvolvedor criar as regras 
necessárias para que a aplicação decida entre realizar um novo registro ou 
a autenticação do usuário. Por ocupar pouco espaço e entendermos que se 
trata de uma facilidade para o usuário, indicamos que ao desenvolver sua tela 
Telas de cadastro4
de login você inclua, ainda que na forma de link, as opções novo registro e 
recuperar senha.
A partir da tela de login o usuário pode ser direcionado para três direções:
1. Tela de recuperação de login e/ou senha.
2. Tela de cadastro de novo usuário.
3. Tela inicial do aplicativo.
Na Figura 3, veja como ficaria a tela sugerida.
Figura 3. Sugestão de tela de login. 
Para a construção da tela, gera-se o XML a seguir.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/
android"
 xmlns:app="http://schemas.android.com/apk/
res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
5Telas de cadastro
 <EditText
 android:id="@+id/edEmail"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_marginStart="24dp"
 android:layout_marginTop="152dp"
 android:layout_marginEnd="24dp"
 android:inputType="textEmailAddress"
 android:selectAllOnFocus="true"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintHorizontal_bias="0.531"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent" />
 <EditText
 android:id="@+id/edSenha"
 android:layout_width="0dp"
 android:layout_height="wrap_content"android:layout_marginStart="24dp"
 android:layout_marginEnd="24dp"
 android:imeOptions="actionDone"
 android:inputType="textPassword"
 android:selectAllOnFocus="true"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintHorizontal_bias="0.531"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/
edEmail" />
 <ProgressBar
 android:id="@+id/loading"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_marginStart="32dp"
 android:layout_marginTop="64dp"
Telas de cadastro6
 android:layout_marginEnd="32dp"
 android:layout_marginBottom="64dp"
 android:visibility="gone"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="@+id/
edSenha"
 app:layout_constraintStart_toStartOf="@+id/
edSenha"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.3" />
 <Button
 android:id="@+id/btLogar"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginStart="8dp"
 android:layout_marginTop="8dp"
 android:layout_marginEnd="8dp"
 android:text="Entrar"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintHorizontal_bias="0.895"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toBottomOf="@+id/
edSenha" />
 <TextView
 android:id="@+id/tvCadastrar"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="40dp"
 android:clickable="true"
 android:singleLine="true"
 android:text="Registrar-me"
 android:textColor="#3F51B5"
 app:layout_constraintStart_toStartOf="@+id/
edSenha"
 app:layout_constraintTop_toTopOf="@+id/
loading" />
7Telas de cadastro
 <TextView
 android:id="@+id/tvSenha"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="8dp"
 android:clickable="true"
 android:singleLine="true"
 android:text="Recuperar a senha"
 android:textColor="#3F51B5"
 app:layout_constraintStart_toStartOf="@+id/
edSenha"
 app:layout_constraintTop_toBottomOf="@+id/
tvCadastrar" />
 <ImageView
 android:id="@+id/imvAvatar"
 android:layout_width="103dp"
 android:layout_height="99dp"
 android:layout_marginStart="8dp"
 android:layout_marginTop="8dp"
 android:layout_marginEnd="8dp"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 tools:srcCompat="@drawable/loginavatar" />
</android.support.constraint.ConstraintLayout>
Dentre estas opções você deve, por enquanto, preocupar-se somente com 
a própria tela de login e com a tela de cadastro de novos usuários. Como o 
foco deste capítulo é a tela de cadastros e os campos e componentes conside-
rados obrigatórios nesse tipo de tela, deixaremos as demais ações para uma 
discussão futura.
Telas de cadastro8
O que geralmente se deseja em uma tela de cadastro para aplicações móveis 
são informações básicas, nada de excessos ou exageros. Sua intenção é esti-
mular o uso da aplicação pelo usuário e não o contrário. Portanto, quanto mais 
rápido o usuário puder fazer uso da aplicação, melhor. Sendo assim, procure 
criar, sempre que possível, aplicações que exijam o mínimo de informações 
antes que o usuário possa começar a operá-la. Posteriormente, para ter acesso 
aos demais recursos da aplicação, induza o usuário a gradativamente completar 
seu cadastro (DEITEL, DEITEL; DEITEL, 2015).
Um ótimo material que pode ajudar no desenvolvimento de interfaces gráficas para 
suas aplicações Android e com suas telas de cadastro pode ser acessada no link a 
seguir, que se trata de um material oficial totalmente gratuito. 
https://qrgo.page.link/x13fB
Como sugerido nos tópicos anteriores, nossa tela de login manterá algumas 
funcionalidades separadas, sendo estas um link para recuperação da senha e um 
botão para um novo registro. Essa tela de login também deverá ter um campo 
para apresentação da foto do usuário, caso este já esteja cadastrado no sistema.
Observe que, diferente do que ocorre nas telas de login para aplicações 
web ou de desktop, nas telas de login para aplicações móveis a utilização de 
componentes do tipo TextView é evitada. Para informar o usuário sobre o 
propósito de cada um dos campos, utiliza-se sempre que possível a propriedade 
hint dos componentes.
Supondo que o usuário seja novo e tenha que realizar o cadastro no sistema 
para que possa utilizá-lo, o que queremos a princípio é que o usuário insira 
algumas informações básicas para que possa ter uma conta única no sistema 
e para que você possa conhecê-lo um pouco, ou pelo menos o suficiente para 
que possa contatá-lo, se necessário. 
9Telas de cadastro
Para que um novo cadastro seja realizado, o usuário deve clicar no texto 
“Registrar-me”. Veja então como seria o código para que a tela de cadastro 
seja aberta.
1. tvCadastrar = (TextView)findViewById(R.
id.tvCadastrar);
2. tvCadastrar.setOnClickListener(new View.OnCli-
ckListener() {
3. @Override
4. public void onClick(View v) {
5. Intent i = new Intent(MainActivity.
this, cadastro.class);
6. startActivity(i);
7. }
8. });
Sendo assim, desenvolva uma tela de cadastro simples, enxuta, mas que 
permita que o usuário complemente as informações quando julgar conveniente, 
como na Figura 4.
Figura 4. Tela de cadastro que permite complementação.
Telas de cadastro10
Para que o teclado mude e se torne um teclado numérico quando o usuário 
estiver no campo telefone, selecione a propriedade inputType do compo-
nente e depois a opção phone, como mostra a Figura 5.
Figura 5. Passo para tornar um teclado numérico.
Observe no modelo da Figura 6 que, apesar de obrigatórios, existem poucos 
campos para ser preenchidos. A intensão é que o usuário, na medida em que 
for utilizando a aplicação, complete o cadastro ou, caso este se sinta a von-
tade para fazê-lo de imediato, clique no botão completar cadastro e o faça. 
Quando o cliente se sente disposto a realizar um cadastro mais completo, suas 
oportunidades de desenvolvimento aumentam, ou seja, você pode solicitar 
dados mais completos, pois o usuário estará disposto a preencher todos os 
campos. Contudo, lembre-se de não obrigá-lo a fazê-lo.
Figura 6. Complemento de uma tela de cadastro.
Fonte: Adaptada de Mll/Shutterstock.com.
Data de nascimento
Masculino
Feminino
Endereço Nº
Bairro CEP
UFCidade
11Telas de cadastro
Por se tratar de dados adicionais, não há muita preocupação com a extensão 
das telas complementares. As únicas preocupações que devem ser mantidas 
são as referentes à importância da informação coletada, tanto para a aplicação 
quanto para o desenvolvedor, e a não obrigatoriedade do preenchimento dos 
dados considerados complementares. 
Não existe uma regra de ouro para definir quais dados devem ser obrigató-
rios e esperados em uma tela de cadastro e quais não o são, mas algumas dicas 
podem ajudar a definir sua obrigatoriedade, conforme descrito no Quadro 1.
Obrigatórios Não obrigatórios
 � Informações que permitam 
identificar o usuário de forma 
única.
 � Informações para tomada de 
decisão.
 � Informações que podem interferir 
no funcionamento/finalidade da 
aplicação.
 � Informações para recuperação de 
conta do usuário.
 � Informações que complementam 
o cadastro.
 � Informações de endereço (quando 
o aplicativo não precisa enviar 
correspondências).
 � Informações quanto à idade 
(quando o aplicativo não possui 
restrição quanto a idade).
 � Informações financeiras.� Informações que não auxiliam no 
processo decisório.
Quadro 1. Elementos das telas de cadastro
As telas de cadastro são parte importantíssima de qualquer aplicação, seja 
esta uma aplicação móvel, para desktop ou Web. É a partir de um cadastro 
inicial que a “vida” do usuário tem início na aplicação e, por esse motivo, 
reforçamos a importância de se construir telas bem elaboradas, estruturadas 
e, sobretudo, moderadas. 
Telas de cadastro12
Tela de perfil e telas de cadastro
Qualquer aplicação que apresente uma opção de tela de cadastro apresentará 
também uma tela com o perfil do usuário. Nessa tela o usuário poderá atuali-
zar seus dados, sempre que desejar ou quando for necessário (de tempos em 
tempos o usuário pode ser convidado a fazê-lo). 
Às telas que apresentam informações relacionadas ao usuário dá-se o nome 
de perfil, ou perfil do usuário. Ao desenvolver sua aplicação, você poderá se 
deparar com situações em que deseja ter mais informações sobre o usuário, 
mas saberá que não poderá exigir tantas informações de forma direta, pois 
isso afastaria o usuário. A forma indicada para isto é a inserção de campos 
para preenchimento posterior nas telas de perfil. 
As telas de perfil podem ser desenvolvidas de diversas formas. Não existe 
um padrão ou modelo ideal a ser utilizado, mas é recomendado que sejam o 
mais simples possível, tendo em sua seção principal informações básicas como 
foto do usuário, seu login, sua senha, seu e-mail, opção para alterar dados de 
acesso à conta e links ou seções para alteração dos dados complementares, 
permitindo que o usuário acesse tais dados e os altere sempre que for necessário 
(DEITEL; DEITEL; WALD, 2016).
Vimos, até aqui, algumas características de como desenvolver uma tela de 
cadastro, focando na aparência e nas configurações de alguns componentes. 
Para finalizar, discutiremos alguns códigos que poderão ajudá-lo em um 
desenvolvimento prático.
Inserindo eventos em um botão
Para inserir eventos em um botão, digite:
nomeBotao.setOnClickListener (new View.OnClickLis-
tener(){
 @Override
 Public void onClick(View v){
 //insira aqui o código desejado.
}
}
Você também poderá usar o método setOnClckListener em outros 
componentes como TextView e ImageView.
13Telas de cadastro
Recuperando dados de um componente EditView
Para recuperar dados de um componente EditView, digite:
nomedocomponente.getText().toString();
Também é possível adicionar o método trim() logo após o toString(). 
Para comparar o texto com algum valor, utilize o método equals(), como 
apresentado no exemplo a seguir:
if (senha.getText().equals(SENHA)) --- retorna TRUE se 
for verdadeiro. 
Recuperando o valor checked de um RadioGroup
Esta talvez seja uma das operações menos simples de se realizar, mas nem 
por isso é complexa. Uma das opções mais simples é recuperar o texto do 
RadioButton que está com a opção checked marcada como true.
Veja um exemplo de código a seguir.
String pVip;
Integer sVip = rgVip.getCheckedRadioButtonId();
RadioButton rbVip = (RadioButton)findViewById(sVip);
if (rbVip.getText().equals("Sim")){
 pVip = "S";
}else{
 pVip = "N";
}
Para marcar o RadioButton como checked a partir do código, digite:
rgPVIP= (RadioGroup)findViewById(R.id.rgpVip);
((RadioButton)rgPVIP.getChildAt(0)).setChecked(true);
Telas de cadastro14
Existem diversos outros controles e comandos que podem ser utilizados 
em projetos de aplicações móveis para Android, e na medida em que você for 
avançando em seus estudos, você os conhecerá.
A classe ViewModel
Um recurso presente no desenvolvimento para Android é a classe ViewModel, 
que facilita a aplicação do padrão View Model Model View (MVVM). 
Com o auxílio dessa classe é possível persistir os dados de forma temporária, 
ou seja, é possível garantir que falhas na aplicação não eliminem os dados, 
permitindo sua recuperação tão logo a aplicação esteja estável. 
Uma classe ViewModel permanece durante todo o ciclo de vida da apli-
cação, ou seja, ela persiste enquanto a aplicação estiver em execução, sendo 
que seus dados são apagados somente quando a aplicação é encerrada. O 
código a seguir (VIEWMODEL..., 2019, documento on-line) é um exemplo que 
permite que tenhamos um breve entendimento de como essa classe trabalha. 
Em primeiro lugar é apresentada a classe que herda as especificações da 
classe ViewModel:
1. public class MyViewModel extends ViewModel {
2. private MutableLiveData<List<User>> users;
3. public LiveData<List<User>> getUsers() {
4. if (users == null) {
5. users = new MutableLiveData<List<User>>();
6. loadUsers();
7. }
8. return users;
9. }
10. private void loadUsers() {
11. // Do an asynchronous operation to 
fetch users.
12. }
13. }
15Telas de cadastro
Para definir manualmente o valor de um objeto LiveData é preciso utilizar a classe 
MutableLiveData. Objetos LiveData são parte integrante de um ViewModel 
que naturalmente implementa o padrão Observer, ou seja, esses objetos reagem 
a alterações em seus conteúdos, permitindo que ações sejam definidas quando tais 
alterações ocorrem.
No exemplo, a classe MyViewModel cria e mantem uma lista de objetos 
da classe User. A princípio, esta classe seria responsável por armazenar uma 
lista de usuários.
1. public class MyActivity extends AppCompatAc-
tivity {
2. public void onCreate(Bundle savedInstan-
ceState) {
3. // Create a ViewModel the first time the 
system calls an activity's onCreate() method.
4. // Re-created activities receive the same 
MyViewModel instance created by the first activity.
5. MyViewModel model = ViewModelProviders.
of(this).get(MyViewModel.class);
6. model.getUsers().observe(this, users -> {
7. // update UI
8. });
9. }
10. }
Na classe MyActivity é criado um objeto do tipo MyViewModel, 
responsável pela recuperação dos dados da classe ViewMode. No decorrer 
da disciplina você verá exemplos mais completos.
Telas de cadastro16
Um bom exemplo relacionado a telas de cadastro pode ser observado no aplicativo 
id jovem, criado pelo Governo Federal. Nele, o usuário preenche um número mínimo 
de informações para iniciar a utilização do aplicativo e, caso necessário, pode comple-
mentar o cadastro posteriormente. Observe a tela de cadastro do aplicativo na Figura 7.
Figura 7. Tela de cadastro do aplicativo id jovem. 
Fonte: Id Promotor (2018, documento on-line).
DEITEL, P.; DEITEL, H.; DEITEL, A. Android: como programar. 2. ed. Porto Alegre: Book-
man, 2015. 690 p.
DEITEL, P.; DEITEL, H.; WALD, A. Android 6 para programadores: uma abordagem baseada 
em aplicativos. 3. ed. Porto Alegre: Bookman, 2016. 618 p.
ID PROMOTOR 2.0. Secretaria Nacional da Juventude, Brasília, 15 ago. 2018. Disponível 
em: https://play.google.com/store/apps/details?id=com.promotor.idjovem. Acesso 
em: 28 jun. 2019.
17Telas de cadastro
VIEWMODEL Overview. Android Developers, [S. l.], 2019. Disponível em: https://develo-
per.android.com/guide/topics/ui/overview.html?hl=pt-BR. Acesso em: 28 jun. 2019.
Leitura recomendada
GUIMARÃES, A., P., N.; TAVARES, T., A. Avaliação de Interfaces de Usuário voltada à Acessi-
bilidade em Dispositivos Móveis: Boas práticas para experiência de usuário. In: SIMPÓSIO 
BRASILEIRO DE SISTEMAS MULTIMÍDIA E WEB, 20., 2014, João Pessoa. Anais Estendidos 
[...], João Pessoa: Centro de Convenções, 2014. p. 22–29. Disponível em: https://sol.sbc.
org.br/index.php/webmedia_estendido/article/view/4923. Acesso em: 28 jun. 2019.
Telas de cadastro18