TUTORIAL – Android – Parte 3 – Construção de Telas http://www.mobiltec.com.br/blog/index.php/tutorial-android-parte-3-cons...

← Anterior Próximo→Switch to our mobile site

TUTORIAL – Android – Parte 3 – Construção de

Telas
Postado 15 de janeiro de 2013 por Renan Drabach

Nesta terceira parte do nosso tutorial sobre Android vamos tratar das questões de desenvolvimento de
aplicações. Depois de já ter montado o ambiente de desenvolvimento e ter conhecido um pouco mais sobre o
uso do Eclipse para trabalhar com Android, vamos desenvolver uma aplicação real, que vai demonstrar o
básico na criação de telas e na utilização dos componentes.

Editando a Interface

Vamos começar criando um novo projeto. Na tela exibida é preciso escolher apenas o nome da aplicação e o
restante pode ser deixado como está. Ao fim da criação do projeto, o editor gráfico da tela principal será
aberto. No Android é possível editar as telas tanto pelo editor gráfico quanto alterando diretamente o XML que
descreve o layout. O editor gráfico, apesar de ser a opção mais fácil em teoria e ter evoluído nas últimas
versões, geralmente não é muito utilizado por ser limitado e ter um desempenho ruim para telas com muitos
componentes. Mas para telas simples é indicado utilizá-lo, principalmente para quem está iniciando.

Para iniciar a edição da tela, vamos remover o campo de texto “Hello World” (selecione e delete) e alterar o
layout utilizado, de Relative Layout para Linear Layout (com o botão direito na parte superior do menu da
direita, opção “Change Layout”).

O Android organiza suas telas em estruturas básicas chamadas de Layouts. São eles que definem como os
componentes menores (campos de texto e botões, por exemplo) serão organizados. Existem vários tipos de
layout (o Relative e o Linear que recém vimos, por exemplo), cada um com sua forma e propriedades, que
podem ser combinados para formar a tela de acordo com o desejado. No início é difícil entender como e qual
utilizar em cada tela, além de ser mais complexo (na minha opinião como desenvolvedor nas duas
plataformas) do que simplesmente posicionar cada componente livremente na tela, como acontece no iOS.

Por isso vamos começar com o layout mais simples: após dividir a tela em linhas horizontais, onde serão
colocados cada componente escolhido, basta arrastá-los até a tela no menu da esquerda. Neste caso vamos
utilizar dois campos de texto, com um título (texto fixo) e um botão para cada um.

1 de 6 25/11/2015 00:27
TUTORIAL – Android – Parte 3 – Construção de Telas http://www.mobiltec.com.br/blog/index.php/tutorial-android-parte-3-cons...

Com o botão direito, a opção “Edit Text” permite alterar os textos de cada componente. Vamos alterar todos os
componentes do tipo Button e TextView. De forma semelhante, a opção “Other Properties” – “Inherited from
View” – “OnClick” permite associar um método da atividade (classe Activity) que corresponde ao evento de
clique (pressionar o botão). Assim, definiremos um método para cada botão e teremos como realizar alguma
ação quanto cada um deles for pressionado.

Implementando Atividades

Com a tela pronta, precisamos implementar um código para controlá-la. Isso será feito na classe
MainActivity.java ao adicionar os dois métodos que associamos ao evento de clique dos botões. No primeiro
deles, vamos exibir o texto digitado em uma mensagem sobre a mesma tela. Para isso precisamos recuperar o
campo de texto da tela para o obter o texto digitado e depois exibí-lo, conforme o exemplo abaixo:

1. // Evento de clique do primeiro botão

2. public void botaoExibirNestaTela(View view) {
3. // Recupera o elemento da tela e o seu texto.
4. EditText primeiroCampo = (EditText) findViewById(R.id.editText1
5. String mensagem = primeiroCampo.getText().toString();
6.
7. // Exibe a mensagem.
8. Toast.makeText(this, mensagem, Toast.LENGTH_LONG).show();
9. }

2 de 6 25/11/2015 00:27
TUTORIAL – Android – Parte 3 – Construção de Telas http://www.mobiltec.com.br/blog/index.php/tutorial-android-parte-3-cons...

No segundo campo, vamos exibir a mensagem em um TextView de uma nova tela. Para isso precisamos criar
esta tela sem utilizar nenhum XML para definir a interface, a fim de demonstrar que podemos criar os
componentes também em tempo de execução, o que nos facilitará em telas mais simples. Criaremos então
uma nova classe e a nomearemos de SecondActivity.java. Nela, vamos estender a classe Activity e
implementar o método herdado onCreate: sempre o primeiro a ser executado quando a tela é criada. Neste
método vamos recuperar o Intent (mecanismo que irá “carregar” a mensagem de uma tela para outra), criar o
TextView com a mensagem recuperada e exibí-lo.

1. public class SecondActivity extends Activity {

2.
3. @Override
4. protected void onCreate(Bundle savedInstanceState) {
5. super.onCreate(savedInstanceState);
6.
7. // Recupera o intent que iniciou a atividade e a mensagem.
8. Intent intent = getIntent();
9. String mensagem = intent.getStringExtra("mensagem");
10.
11. // Cria uma view para exibir o texto.
12. TextView textView = new TextView(this);
13. textView.setTextSize(30);
14. textView.setText(mensagem);
15.
16. // Define que o conteúdo exibido pela tela é o campo que
17. // irá exibir o texto.
18. setContentView(textView);
19. }
20.
21. }

Ainda é necessário declarar essa nova atividade no arquivo AndroidManifest.xml da aplicação, que descreve
para o sistema todos os componentes presentes nela. Este arquivo também pode ser editado através de uma
tela auxiliar ou diretamente no XML, que neste caso é a opção mais recomendada.

1. <activity
2. android:name="br.com.example.tutorial3.SecondActivity">
3. </activity>

Agora basta iniciar a SecondActivity a partir do botão da MainActivity, recuperar o texto digitado, o incluir no
Intent utilizado e dar início à nova tela.

1. // Evento de clique do segundo botão

2. public void botaoExibirNovaTela(View view) {
3. // Recupera o elemento da tela e o seu texto.
4. EditText segundoCampo = (EditText) findViewById(R.id.editText2
5. String mensagem = segundoCampo.getText().toString();
6.
7. // Cria o intent com a mensagem a ser passada para a onva tela.
8. Intent intent = new Intent(this, SecondActivity.class);
9. intent.putExtra("mensagem", mensagem);
10.
11. // Inicia a nova tela.
12. startActivity(intent);
13. }

3 de 6 25/11/2015 00:27
TUTORIAL – Android – Parte 3 – Construção de Telas http://www.mobiltec.com.br/blog/index.php/tutorial-android-parte-3-cons...

Conferindo o Resultado

A aplicação está pronta. Inicie um emulador (confira como criar um emulador na primeira parte do tutorial) e,
após este ter iniciado, clique com o botão direito na pasta raiz do projeto e escolha “Run as” – “Android
Application”.

4 de 6 25/11/2015 00:27
TUTORIAL – Android – Parte 3 – Construção de Telas http://www.mobiltec.com.br/blog/index.php/tutorial-android-parte-3-cons...

Neste tutorial escolhemos uma aplicação simples, mas que pudesse ainda assim demonstrar alguns conceitos
importantes como Layout, Activity, Intent, Manifest, componentes de tela… Para uma primeira aplicação já foi
bastante.

Trataremos novamente destes e de outros conceitos na sequência dos tutoriais, mas uma boa leitura sobre
cada um deles é fundamental para compreender como utilizá-los da melhor forma. Como sugestão, indico
visitar o treinamento inicial do site do Android (em Inglês), de onde baseamos este tutorial.

Escrito por Renan Drabach.

Share 4 Curtir 19 Share 19 Tweet

Post Relacionados

Desvendando as DataInteractions do Espresso

Testes de Interface com o Espresso
Notificações Push em Android
Android – Persistência de Dados usando SQLite
Tutorial de Android: Requisição de serviços de um servidor WCF – Parte 2

Esse post foi publicado em Android, Tutorial por Renan Drabach

Tags Activity, Android, Construção de Telas, Intent, Layout, Manifest, Renan Machado Drabach

7 THOUGHTS ON “TUTORIAL – ANDROID – PARTE 3 – CONSTRUÇÃO DE TELAS”

Luiz Fernandes
no dia 29 de abril de 2013 at 5:02 pm falou:

O link para o tutorial parte 4 está corrompido, favor restaurar o

vínculo, pois a matéria é de interesse de muita gente. Grato.

Renan Drabach
no dia 29 de abril de 2013 at 5:27 pm falou:

Olá Luiz, obrigado pela dica. O link já foi corrigido.

bremer
no dia 15 de julho de 2013 at 5:32 pm falou:

Olá, tenho uma dúvida.

Como faria para enviar vários dados , ao invés de apenas 1 ?
criaria vários intents ?

5 de 6 25/11/2015 00:27
TUTORIAL – Android – Parte 3 – Construção de Telas http://www.mobiltec.com.br/blog/index.php/tutorial-android-parte-3-cons...

Muito obrigado

Renan Drabach
no dia 30 de agosto de 2013 at 7:29 pm falou:

Olá Bremer. Um Intent permite que se adicione informações

para serem recuperadas por quem receber este intent
através de uma estrutura de chave-valor, e os valores aceitos
são de vários tipos, assim como se pode inserir mais de um
valor do mesmo tipo, associando uma chave diferente. Assim
você pode enviar muitas coisas de uma só vez no mesmo
intent. Usar mais de um intent provavelmente não faria o que
você espera, pois cada intent é uma “chamada” para a outra
tela, o que no modo padrão de criação de telas do Android
faria com que outra tela igual fosse aberta, e você teria duas
telas iguais sobrepostas, cada uma com parte da informação.

wesley
no dia 30 de agosto de 2013 at 3:43 pm falou:

Ola cara gostei do tuto. Estou desenvolvendo um app, dessa mesma

forma que vooc ensinou tem como nessa nova tela adicionar novos
campos e tals, ja tenho familiaridade com programação, penso que
seja da mesma forma do visual studio ou delphi…desde já agradeço
pela ajuda

Renan Drabach
no dia 30 de agosto de 2013 at 7:37 pm falou:

Olá Wesley. Se entendi bem o seu objetivo, basta construir a

segunda tela de forma semelhante à primeira, editando a
interface, incluindo os botões, campos, alterando o layout,
etc. Quando ela for chamada, já será criada com a interface
que foi definida (se utilizar a forma mais comum de carregar a
interface no método onCreate), e você poderá preencher os
campos com informações na inicialização da tela se desejar.

Rodrigo
no dia 12 de setembro de 2014 at 10:49 am falou:

Ola Renan, Gostaria de saber vc poderia me ajudar colocar um

texto. por favor se poder me ajudar estou no skype rodrigo.ramos445

6 de 6 25/11/2015 00:27