Você está na página 1de 317

Aviso sobre esta apostila

Antes de iniciar a leitura deste material, veja esses avisos importantes:

Esse material NÃO PODERÁ SER DISTRIBUÍDO, em hipótese alguma, em


outros sites da Internet ou através outros processos/meios .

Essa material , em hipótese alguma, NÃO PODE SER COMERCIALIZADO


tanto pela Internet ou de forma impressa.

Se por acaso você ver este material sendo distribuído em outro site ou sendo
comercializado (sem ser pelo site oficial da apostila), por favor, entre em
contato com o autor (ver e-mail na primeira página).

2
O Sucesso da Apostila de Android
A Apostila de Android – Programando Passo a Passo é hoje referência didática
de material sobre desenvolvimento de aplicações e sistemas para a plataforma
Google Android, conhecido tanto aqui no Brasil quanto em outros países
(somando-se mais de 65 países). Hoje a Apostila de Android já chegou a
aproximadamente 200.000 acessos (feito pelos mais diversos usuários como
estudantes e profissionais da área de programação) Hoje ela é usada por
universidades e professores que ministram cursos sobre desenvolvimento
Android (Tanto na área de criação de aplicações e jogos).

Sobre o Autor da Apostila


Luciano Alves da Silva é Bacharelado em Ciência da Computação pela
UNISUAM (Rio de Janeiro – RJ) e Pós-Graduado em Docência do Ensino
Superior pelo Instituto A Vez do Mestre (Universidade Cândido Mendes –
UCAM, no Rio de Janeiro). Possui conhecimento e domínio das linguagens de
programação Pascal, Java, C/C++, C#, Visual Basic, Delphi, PHP e HTML. Já
criou Ambientes de Desenvolvimento Integrado (conhecidos como IDE) como o
MakeWare (que trabalha com as linguagens Pascal, C++ e Java) e o AlgoWare
(interpretador de algoritmos).

É autor também dos seguintes livros, pela editora AGBOOK

- Aprenda Passo a Passo a Programar em Android – Guia Essencial para


Desenvolvedores

- Desenvolvendo Jogos com a Plataforma XNA 2ª Edição – Guia para


Desenvolvedores.

- Desenvolvendo Jogos com o Framework MONOGAME – Guia para


Desenvolvedores.

- Desenvolvendo Jogos 2D com Plataforma Java – Guia para


Desenvolvedores.

3
Apresentação

O Android é uma plataforma aberta voltada para dispositivos móveis


desenvolvida pela Google e atualmente é mantida pela Open Handset
Alliance (OHA). Todas as aplicações desenvolvidas para essa
plataforma foram criadas com a linguagem Java, o que facilita muitos
programadores com conhecimentos em Java (ou de outras linguagens
próximas de Java como C++ e C#) a desenvolver aplicações para o Android.

Esta apostila tem por objetivo mostrar de modo fácil e claro como desenvolver
aplicações para dispositivos móveis que utilizam o sistema operacional Google
Android através a ferramenta Android Studio (baseada na IDE IntelliJ IDEA).

Para quem dedico este material?

Este material é dedicado aos usuários experientes ou iniciantes em


programação (tanto para Desktop, Móbile e etc.), que já tenha algum contato
com a linguagem Java ou com uma de suas derivadas (como C/C++ ou C#).

4
Índice analítico
Capitulo 1 Visão geral sobre o Google Android ........................................... 8
1.1) Introdução ............................................................................................... 8
1.2) Estrutura Geral da plataforma Google Android ..................................... 10
1.2.1) A arquitetura do Android .................................................................... 11
1.2.2) Aplicações.......................................................................................... 11
1.2.3) Android Runtime ................................................................................ 12
1.2.4) Linux Kernel ....................................................................................... 12
1.3) Para qual versão do Android devemos desenvolver as aplicações ? ... 13
Capitulo 2 Instalando e Configurando a Ferramenta de Desenvolvimento
para Android ................................................................................................... 15
2.1) A ferramenta de desenvolvimento Android Studio ................................ 15
2.2) Observações gerais sobre o Android Studio ......................................... 16
2.3) Baixando e configurando os componentes da ferramenta de
desenvolvimento .......................................................................................... 18
2.3.1) A Máquina Virtual Java ...................................................................... 18
2.3.2) O Android SDK .................................................................................. 22
2.3.3) O Android Studio ................................................................................ 36
Capitulo 3 Começando a programar no Google Android .......................... 51
Capitulo 4 Conhecendo as widgets do Android ......................................... 87
4.1) A paleta de componentes e suas widgets ............................................. 87
4.1.1) A seção “Widgets” .............................................................................. 88
4.1.2) A seção “Text Fields” ......................................................................... 91
4.1.3) A seção “Layouts” .............................................................................. 92
4.1.4) A seção “Containers” ......................................................................... 93
4.1.5) A seção “Date & Time” ....................................................................... 93
4.1.6) A seção “Expert” ................................................................................ 95
Capitulo 5 Construindo nossas aplicações no Android ............................ 96
5.1) Desenvolvendo uma Calculadora Básica ............................................. 96
5.2) Desenvolvendo uma aplicação simples de compras .......................... 116

5
5.3) Desenvolvendo uma aplicação de cálculo de salário .......................... 122
5.4) Desenvolvendo uma aplicação de cálculo de salário (2ª versão) ....... 131
5.5) Desenvolvendo uma aplicação de lista de contatos ........................... 143
5.6) Desenvolvendo uma aplicação que visualiza imagens (ImageView) .. 147
5.7) Desenvolvendo uma aplicação que visualiza imagens (Gallery) ........ 157
5.8) Desenvolvendo uma aplicação demonstrando o ProgressBar........... 168
5.9) Desenvolvendo uma aplicação que demonstra o uso componente
DatePicker.................................................................................................. 177
5.10) Desenvolvendo uma aplicação que demonstra o uso componente
TimerPicker ................................................................................................ 182
5.11) Desenvolvendo uma aplicação de sistema de classificação ............ 184
Capitulo 6 Trabalhando com mais de uma tela em uma aplicação ......... 191
6.1) Desenvolvendo um Sistema de Cadastro (Primeira versão)............... 199
6.2) Desenvolvendo um Sistema de Cadastro (Segunda versão).............. 222
Capitulo 7 Conhecendo os tipos de estruturas de layout do Android ... 241
7.1) RelativeLayout .................................................................................... 241
7.2) TableLayout ........................................................................................ 246
7.3) LinearLayout ....................................................................................... 250
Capitulo 8 Trabalhando com efeitos de transição.................................... 253
Capitulo 9 Trabalhando com menus em uma aplicação .......................... 277
Capitulo 10 Conhecendo as caixas de diálogo da plataforma Android . 287
10.1) A classe AlertDialog .......................................................................... 287
10.2) A classe DatePickerDialog ................................................................ 292
10.3) A classe TimePickerDialog ............................................................... 294
10.4) A classe ProgressDialog ................................................................... 295
10.5) Criando uma caixa de diálogo personalizada .................................. 298
Capitulo 11 Publicando as aplicações no Google Play............................ 300
Capitulo 12 Propriedades e eventos dos componentes trabalhados ..... 303
Widget TextView ........................................................................................ 303
Widget EditText .......................................................................................... 304
Widget Button............................................................................................. 306

6
Widget ToogleButton .................................................................................. 307
Widget CheckBox/RadioButton .................................................................. 308
Widget Spinner / ListView .......................................................................... 309
Widget ImageView ..................................................................................... 310
Widget Gallery............................................................................................ 311
Widget ProgressBar ................................................................................... 312
Widget DatePicker ..................................................................................... 313
Widget TimePicker ..................................................................................... 313
Widget RatingBar ....................................................................................... 314
Widget ViewFlipper .................................................................................... 315
Conclusão a respeito do material ............................................................... 317

7
Capitulo 1 Visão geral sobre o
Google Android

1.1) Introdução

C onforme mencionado na apresentação deste material, o Android é uma


plataforma desenvolvida pela Google voltada para dispositivos móveis,
totalmente aberta é livre (Open Source), que foi divulgada em 5 de
novembro de 2007. Inicialmente o sistema Android foi desenvolvido pelo
Google e atualmente essa plataforma é mantida pela OHA (Open Handset
Alliance. Visite o link : http://www.openhandsetalliance.com), um grupo
constituído por aproximadamente 84 empresas as quais se uniram para inovar
e acelerar o desenvolvimento de aplicações e serviços, com o objetivo e
trazer aos consumidores uma experiência mais rica em termos de recursos,
menos dispendiosa em ternos financeiros para o mercado móvel.

Um dos primeiros SmartPhones que ofereceu suporte a esse sistema


operacional foi o G1 da empresa T-Mobile. Confira na imagem seguinte:

G1 - T-Mobile

8
Atualmente o sistema Android se encontra hoje disponível tanto em
SmartPhones quanto nos Tablets. Confira abaixo alguns dos dispositivos
encontramos hoje no mercado com o sistema operacional Android:

SmartPhone Samsung Galaxy S3

Tablet Samgung Galaxy Note

9
1.2) Estrutura Geral da plataforma Google Android
O Android SDK é uma ferramenta de desenvolvimento que disponibiliza um
conjunto de APIs necessárias para desenvolver aplicações para a plataforma
Android, utilizando a linguagem Java.

Vamos conhecer os recursos encontrados nessa plataforma:

- Application framework: Permite a reutilização e substituição de


componentes ;

- Dalvik virtual machine: É uma Máquina Virtual Java (JVM) voltada para
dispositivos móveis ;

- Browser Integrado baseado no webkit engine ;

- Gráficos Otimizados O Android é constituído por bibliotecas 2D e 3D


baseada na especificação OpenGL ES 1.0 ;

- SQLite: Sistema Gerenciador de Banco de Dados (SGBD) já embutido no


Android para guardar dados ;

- Suporte multimídia: A plataforma já oferece para áudio, vídeo e formatos de


imagem (MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF) ;

- Telefonia GSM (dependente de hardware) ;

- Bluetooth, EDGE, 3G, e WiFi (dependente de hardware) ;

- Câmera, GPS, compasso, e acelerômetro (dependente de hardware) ;

- Rico ambiente de desenvolvimento , incluindo um emulador de dispositivo,


ferramentas de depuração, memória e performance.

10
1.2.1) A arquitetura do Android

Arquitetura geral da plataforma

1.2.2) Aplicações

O Android nos fornece um conjunto de aplicações fundamentais, são elas:

- um cliente de e-mail;
- programa de SMS;
- agenda;
- mapas;
- navegador;
- contatos entre outros.

Todos os aplicativos acima presentes no Android foram desenvolvidos na


linguagem de programação Java.

O Android nos fornece um conjunto de bibliotecas C/C++ utilizadas por vários


componentes do sistema. Veja algumas das bibliotecas abaixo:

11
- System C library: Consiste em uma implementação derivada da biblioteca C
padrão baseado no sistema (libc) do BSD sintonizada para dispositivos
rodando Linux.

- Media Libraries: Baseado no PacketVideo‟s OpenCORE; são as bibliotecas


que suportam os mais diversos formatos de áudio e vídeo, incluindo também
imagens.

- Surface Manager: Responsável pelo acesso ao subsistema de exibição bem


como as múltiplas camadas de aplicações 2D e 3D;

- LibWebCore: Consiste em um web browser engine utilizado tanto no Android


Browser quanto para exibições web.

- SGL – o engine de gráficos 2D


- 3D libraries: Uma implementação baseada no OpenGL ES 1.0 APIs; As
bibliotecas utilizam aceleração 3D via hardware (quando disponível) ou o
software de renderização 3D altamente otimizado incluído no Android.
- FreeType – Biblioteca responsável pela renderização de fontes bitmap e
vector;

- SQLite – Conforme já mencionado, consiste no sistema gerenciador de banco


de dados (SGBD) relacional disponível para todas as aplicações.

1.2.3) Android Runtime

O Android é constituído por um conjunto de bibliotecas que fornece a maioria


das funcionalidades disponíveis nas principais bibliotecas da linguagem Java.

Toda aplicação Android roda em seu próprio processo, com sua própria
instância da máquina virtual Dalvik. O Dalvik foi escrito de forma a executar
várias VMs eficientemente. Ele executa arquivos .dex, que é otimizado para
consumo mínimo de memória. A VM é baseada em registros e roda classes
compiladas pela linguagem Java que foram transformadas em arquivos .dex,
através da ferramenta “dx” incluída no SDK.

O Dalvik VM foi baseado no kernel do Linux para funcionalidades subjacentes


como o encadeamento e a gestão de baixo nível de memória.

1.2.4) Linux Kernel

O Android foi projetado em cima da versão 2.6 do kernel do Linux para os


serviços centrais do sistema, tais como segurança, gestão de memória, gestão
de processos, etc. O kernel também atua como uma camada de abstração
entre o hardware e o resto do software.

12
1.3) Para qual versão do Android devemos desenvolver as
aplicações ?

Quando desenvolvemos uma aplicação para um determinado sistema


operacional, normalmente, precisamos fazer a seguinte pergunta : Para qual
versão do S.O devemos desenvolver ?

Considero esse um dos pontos mais importantes que devemos refletir antes de
desenvolvermos uma aplicação. Como neste material iremos desenvolver
aplicações voltados para a plataforma Android, devemos pensar para qual
versão da plataforma precisamos desenvolver.

1.3.1) Qual versão da plataforma Android é a mais utilizada no momento


?

Para falar a respeito dessa situação, irei mostrar aqui um gráfico que mostra
quais versões do Android são as mais usadas no mundo todo :

Gráfico de Estatística a respeito do S.O Android mais usado

O gráfico da estática acima foi feito em dezembro de 2014, onde nele podemos
observar que as versões do Android mais utilizadas são o Jelly Bean (versão
4.1 – 4.3) e KitKat (4.4), praticamente as duas estão no empate. As versões
mais antigas do Android como Eclair (versão 2.1) e Donut (versão 1.6) já nem
são mais citadas e faladas hoje em dia. A versão 5.x do Android recentemente
lançada, o Lollipop, ainda está começando a se popularizar.

13
Hoje em dia, se fomos em alguma loja para comprar um aparelho (Smartphone
ou Tablet Android) iremos adquiri-lo com o S.O Android versão 4.0 para cima.
Se olharmos por esse ponto de vista, devemos pensar em desenvolvermos
nossa aplicação utilizando, como base, a versão 4.0.

1.3.2) O Publico

Um outro fator muito importante , e que destaco aqui , é a questão O


PUBLICO. Nesse fator , a questão S.O deveria ser deixada “teoricamente” de
lado, visto que muitos usuários ainda possuem aparelhos Android com uma
versão mais antiga (como a versão 2.3 e 2.2), logo, devemos pensar também
nesses usuários para “usufruir” das nossas aplicações desenvolvidas.

1.3.3) Qual prioridade devemos dar : Publico ou Versão do S.O ?

Agora a questão é : Como combinar a questão PUBLICO e VERSÃO do S.O


para desenvolvermos a aplicação ? Se você pretende desenvolver uma
aplicação Android simples (como um pequeno sistema de cadastro), podemos,
se quisermos, dar prioridade a questão PUBLICO, procurando desenvolver
sua aplicação Android para uma versão mais antiga, porém, ainda NÃO
OBSOLETA . Agora se você desenvolver uma aplicação Android cheia de
muitos recursos, cujos componentes só existem em versões mais atuais do
sistema, devemos dar prioridade a questão VERSÃO do S.O.

14
Capitulo 2 Instalando e
Configurando a Ferramenta de
Desenvolvimento para Android

P ara a elaboração dessa nova versão do material, fiz o uso da nova


ferramenta de desenvolvimento para Android, o Android Studio
(baseado na ferramenta IntelliJ IDEA). Para que a ferramenta de
desenvolvimento funcione é necessário que você tenha instalado, antes de
tudo, a Máquina Virtual Java (de preferência a versão 7 ou posterior). Bom,
mãos a obra.

2.1) A ferramenta de desenvolvimento Android Studio

Há algum tempo atrás a ferramenta de desenvolvimento Eclipse com o plugin


ADT focado para o desenvolvimento Android (junto com o Android SDK),
deixou de ser a ferramenta de desenvolvimento oficial para Android, sendo
deixada “teoricamente” de lado (pois na prática ainda muitos programadores
usam ela).

Agora o Google adotou como ferramenta oficial de desenvolvimento o Android


Studio (baseada e inspirada na ferramenta IntelliJ IDEA) , onde podemos
desenvolver nossas aplicações para Android utilizando a linguagem de
programação Java. Vejamos a figura da IDE na imagem seguinte :

15
A ferramenta de desenvolvimento Android Studio

2.2) Observações gerais sobre o Android Studio

A ferramenta Android Studio encontra-se disponível para download no seu


atual site oficial : https://developer.android.com/sdk/index.html. Eis a
página do site carregada abaixo :

Site oficial da ferramenta Android Studio

16
NÃO BAIXE A VERSÃO SUGERIDA PELO SITE

Isso mesmo leitor, NÃO IREMOS BAIXAR a versão sugerida pelo site
(conhecida como “bundle” (pacote) que já acompanha a IDE configurada com o
Android SDK).

A versão “bundle” oferecida pelo site , além de ser bem pesada (quase 1GB),
requer do computador onde será instalado configurações mais “pesadas” como
processador, suporte a aceleração de HARDWARE e etc.

Possivelmente você (que está lendo esse material) e outras pessoas ,


encontraram muitos problemas durante a configuração e execução da versão
“bundle” recomendada pelo site (assim como eu já tive).

Em resposta a alguns leitores das minhas apostilas, recomendei que para NÃO
USEM a ferramenta Android Studio, devido a toda essa problemática
encontrada na versão “bundle” (sugerindo o bom e velho “Android Developer
Tools”).

SOLUÇÃO MAIS VIÁVEL (E ALTAMENTE) RECOMENDADA

Depois de algumas análises e pesquisas sobre o Android Studio, descobri uma


solução mais viável e prática para usarmos essa nova ferramenta (oficial) sem
muitos problemas (independente “teoricamente” da configuração de sua
máquina).

O ideal para quem for programar no Android Studio é baixarmos todos os seus
componentes de desenvolvimento “separados”, ou seja, baixar somente a IDE
Android Studio (sem o SDK) e o Android SDK (avulso) realizando suas
configurações de forma independente.

17
2.3) Baixando e configurando os componentes da ferramenta de
desenvolvimento

2.3.1) A Máquina Virtual Java

Bom, como todo bom programador deve saber, para iniciarmos o nosso
desenvolvimento com Android devemos ter instalado (como pré-requisito do
Android Studio e do Android SDK) a Máquina Virtual Java.

Como saber se eu tenho a Máquina Virtual Java instalada ?

Basta chamarmos o “Prompt de Comando” do Windows, digitando na caixa de


diálogo “Executar” (pressioando as teclas “Windows” + “R”) o seguinte
comando :

Feito isso clique em “OK” e será aberta a seguinte caixa de diálogo , conforme
podemos ver a seguir :

18
Prompt de comando do Windows

Experimente agora digitar o seguinte comando abaixo:

java –version

Se mostrar a seguinte mensagem a seguir :

Máquina Virtual Java instalada no computador

19
Significa que você tem a Máquina Virtual Java em seu computador, PORÉM,
na versão do Android Studio utilizada nesta apostila (versão 1.1.0) será preciso
que sua Máquina Virtual Java seja mais atualizada (como o do “Prompt de
Comando” acima, com “Update 75”). Caso contrário, atualize a sua Máquina
Virtual Java.

Agora, se ao digitar o comando solicitado aparecer :

Sua Máquina Virtual Java não se encontra instalada

Significa que você precisa realizar o download da Máquina Virtual Java, pois a
mesma não se encontra instalada no computador.

Para fazer o download da Máquina Virtual Java basta abrir o seguinte link em
seguida :

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-
downloads-1880260.html?ssSourceSiteId=otnpt

Feito isso deverá se abrir a seguinte página em seguida:

20
Página de download do Java 7

Procure pela versão mais recente do Java 7 (bastando rolar a página até
embaixo). Feito isso aceite os termos de contrato e realize o download do
arquivo de instalação, conforme é mostrado em seguida:2.2.1) A Máquina
Virtual Java

21
Baixando a Máquina Virtual Java

Aceitando os
termos da licença.

Baixando a Máquina Virtual Java

A instalação da Máquina Virtual Java é bem simples, basta ir seguindo toda a


orientação exibida durante a instalação (praticamente só clicando em “Next”).

2.3.2) O Android SDK

Depois de instalado a Máquina Virtual em seu computador, vamos baixar e


configurar agora o Android SDK que iremos utilizar junto com o Android Studio.

Como falei, o Android SDK que já vem configurado com a versão “bundle” do
Android Studio vai requerer muito de sua máquina (e possivelmente irá
apresentar muitos erros). Vamos baixar a versão “avulsa” dele, para isso basta
visitar o seguinte link :

https://developer.android.com/sdk/index.html?hl=i

22
No link apresentado role a página abaixo e procure a seção “SDK Tools
Only”. Veja na figura em seguida :

Seção SDK Tools Only

Nesta obra estarei fazendo uso da versão “r24.1.2” do Android SDK (qualquer
versão superior serve). Basta clicar no link : “installer_r24.1.2-windows.exe”
para abrir a seguinte caixa de diálogo em seguida :

23
Janela de Termos e Condições

Marque a opção “I have read and agree with the above terms and conditions” e
em seguida clique no botão “Download installer_r24.1.2-windows.exe”, que
será exibida a seguinte caixa de diálogo em seguida :

Caixa de diálogo de download do Android SDK

24
OBS : Caso você queira utilizar a mesma versão do Android SDK que está
sendo utilizada aqui na obra, segue abaixo o link para download :

http://dl.google.com/android/installer_r24.1.2-windows.exe

Após efetuar o download do Android SDK, vamos executar o seu instalador.


Feito veremos a seguinte tela em seguida :

Instalação do Android SDK

Ao clicarmos no botão “Next” o mesmo irá verificar se existe uma Máquina


Virtual Java instalada em seu computador (como pré-requisito), conforme
podemos ver na figura seguinte :

25
Instalação do Android SDK

Vamos clicar agora no botão “Next” para avançarmos para a próxima etapa. Na
etapa seguinte é questionado para quais usuários será destinado o acesso ao
Android SDK. Nessa opção a escolha fica por sua conta.

Instalação do Android SDK

26
Clicando em “Next” podemos escolher o local onde a ferramenta será instalada,
conforme mostra a figura seguinte :

Instalação do Android SDK

Bom, nesta etapa iremos definir COMO PADRÃO o diretório “c:\android_sdk\”,


conforme podemos ver em seguida :

Mudando o diretório de instalação

27
Ná próxima etapa definimos o nome da pasta que será exibida no menu iniciar
que servirá como atalho para iniciarmos as ferramentas oferecidas pelo
Android SDK. Aqui não precisaremos modificar nada, deixe como está.

Instalação do Android SDK

Clique no botão “Install” para iniciarmos a instalação, conforme mostra a


próxima figura :

28
Instalação do Android SDK

Após concluir a instalação do Android SDK clique no botão “Next”, conforme


mostra a próxima figura :

Instalação do Android SDK

29
Na próxima tela deixe marcado a opção “Start SDK Manager” e clique no botão
“Finish” para finalizarmos e iniciarmos a execução do “SDK Manager”.

Finalizando a instalação do Android SDK

Após clicarmos no botão “Finish” será aberta a seguinte caixa de diálogo do


“Android SDK Manager”, conforme mostra a figura seguinte :

30
Caixa de diálogo “Android SDK Manager”

Através do Android SDK iremos baixar e configurar todos os recursos


necessários que serão utilizados durante o desenvolvimento das nossas
aplicações para Android no Android Studio.

Aqui para testarmos e executarmos as nossa aplicações em Android faremos


uso de um emulador que irá simular um dispositivo com o sistema Android. No
momento do desenvolvimento deste material, a versão oferecida do sistema
Android erá a versão 5.1 (Lollipop). Essa versão ainda não ganhou
popularidade, logo, iremos utilizar a versão 4.0.3 (Ice cream Sandwish), sendo
esta a versão mais utilizada pelo mundo no momento em dispositivos Android.

31
Vamos no Android SDK “desmarcar” todas as opções marcadas por padrão
pela ferramenta e marcar as opções a seguir :

1) Marque “Android SDK Platform-tools” (marcar a versão mais atual)


2) Marque “Android SDK Build-tools” (marcar a versão mais atualizada)

3) Expanda o item “Android 4.0.3 (API 15)” e marque a opção “ARM EABI
v7 System Image”.

32
4) Expanda a pasta “Extras” e marque as opções “Android Suport Library”
e “Google USB Driver”

Depois disso vamos clicar no botão “Install 5 Packages”, conforme indica a


próxima figura :

Clicando no botão “Install 5 packages”

33
Feito isso será aberta a seguinte caixa de diálogo a seguir:

Caixa de diálogo – Choose Packages to Install

Observe que todos os itens de instação (da seção “Packages”) estão marcados
com um “X” vermelho (conforme destacado acima). Para solucionarmos isso
basta marcarmos a opção “Accept License”, conforme mostra a figura a seguir :

Marcando a opção “Accept License”

34
Feito isso teremos o seguinte resultado :

Caixa de diálogo – Choose Packages to Install

Clique no botão “Install” para instalarmos os itens selecionados. Feito isso será
exibida a seguinte caixa de diálogo a seguir :

35
Instalação dos pacotes selecionados

Aguarde a instalação e configuração de todos os pacotes através do Android


SDK Manager. Depois disso, podemos fechar o Android SDK Manager.

2.3.3) O Android Studio

Agora para finalizar, vamos baixar e configurar o Android Studio. O download


encontra-se na mesma página onde baixamos o Android SDK
(https://developer.android.com/sdk/index.html?hl=i)

Após carregar a página, role até abaixo até encontrar a seção “All Android
Studio Packages”, conforme mostra a figura seguinte :

36
Seção All Android Studio Packages”

Agora vamos instalar a versão do Android Studio sem o SDK incluso (pois já
baixamos ele por fora e configuramos), clicando no link indicado a seguir :

Selecionando a versão do Android Studio sem o SDK incluso

37
Feito isso irá se abrir a caixa de diálogo de termos e condições (como já vimos
no “Android SDK”). Confirme os termos de condições e clique no botão de
“Download”. Feito isso irá se abrir a caixa de diálogo abaixo :

Caixa de diálogo – Download do Android Studio

OBS : Caso você queira utilizar a mesma versão do Android Studio que
está sendo utilizado neste material, segue abaixo o link para download :

https://dl.google.com/dl/android/studio/install/1.1.0/android-studio-ide-
135.1740770-windows.exe

Após efetuar o download do Android Studio vamos executar o seu arquivo de


instalação. Feito isso será aberta a seguinte caixa de diálogo a seguir :

38
Instalação do Android Studio

Vamos clicar no botão “Next” para avançarmos com a instalação. Feito isso
será aberta a seguinte caixa de diálogo a seguir :

Instalação do Android Studio

39
Por padrão as opções “Android Virtual Device” e “Performance (Intel ® HAXM)”
estão selecionadas. Vamos desmarcar todas as duas opções, conforme
mostra a figura seguinte :

Desmarcando as duas opções acima

Sobre a opção “Performance (Intel ® HAXM)”

Possivelmente essa opção NÃO DEVE TER APARECIDO em seu


computador. Calma, está tudo bem. Essa opção só é exibida dependendo
da configuração de seu PC. Essa opção permite o recurso de simulação de
“aceleração de hardware” (suportado por computadores com uma
configuração mais “pesada”), porém, ela não será utilizada neste material.

Depois de seguir as orientações acima, vamos clicar em “Next”. Feito isso será
aberta a seguinte caixa de diálogo a seguir :

40
Instalação do Android Studio

Vamos deixar o diretório “default‟ de instalação do Android Studio. Clique em


“Next” para irmos para a próxima etapa, conforme mostra a figura :

Instalação do Android Studio

41
Na tela da figura anterior, basta clicarmos no botão “Install” para instalarmos o
Android Studio em nosso computador. Vejamos o resultado na figura seguinte :

Instalando o Android Studio


Aguarde a instalação se concluída, conforme podemos ver abaixo:

Instalação concluída

42
Clique em “Next” e na próxima tela vamos clicar em “Finish” para iniciarmos a
execução do “Android Studio”, conforme podemos ver na figura seguinte :

Instalação do Android Studio concluída

Após clicarmos no botão “Finish”, será aberta a seguinte caixa de diálogo


abaixo, do Android Studio :

Caixa de diálogo – Complete Installation

43
Nessa caixa de diálgo é perguntado se você gostaria de importar os projetos
desenvolvidos em uma versão anterior do Android Studio. Supondo que estou
instalando o Android Studio pela primeira vez, vamos deixar marcada a
segunda opção , conforme mostra a figura abaixo :

Deixando marcada a segunda opção

Vamos clicar no botão “OK” para que possamos inicializar o Android Studio,
conforme podemos ver na figura seguinte :

44
Logo em seguida deverá ser mostrada a seguinte caixa de diálogo a seguir,
solicitando o download do Android SDK através do Android Studio :

Caixa de diálogo – Android Studio Wizard

Bom, como já instalamos o Android SDK, não será preciso realizar nenhum
download de SDK. Logo, vamos clicar no botão “Fechar” da caixa de diálogo e
em seguida será mostrada a seguinte mensagem :

Caixa de diálogo

45
Na caixa de diálogo que é exibida vamos desmarcar a primeira opção para
marcamos a opção de baixo “Do not re-run the setup wizard”.

Caixa de diálogo

Feito isso vamos clicar em “OK”. Em seguida será exibida a seguinte caixa de
diálogo a seguir :

Caixa de diálogo – Android Setup Wizard

46
A primeira coisa que iremos fazer agora, antes de criarmos qualquer projeto, é
configurar o Android SDK para atuar em conjunto com o Android Studio. Para
isso, vamos clicar na opção “Configure”, conforme podemos ver abaixo :

Selecionando a opção “Configure”

Na próxima caixa de diálogo que surge selecione a opção “Project Defaults” :

Selecionando a opção “Project Defaults”

Feito isso, vamos selecionar agora a opção “Project Structure” :

Selecionando a opção “Project Structure”

47
Feito isso irá se abrir a seguinte caixa de diálgo a seguir :

Caixa de diálogo – Project Structure

Nesta tela iremos definir o diretório onde nós instalamos o nosso Android SDK.
Para isso vamos clicar no botão “Browser” (...), conforme é indicado na figura a
seguir :

Selecionando o botão “Browser”

48
Feito isso será aberta a seguinte caixa de diálogo a seguir :

Caixa de diálogo – Choose Android SDK Location

Se lembra que instalamos o nosso “Android SDK” separadamente no diretório


“c:\android-sdk” ? Pois bem, vamos apontar para o diretório de instalação do
“Android SDK”, conforme podemos ver na figura seguinte :

Apontando para o diretório do Android SDK

49
Depois de apontar para o diretório do Android SDK, podemos clicar no botão
“OK” para finalizarmos o processo. Veja o resultado :

Diretório do SDK definido

Na caixa de diálogo da figura acima podemos clicar no botão “OK” para


confirmarmos o diretório do Android SDK.

Depois disso, feche o Android Studio.

50
Capitulo 3 Começando a
programar no Google Android

D epois de tudo configurado e instalado, conforme foi mostrado no


capítulo anterior, vamos a partir de agora começar a desenvolver
nossas aplicações para a plataforma Android usando o Android Studio.

Vamos primeiramente abrir e executar o nosso Android Studio . Quando a


ferramenta é executada pela primeira vez e nenhum projeto anterior é criado
nele, é exibida a seguinte tela abaixo:

Caixa de diálogo – Quick Start

Para criarmos um novo projeto no Android Studio basta clicar no botão “Start a
new Android Studio project”, conforme indicado na figura em seguida:

51
Criando um novo projeto

Feito isso será aberta a seguinte caixa de diálogo , conforme mostra a próxima
figura:

Criando um novo projeto no Android Studio

Na caixa de diálogo acima informarmos o nome da nossa aplicação


(Application Name), o nome da empresa (Company Domain) e o local onde o
mesmo será salvo (Project location).

52
No campo “Application Name” vamos definir o nome da nossa aplicação, que
irá se chamar “HelloWorld” (sem aspas, é claro). No campo “Company Domain”
vamos digitar “usuario.android” (expresso como nome de pacote Java). Agora
em “Project location” , que indica onde o projeto será criado, fica por sua
escolha, PORÉM, o diretório (caminho) que você escolher não deverá conter
espaços em branco, fica a dica . Vejamos como ficou na figura abaixo :

Criando um novo projeto no Android Studio

Observe que um dos campos, que ainda não citei acima , é preenchido
automaticamente (o campo “Package name”). Ele é formado pelo nome da
aplicação “concatenado” com o nome do campo “Company Domain”. Vejamos
abaixo :

O campo “Package name”

53
Depois de preencher as informações acima necessárias, clique no botão “Next”
para continuarmos. Feito isso será exibida a seguinte tela abaixo:

Criando um novo projeto no Android Studio

No formulário acima especificamos para quais dispositivos iremos desenvolver


as nossas aplicações. Nesta apostila estaremos desenvolvendo aplicações
para Smartphones e Tablets Android em geral, logo, deixaremos a opção
“Phone and Tablets” marcada (as opções de TV e Android Wear só é destinada
para sistemas Android cuja versão seja 5.x, o Lollipop).

Observe que em “Mininum SDK” é especificada a versão mínima do Android


instalada para desenvolvimento das aplicações, que neste caso é a versão
4.0.3 que instalamos através do Android SDK. Deixaremos esta opção
selecionada (até porque também só existe essa opção).

Na próxima tela (clicando em “Next”) é aberto o seguinte formulário abaixo :

54
Criando uma nova Activity

Toda classe (arquivos “.java”) na plataforma Android, que representa uma


aplicação, é considerada uma “atividade” (Activity). Para isso, precisamos
definir uma atividade que vai representar a nossa aplicação Android. Para isso
vamos criar uma nova atividade “em branco” (Blank Activity), conforme a opção
selecionada na figura acima.

Com a opção “Blank Activity” selecionada, vamos clicar no botão “Next” e


surgirá a seguinte tela abaixo :

55
Informações da Activity

Na seção acima definimos o nome da nossa atividade (Activity Name) assim


como o nome do arquivo XML que vai representar a tela da nossa aplicação
(Layout Name), o título que será exibido na aplicação (Title) e o nome do
arquivo que irá gerenciar os itens de menus a serem exibidos na aplicação
(Menu Resource Name). Por padrão o nome da “Activity” é “MainActivity”, e o
nome do arquivo de layout é “activity_main”. Vamos alterar as informações
conforme os dados abaixo :

Activity Name : HelloActivity


Layout Name : activity_hello
Title : Hello Android
Menu Resource Name : menu_hello

Vamos conferir como ficou na figura seguinte :

56
Informações da Activity

Por padrão, como na primeira seção, quando mudamos o conteúdo do campo


“Activity Name”, o campo “Layout Name” é alterado automaticamente. Caso
deseje você poderá escolher outros nomes para o campo alterado
“automaticamente” sem afetar o nome da atividade.

Depois disso, clique em “Finish” para nosso projeto possa ser gerado. O
resultado você confere na figura seguinte:

57
Projeto criado

Se por caso for exibido a seguinte mensagem abaixo :

Mensaegem de erro

Feche esta caixa de diálogo e prossiga para a próxima etapa.

58
Conhecendo a estrutura geral de um projeto no Android Studio

A primeira coisa que visualizamos que nos chama atenção é a tela do


dispositivo com a frase “Hello world”, conforme podemos conferir na figura
seguinte:

Visualização da tela do dispositivo

Se observamos a figura anterior, ao lado da tela do dispositivo temos uma


paleta de componentes disponíveis que podemos utilizar para construir as
nossas aplicações. Explicarei mais em detalhes no próximo capítulo.

Se visualizarmos o lado esquerdo, existe uma seção chamada “Project”, onde


nela existe uma pasta chamada “app” (que é o nosso projeto), constituído por
vários subdiretórios , que por sua vez, possui seus respectivos arquivos,
conforme demonstra a figura seguinte:

59
Visualização dos diretórios do projeto

Irei comentar agora toda a estrutura de um projeto Android. Ele é composto por
várias pastas e arquivos, cada um com uma finalidade em especifico.

O diretório “app” (application)

Vamos começar conhecendo primeiramente o diretório “app” (application).


Dentro desse diretório temos todos os arquivos principais de nossa aplicação,
distribuído pelos seus diretórios. Ao expandirmos o diretório “app” temos as
pastas “manifest” e “java”. Dentro da pasta “manifest” temos o arquivo
“AndroidManifest.xml”, com o seguinte código abaixo :

60
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="android.usuario.helloandroid" >

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".HelloActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />


</intent-filter>
</activity>
</application>

</manifest>

Esse arquivo é considerado o “sistema nervoso” do Android, é através dele que


definimos todas as permissões e configurações primordiais de nossa aplicação
para que a mesma seja executada (não iremos fazer nenhuma modificação
nesse arquivo).

Dentro da pasta “java” temos as nossas classes (arquivos “.java”) que fazem
parte da nossa aplicação. Observe que dentro da nossa pasta existem dois
pacotes de mesmo nome (“android.usuario.helloandroid”), sendo o último
voltado para testes, onde dentro dele existe uma classe chamada
“AndroidTest.java” , com o seguinte conteúdo abaixo :

Visão geral do arquivo “ApplicationTest.java”

61
No primeiro pacote existe um arquivo chamado “HelloActivity.java” , que é a
classe principal do programa, que é através dela que definimos todos os ações
da nossa aplicação :

Visão geral do arquivo “HelloActivity.java”

O arquivo aberto acima (HelloActivity.java) possui o seguinte conteúdo:

package android.usuario.helloandroid;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class HelloActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_hello);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is
//present.
getMenuInflater().inflate(R.menu.menu_hello, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

62
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

Diferentemente das aplicações comuns em Java (J2SE), toda classe que


representa uma aplicação Android deve ser derivada da classe Activity
(atividade), conforme você pode ver através do seguinte trecho de código:

public class HelloActivity extends Activity {


:

A classe “HelloActivity” possui como método principal o onCreate. A primeira


linha de código presente neste método faz chamada ao método onCreate da
classe base (a classe Activity), conforme podemos conferir abaixo:
super.onCreate(savedInstanceState);

Logo após esse método vem o método setContentView, responsável por exibir
a tela da minha aplicação baseado nos layouts “xml". Por padrão ele chama o
arquivo “activity_hello.xml”.

O diretório “res” (resources)

Dentro da estrutura de um projeto Android existe um diretório chamado “res”


(resources), onde dentro dele colocamos todos os recursos que podemos
utilizar em um programa Android (como imagens, sons, músicas e etc). Vamos
conhecer os subdiretórios existentes dentro dessa pasta e a finalidade de cada
um deles.

O diretório “drawable”

O diretório “drawable” presente dentro da pasta “res” do nosso projeto possui


uma única finalidade : armazenar imagens que serão visualizadas dentro de
uma aplicação Android. Uma coisa que precisa ser reforçada aqui é que os
arquivos de imagens presentes nessa pasta não podem estar escritos de
qualquer forma. Os arquivos a serem copiados dentro desse diretório devem
possuir somente letras minúsculas (de “a” até “z”), números (de “0” a “9”) e
underline (“_”).

63
O diretório “layout”

O diretório “layout” armazena todos os arquivos referentes as telas de uma


aplicação Android, que normalmente são arquivos “.xml”. Para aqueles que
conhecem a programação de HTML com JavaScript para a construção de
páginas Web, no Android é similar, é a combinação de Java com XML para a
construção de aplicativos Mobile.

O diretório “values”

Um dos recursos que o Android permite que usemos na construção das telas
de nossa aplicação são “constantes”. Como bom programador que todos nós
somos, sabemos que uma “constante” nada mais é do que um endereço de
memória que vai armazenar um determinador valor, que será único até o fim da
execução do programa. Mas, o que isso tem a ver com as telas da nossa
aplicação ? Vou explicar.

Normalmente usamos constantes para armazenar valores fixos que,


naturalmente, estarão presentes na maior parte do seu programa. É muito
comum criarmos um título como nome de uma aplicação (como por exemplo :
“Alpha Software”), que vai estar presente na maioria das telas (ou em todas) da
sua aplicação. Imagine você digitar “manualmente” o nome de seu software em
todas as telas da sua aplicação, seria um processo trabalhoso você não acha
? Agora imagine “futuramente” que você precise “mudar” o nome de sua
aplicação ? Você terá novamente o mesmo trabalho para digitar em cada tela o
nome da nova aplicação, sem dúvida. Usando constantes, você não terá esse
trabalho.

Dentro dessa pasta temos os seguintes arquivos:

- “strings.xml” : Esse arquivo guarda constantes relacionadas à nossa


aplicação em geral (como o nome da aplicação, o título que vai aparecer na
aplicação e etc.).

- “dimen.xml” : Esse arquivo guarda constantes relacionadas as dimensões


que podemos utilizar em nossa aplicação.

- “styles.xml” : Esse arquivo guarda constantes relacionadas à estilos que


podemos utilizar em nossa aplicação.

64
O diretório “mipmap”

O diretório “mipmap” possui a mesma características do diretório “drawable” (


armazenar imagens) , porém, o mesmo foi destinado a armazenar nesta pasta
somente imagens referentes ao ícone da nossa aplicação Android, que possa
se comportar em várias resoluções de tela.

O diretório “menu”

Nesse diretório é armazenado o arquivo responsável por gerenciar e exibir os


itens de menu em noss aplicação. Por padrão o arquivo que contem os itens de
menu possui a seguinte estrutura abaixo :

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".HelloActivity">
<item android:id="@+id/action_settings"
android:title="@string/action_settings"
android:orderInCategory="100" android:showAsAction="never" />
</menu>

Os itens de menu podem ser adicionados através do uso das tags específicas
do XML para esse propósito (veremos isso mais adiante).

Visão geral da ferramenta de desenvolvimento

Acabamos de entender e conhecer acima toda a estrutura de diretórios de um


projeto Android no Android Studio. Agora vamos dar uma visão geral na nossa
ferramenta de desenvolvimento (IDE) para a plataforma Android.

65
(6)
(1)

(4)

(2)

(3)
(5)
Visão geral da ferramenta de desenvolvimento

Vamos entender as numerações indicadas na figura anterior :

Na indicação (1) temos a paleta de componentes onde os mesmos estão


separados por seções. As seções são : Widgets , Text Fields, Layouts ,
Containers, Date e Time , Expert e Custom (Componentes personalizados,
normalmente criados pelo usuário e entre outros recursos).

Na indicação (2) temos um preview de como ficará a interface da nossa


aplicação quando a mesma for executada, nessa interface podemos arrastar e
soltar os componentes (indicados por (1)) , construindo assim a nossa
aplicação.

Na indicação (3) temos as propriedades do componente (Properties). Quando


selecionamos um componente, as suas propriedades são visualizadas e assim,
conforme nossa necessidade, podemos alterá-las.

Na indicação (4) temos uma seção chamada “Component Tree”. Nessa seção
podemos ver , de forma hierárquica, todos os componentes que estão
presentes na tela da nossa aplicação

Na indicação (5) podemos alternar entre o modo gráfico (“Design”, onde temos
a visualização da tela da aplicação) e o modo XML (“Text”, onde visualizamos o

66
código XML do arquivo, que corresponde a estrutura que forma a tela de nossa
aplicação).

Na indicação (6) podemos alterar os temas que podemos utilizar em nossa


aplicação Android, orientação da tela do dispositivo (retrato ou paisagem),
resolução da tela do dispositivo e etc. A maioria das opções disponíveis nessa
seção só terá efeito em tempo de projeto. É necessário configurar as mesmas
opções para que elas aconteçam em tempo de execução (quando você
executa o emulador ou dispositivo real), de acordo com a necessidade.

Executando a nossa aplicação

Agora que já tivemos uma visão geral da ferramenta de desenvolvimento e do


projeto em Android (com toda a sua estrutura de diretórios e arquivos),
podemos a partir de agora executarmos a nossa aplicação. Mas antes de
executarmos a nossa aplicação, irei fazer alguns comentários. Observe que
quando criamos um projeto em Android, na tela do dispositivo já tem um
componente TextView (situado na paleta de componentes , dentro da seção
“Widgets”) onde nele é exibida a frase “Hello world”. Quando executarmos a
nossa aplicação através do emulador, ela sairá idêntica como está sendo
exibida no projeto (uma tela “em branco” com a frase “Hello world”).

Como fazer para executarmos a nossa aplicação ? Para executarmos a nossa


aplicação basta irmos no menu “Run” / “Run „app‟ " (ou pressionar as teclas
SHIFT+F10) . Uma outra forma também é clicando no botão pressente na
barra de ferramentas :

Botão “Run” do Android Studio

Feito isso será aberta a seguinte caixa de diálogo em seguida :

67
Caixa de diálogo – Choose device

Para executarmos a nossa aplicação iremos fazer uso de um dispositivo virtual


(conhecido como “Android Virtual Device”), porém, esse dispositivo virtual não
está criado (lembre-se : simplesmente baixamos através do Android SDK a
imagem do sistema Android 4.0.3 ,mas, ainda não efetuamos nenhuma
configuração e criação de dispositivo).

Vamos nesse exato momento criar um dispositivo virtual que irá executar as
nossas aplicações Android. Para criarmos um dispositivo basta clicarmos no
botão (...) presente ao lado do campo “Android virtual device”, conforme indica
a figura a seguir :

Criando um novo dispositivo

68
Feito isso será aberta a seguinte caixa de diálogo abaixo :

Android Virtual Device Manager

Vamos clicar agora no botão “Create a virtual device”. Feito isso será aberta a
seguinte tela :

69
Virtual Device Configuration

Na guia “Category” vamos deixar marcado a opção “Phone”, conforme é


mostrado na figura a seguir :

Escolhendo a categoria

70
Como modelo de smatphone utilizado para executar as nossas aplicações
selecione a opção “3.2 QVGA (ADP2)”,conforme indicado na figura abaixo :

Selecionado o modelo

Agora vamos clicar no botão “Next” para avançarmos para a próxima etapa,
conforme indica a próxima figura:

Virtual Device Configuration

71
Muito bem, nesta seção escolhemos o sistema Android que iremos utilizar , que
no caso será o que baixamos através do Android SDK (a versão 4.0.3 Ice
Cream Sandwish). Primeiramente, certifique-se de que a opção “Show
downloadable system images” ESTA DESMARCADA, se estiver marcada,
DESMARQUE (já que não iremos fazer nenhum donwload de imagem
nenhuma) :

Deixar esta opção DESMARCADA

Já que iremos fazer do sistema de imagem do Android 4.0.3 que baixamos,


basta simplesmente clicarmos em “Next” para avançarmos para a próxima tela,
conforme mostra a figura a seguir :

Virtual Device Configuration

No campo “ADV Name” vamos especificar o nome do nosso dispositivo virtual,


que se chamará “Emulador” . Logo, vamos digitar “Emulador” (sem aspas, é
claro).

72
As demais configurações vamos deixá-las como está (default). Feito isso,
vamos clicar no botão “Finish” para que o nosso dispositivo virtual possa ser
gerado. Vejamos a figura abaixo :

Dispositivo virtual criado

Agora vamos fechar a janela da figura acima e em seguida na caixa de diálogo


“Choose Device” vamos selecionar o nosso emulador criado, conforme
podemos ver na figura seguinte :

73
Selecionando o emulador

Depois de selecionarmos o emulador a ser executado basta clicarmos no botão


“OK”. Feito isso nosso emulador irá executar, conforme mostra a figura
seguinte :

74
Emulador do Android em Execução

No início da execução do emulador mostra o título Android, conforme você vê


na figura acima. Depois vem um outro título escrito “Android”, um pouco maior
e cinza , com uma animação. Esse processo normalmente demora em torno
de 2 a 10 minutos (dependendo da sua máquina. É recomendável que você
tenha no mínimo 1GB de memória e um processador bem rápido para um bom
desempenho da execução) para a aplicação ser exibida, mesmo sendo essa
aplicação algo muito simples.

Passado o tempo que citei acima, será mostrada a nossa aplicação em


execução, conforme podemos ver na figura seguinte:

75
Emulador do Android em Execução

Esse emulador já vem com uma série de recursos como Navegador,


Aplicações de demonstração, Mapas, Lista de contatos e etc.

Se você neste exato momento fechou o emulador após a execução da


aplicação, vou te dizer uma coisa: “Não era para você ter feito isso”. Se você
esperou muito tempo para ver essa aplicação em execução, ao executar
novamente a aplicação, possivelmente você vai esperar o mesmo tempo. Ao
executar pela primeira vez o emulador, e caso vá executar outros programas,
minimize o emulador ao invés de fechar, pois se você esperou muito tempo
para executar esse programa, com ele minimizado, ao executar outro
programa, o Android Studio vai fazer uso do emulador já aberto em vez de abrir
outro, com isso a aplicação levará em torno de 7 a 12 segundos em média
para ser executada. Nunca esqueça isso!

76
Bom, vamos fazer algumas modificações em nossa aplicação. Minimize o
emulador e vamos no projeto. Para começar vamos mudar o texto que está
sendo exibido na tela. Selecione o texto (componente TextView), conforme
demonstra a figura seguinte:

Componente selecionado

Se observarmos no lado direito, temos as propriedades do componente


selecionado, conforme demonstra a figura seguinte:

Propriedades do componente selecionado (TextView)

77
Para alterarmos o conteúdo do texto, devemos alterar a propriedade “text”
(conforme você pode ver na figura acima). Se você observar, o conteúdo que
está dentro dessa propriedade é “@string/hello_world”. Mas espere ai, o que
significa esse expressão se o conteúdo que está sendo exibido é uma frase ?
Essa expressão significa que o conteúdo exibido na tela está dentro de uma
“constante”.

Quando vimos a estrutura de um projeto Android, nós conferimos que dentro


dele existe um diretório chamado “values”, onde dentro do mesmo havia um
arquivo que guardava constantes em geral certo ? Esse arquivo é o
“strings.xml”. Dentro desse arquivo existe uma constante chamado
“hello_world” que armazena a seguinte frase “Hello World”, logo, o conteúdo
exibido por esse componente na tela na verdade é o conteúdo da constante
“hello_world”, situado dentro do arquivo “strings.xml”, por isso o uso da notação
“@string/hello_world”.

Vamos abrir o arquivo “strings.xml” para visualizarmos seu conteúdo, conforme


demonstra a figura seguinte :

O arquivo “strings.xml”

Se observamos o conteúdo dele, temos disponíveis 3 constantes “pré-


definidas” e uma delas e a constante “hello_world”.

Na estrutura XML do arquivo “strings.xml” vamos adicionar uma nova constante


chamada “frase”, com o seguinte conteúdo “Estou aprendendo Android”. Veja
como ficará conforme indica a figura seguinte :

78
Constante criada

Agora vamos voltar para o arquivo “activity_hello.xml” simplesmente clicando


na guia de arquivos, conforme demonstra a figura seguinte:

A guia “actitivy_hello.xml”

Agora vamos na propriedade “text” e em seguida clique no botão (...) que está
aparecendo ao lado do conteúdo da propriedade. Veja abaixo :

Alterando o conteúdo da propriedade

79
Feito isso será aberta a seguinte caixa de diálogo abaixo :

Caixa de diálogo – Resources

Observe que nessa caixa de diálogo temos todas as constantes que existem
dentro do arquivo “strings.xml”, incluindo a nossa constante “frase” que
acabamos de criar. Vamos selecionar a nossa constante e em seguida clique
no botão “OK”. O resultado você confere em seguida :

Conteúdo modificado

80
Depois de alterar o conteúdo da TextView vamos executar novamente a
aplicação, podemos fazer isso realizando o mesmo procedimento já explicado
anteriormente. Possivelmente ao executar a aplicação novamente, deverá ser
exibida essa caixa de diálogo :

Caixa de diálogo – Choose Device

Bom, vamos continuar a usar o emulador que já está aberto (identificado por
“emulator-5554”, no campo “Serial Number”). Vamos marcar a opção “Use
same device for future launches” :

Marcar esta opção

Depois de marcar, clique em “OK” para executarmos a nossa aplicação.


Vejamos o resultado :

81
Aplicação em execução

Toda tela de uma aplicação é uma estrutura de layout que permite organizar e
distrbuir os componentes nela inseridos conforme a nossa necessidade. A
estrutura de layout dessa versão do Android SDK, que e inserida por padrão
toda vez que criamos este um projeto em Android, é a “RelativeLayout”. Essa
estrutura permite que os componentes nela inseridos possam ser organizados
e distribuídos de forma “relativa” a outros componentes presentes também na
tela.

A estrutura RelativeLayout

82
Nas versões mais antigas do Android SDK (usado muito em conjunto com
a IDE Eclipse) a estrutura de layout padrão da tela do dispositivo era a
“LinearLayout”. Essa estrutura “organiza” os componentes de forma que
eles sejam distribuídos tanto na horizontal (um ao lado do outro) quanto na
vertical (um abaixo do outro).

Vamos agora usando a paleta de componentes arrastar e soltar na tela do


dispositivo o componente TextView (que se encontra na seção “Widgets”, com
o título “Plain TextView”). Acompanhe o processo abaixo :

1) Clique e mantenha
pressionado

3) Verifique as
propriedades
acima.
2) Arraste até aqui.

Adicionando o componente

A estrutura RelativeLayout distribui os componentes de forma relativa,


portando ao arrastar o componente solicitado verifique se as propriedades do
mesmo (indicado pela caixa “3”) possui os atributos alignParentLeft e
bellow=textView, indicando que o componente estará alinhado a esquerda e
abaixo do texto acima. Veja o resultado:

Componente inserido na tela

83
Quando alteramos o conteúdo (texto) do primeiro componente TextView
tivemos que fazer uso das constantes (situado dentro do arquivo “strings.xml”),
mas, não somos obrigamos a usá-las. Podemos digitar “manualmente” o texto
a ser exibido na propriedade “text” do componente. Vamos digitar na
propriedade “text” do componente a seguinte frase “Através deste material”
(sem aspas, lógico). Veja o resultado na figura seguinte:

Conteúdo (texto) do componente alterado

Vamos salvar as alterações feitas no arquivo e em seguida executar a


aplicação para conferir o resultado, como demonstra a figura seguinte:

84
Aplicação em execução

Conforme já havia mencionado, toda estrutura que constitui a tela de uma


aplicação em Android nada mais é do que um código XML. Para visualizarmos
o código XML basta clicar na guia “Text”, situado ao lado da guia “Design” .
Veja o seu código abaixo:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".HelloActivity">
<TextView android:text="@string/frase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Através deste material"
android:id="@+id/textView2"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true" />
</RelativeLayout>

85
E ai, está entendo aos poucos como se faz aplicações Android ? Com certeza
que sim!

Como podemos ver no Android Studio ele já oferece um utilitário que permite a
criação de aplicações de forma rápida, simplesmente arrastando e soltando os
componentes. Isso acelera o processo de desenvolvimento de aplicações.

86
Capitulo 4 Conhecendo as
widgets do Android

T oda aplicação Android normalmente é formado por um ou mais widgets,


que são componentes gráficos que constituem uma aplicação. A partir
de agora iremos conhecer os widgets básicos disponíveis e oferecidos
pela plataforma Android, para o desenvolvimento das aplicações. De acordo
com alguns widgets que fomos conhecendo, vamos desenvolver aplicações
que demonstrem o uso deles.

No capítulo anterior aprendemos a desenvolver nossa primeira aplicação em


Android, algo absolutamente simples. Agora vamos conhecer melhor a paleta
de componentes onde nela estão disponíveis todos os widgets que podemos
utilizar em uma aplicação (todos eles separados por categorias).

4.1) A paleta de componentes e suas widgets

A ferramenta de desenvolvimento do Android SDK nos oferece uma gama de


componentes (ou widgets, como preferirem) que podemos utilizar em uma
aplicação a ser construída. Podemos conferir esses widgets na paleta
mostrada pela figura seguinte:

87
A paleta de componentes

Conforme havia falado, os componentes estão distribuídos nas mais diversas


seções presentes na paleta de componentes. Vamos conhecer as seções
desta paleta e os componentes nela presentes.

4.1.1) A seção “Widgets”

Nesta seção estão disponíveis os componentes mais básicos que podem ser
utilizados em uma aplicação Android, são eles:

TextView : Componente que funciona como se fosse uma Label (“rotulo”),


onde nele podemos mostrar alguma informação, mensagem e etc Na nossa
primeira aplicação tivemos a oportunidade de usarmos esse componente. Ele
está disponível em quatro estilos (Plain , Large, Medium e Small). Veja os
ícones desse componente na imagem seguinte:

88
Ícones do componente TextView (Versão normal, large, medium e small)

Button : Componente que representa um botão onde podemos clicar nele e


também atribuir ações que podem ser executadas caso isso aconteça. Ele se
encontra nas versões normal e small (pequena): Veja seu ícone na paleta de
componentes :

Ícones do componente Button (Versão normal e small)

CheckBox : Esse componente funciona como uma opção, onde nele podemos
marcá-lo e desmarcá-lo. Veja o ícone do componente abaixo:

Ícone do componente CheckBox

RadioButton : Esse componente funciona como uma opção, normalmente


utilizado quando temos uma situação onde devemos escolher uma entre várias
opções (como numa prova de múltipla escolha). Veja o ícone desse
componente na paleta de componentes :

Ícone do componente RadioButton

Spinner : Esse componente nada mais é do que uma caixa de combinação


(também conhecido como Combo Box). Nesse componente podemos adicionar
vários itens que poderão ser selecionados pelo usuário através do mesmo.
Veja o ícone desse componente na figura seguinte:

Ícone do componente Spinner

ProgressBar : Esse componente exibe uma barra de progresso na tela e está


disponível em 3 versões (normal e large (giratórias) e horizontal (barra)). Veja
seus ícones abaixo:

89
Ícone do componente ProgressBar

RatingBar : Esse componente é bastante utilizado para fazer sistemas de


votações e classificações (aqueles sistemas em que você define se uma coisa
é ruim, regular, boa, ótima e etc). Veja o ícone do componente na figura
seguinte:

Ícone do componente RatingBar

ImageView : Esse componente simplesmente serve para exibir imagens que


se colocam nele. Os formatos de imagens suportados por esse componente
são : PNG, JPEG, BMP, GIF. Veja o ícone desse componente em seguida:

Ícone do componente ImageView

ImageButton : Esse componente é derivado do componente Button só que ao


invés de exibir um texto dentro dele, exibe uma imagem. Os formatos de
imagens suportados por esse componente são : PNG, JPEG, BMP, GIF. Veja o
ícone desse componente abaixo:

Ícone do componente ImageButton

Gallery : Esse componente funciona como uma galeria de imagens, onde nele
podemos adicionar várias imagens e ao mesmo, visualiza-las. Veja o ícone
desse componente abaixo:

Ícone do componente Gallery

90
4.1.2) A seção “Text Fields”

Nesta seção estão disponíveis todos os componentes baseados em caixas de


texto, e todos eles são baseados no componente EditText. Vamos ver alguns
desses componentes abaixo:

Plain Text: Esse é o modelo de caixa de texto “padrão”, que permite a


digitação de qualquer tipo de caractere. Veja seu ícone abaixo:

Ícone do componente Plain Text

Person Name: Esse modelo de caixa de texto permite a digitação de nomes


pessoais (colocando a inicial de cada palavra em maiúsculo). Veja seu ícone
abaixo:

Ícone do componente Plain Text

Password: Esse modelo de caixa de texto permite a digitação de senhas e


está disponível tanto na versão alfanumérica quanto na numérica (Numeric).
Veja os ícones de componente abaixo:

Ícones do componente Password (na versão normal e numérica)

E-mail: Esse modelo de caixa de texto permite a digitação de e-mail. Veja o


ícone de componente abaixo:

Ícone do componente E-mail

Phone: Esse modelo de caixa de texto permite a digitação de telefones. Veja o


ícone de componente abaixo:

Ícone do componente Phone

91
Multiline Text : Esse modelo de caixa de texto permite várias linhas de texto,
de acordo com a nossa necessidade. Veja o ícone desse componente abaixo:

Ícone do componente Multiline Text

4.1.3) A seção “Layouts”

Nesta seção estão disponíveis estruturas de layouts que podemos utilizar em


nossas aplicações para organizar a disponibilidade dos componentes dentro da
tela, no dispositivo. Vejamos esses componentes:

LinearLayout : Essa estrutura (conforme já havia mencionado) organiza os


componentes dentro dela de forma que os mesmos sejam distribuídos de forma
horizontal (um ao lado do outro) ou vertical (um abaixo do outro), de acordo
com a necessidade. Veja os ícones desse componente:

Ícones do componente LinearLayout (horizontal e vertical)

RelativeLayout : Essa estrutura (conforme também já havia mencionado)


organiza os componentes dentro dela de forma que os mesmos sejam
distribuídos livremente na tela (em qualquer ponto em que você desejar,
relativo a outros componentes que , possivelmente, estejam na tela). Veja os
ícones desse componente:

Ícone do componente RelativeLayout

TableLayout: Essa estrutura organiza os componentes dentro dela de forma


como se estivessem em uma tabela (com o auxílio de um componente útil, o
TableRow, também presente nesta seção). Veja o ícone desse componente
abaixo:

92
Ícone do componente TableLayout

4.1.4) A seção “Containers”

Nesta seção estão disponíveis componentes que naturalmente funciona como


complementos (compostos) para outros componentes. Vejamos os
componentes dessa seção :

ListView : Esse componente funciona como uma lista onde nele podemos
adicionar itens e visualizar os mesmos (conhecido em algumas ferramentas de
desenvolvimento como “ListBox”). Vejamos o ícone desse componente:

Ícone do componente ListView

RadioGroup : Esse componente nada mais é do que um estrutura constituída


(por padrão) por três RadioButtons , que podem ser distribuídos de forma
horizontal e vertical. Veja o ícone desse componente na figura seguinte:

Ícone do componente RadioGroup

VideoView : Esse componente serve para reproduzir vídeos que queiramos


visualizarmos através dele. Veja o ícone desse componente abaixo:

Ícone do componente VideoView

4.1.5) A seção “Date & Time”

Nesta seção estão disponíveis os componentes que trabalham com data e


hora. Vejamos os componentes abaixo:

93
TimePicker : Esse componente é muito útil , nele podemos estipular ou definir
uma determinada hora, de acordo com a nossa necessidade. Veja o ícone
desse componente em seguida:

Ícone do componente TimePicker

DatePicker : Esse componente é muito útil , nele podemos estipular ou definir


uma determinada data, de acordo com a nossa necessidade. Veja o ícone
desse componente abaixo:

Ícone do componente DatePicker

Chronometer : Esse componente nada mais é do que um cronometro digital,


que podemos utilizá-lo de acordo com a nossa necessidade . Ele é derivado do
componente TextView. Vejamos seu ícone abaixo:

Ícone do componente Chronometer

AnalogClock : Esse componente nada mais é do que um relógio analógico


que mostra a hora do sistema. Vejamos seu ícone abaixo:

Ícone do componente AnalogClock

DigitalClock : Esse componente nada mais é do que um relógio digital


(também derivado do TextView) que mostra a hora do sistema. Vejamos seu
ícone abaixo:

Ícone do componente DigitalClock

94
4.1.6) A seção “Expert”

Nesta guia estão componentes de categorias miscelâneas (mistas) , que


envolvem manipulação de animações e efeitos de transição e etc. Vamos ver
alguns componentes

ViewFlipper : Esse componente funciona como se fosse uma estrutura de


layout para elementos, onde cada elemento é exibido (e também ocultado)
usando um efeito de transição. Vejamos seu ícone abaixo:

Ícone do componente ViewFlipper

AutoCompleteTextView : Esse componente é muito útil quando queremos


que durante a digitação de um conteúdo , o mesmo apresente sugestões de
palavras (muito comum nas aplicações de hoje em dia). Veja seu ícone abaixo :

Ícone do componente AutoCompleteTextView

Neste capítulo tivemos a oportunidade de conhecer os componentes básicos e


essenciais da plataforma Android. No próximo capitulo iremos construir
diversas aplicações que façam uso da maioria dos componentes descritos
nessa seção.

95
Capitulo 5 Construindo nossas
aplicações no Android

V amos colocar a mão na massa ? A partir de agora iremos começar a


desenvolver as nossas aplicações no Android utilizando os
componentes descritos no capítulo anterior. Começaremos com
aplicações simples e aos poucos iremos evoluir, criando aplicações mais ricas.

5.1) Desenvolvendo uma Calculadora Básica

Vamos construir a nossa primeira aplicação que vai consistir em uma


calculadora básica com as quatro operações aritméticas. Para criar um projeto
no Android Studio vamos no menu “File”/“New Project”. Confira na figura
seguinte:

New Project (pelo menu)

Seguido os passos descritos acima, irá se abrir a caixa de diálogo abaixo:

96
Criando o projeto Calculadora

Agora vamos preencher os campos, conforme abaixo:

Application Name : Calculadora

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Confira como ficou na figura seguinte:

97
Criando o projeto Calculadora – Campos preenchidos

Agora na próxima seção (clicando em “Next”) será aberta a tela de


configurações do projeto (que já estão previamente definidas.Nela não iremos
alterar nada, simplesmente vamos clicar em “Next”). Na próxima etapa vamos
escolher qual tipo de Activity iremos criar (por padrão, o BlackActivity),
conforme demonstra a próxima imagem:

98
Criando o projeto Calculadora – Definindo a Activity

Agora na próxima seção (clicando em “Next”) vamos preencher as informações


da Activity, conforme é mostrado abaixo:

Activity Name : CalculadoraActivity

Layout Name : activity_calculadora

Title : Calculadora

Resource Menu Name : menu_calculadora

Confira como ficou na figura seguinte:

99
Criando o projeto Calculadora – Informações preenchidas

Depois de preenchidas as informações, vamos criar o nosso projeto clicando


no botão “Finish”. Feito isso o nosso projeto será criado.

Antes de começarmos a desenvolver nosso projeto, vamos alterar a “Skin” do


nosso dispositivo (preview). O padrão é o “Nexus 4”. Vamos trocar para o
“Nexus S”, conforme indica a figura a seguir :

1) Clique aqui.

2) Surgirá este
menu.

3) Selecione esta
opção.

100
A escolha da Skin mencionada é pela fato de a mesma “se aproximar” das
dimensões do emulador, porém , FIQUE A VONTADE para escolher a Skin que
você desejar.

Na tela da aplicação selecione o componente TextView na tela (cuja frase está


escrito “Hello world”) e vamos alterar as seguintes propriedades, como segue:

TextView

Propriedade Valor
text Digite o primeiro número

Veja o resultado:

Tela da aplicação em desenvolvimento

Agora arraste e solte um componente “Plain Text” (EditText) presente dentro


da seção “Text Fields” abaixo do título. Veja como ficou em seguida :

101
Componente “Plain Text” (EditText) inserido

Com o componente selecionado, vamos em suas propriedades para alterar os


seguintes valores, como segue :

EditText (Plan Text)

Propriedade Valor
layout:width match_parent
id ednumero1

Na propriedade “layout:width” especificamos a largura do nosso componente,


que no caso de nossa aplicação possuirá (ocupará) a mesma largura da tela do
dispositivo (“match_parent”).

Em “id” especificamos o nome do nosso componente, que será tratado (e


identificado) na programação ao utilizarmos a linguagem Java. Porque alterar
a sua ID ? Isso é necessário pois vamos “manipular” esse componente através
do código Java, então nada mais justo do que trabalhar com componentes
cujos nomes estejam de forma clara e organizada.

Agora arraste e solte um componente TextView abaixo da caixa de texto que


inserimos, e em seguida altere as seguintes propriedades:

TextView

Propriedade Valor
Digite o segundo
text
número

102
Logo após , arraste e solte um componente Plain Text (EditText), situado na
guia “Text Fields”, abaixo do componente acima inserido, e altere seu nome
(ID) para “ednumero2” e sua largura (layout:width) para “match_parent”.
(conforme já foi mostrado).

Veja o resultado:

Tela da aplicação em desenvolvimento

Agora vamos adicionar um componente Button abaixo da caixa de texto, que


vai ser o nosso botão de “somar” os números. Depois de adicionar, vamos
alterar as suas propriedades, conforme é mostrado abaixo:

Button

Propriedade Valor
text Somar
layout:width match_parent
id btsomar

Vejamos o resultado abaixo:

103
Tela da aplicação em desenvolvimento

Para começarmos, vamos fazer o teste da nossa aplicação realizando somente


soma dos números (implementaremos as outras operações restantes daqui a
pouco).

Para inserirmos o código em nossa classe (o arquivo “CalculadoraActivity.java”)


, basta seguir os procedimentos da figura a seguir :

1) Clique aqui.

2) Selecione esta
opção.

Chamando o arquivo “CalculadoraActivity.java”

104
Feito isso será aberto o seu conteúdo conforme é demonstrado na imagem
seguinte:

Conteúdo do arquivo “CalculadoraActivity.java”

Se você observar no código acima, na seção onde se declaram os pacotes,


existe a seguinte instrução :

import ...;

Nessa linha se você observar (conforme demonstra a figura acima), existe um


sinal de “+”, que na verdade indica que há mais de uma importação (processo
esse que o eclipse faz para “simplificar” e “organizar” a compreensão do
código). Para você visualizar todos os pacotes utilizados basta clicar nesse
sinal. Confira o resultado na próxima figura:

Visualizando todos os pacotes

105
Para começar, vamos importar alguns pacotes da plataforma Android que
serão necessários para o desenvolvimento da nossa aplicação. Na seção onde
se encontram os pacotes importados , vamos importar mais alguns pacotes
digitando as seguintes linhas de comando abaixo:

import android.widget.*;
import android.view.*;
import android.app.*;

Agora no código do nosso programa, antes (EU DISSE ANTES) da linha:

@Override

Digite:

EditText ednumero1,ednumero2;
Button btsomar;

Vejamos como ficou na figura seguinte :

Atributos declarados

Agora vamos à explicação do código acima. Como você pode ver , os widgets
também podem ser usados no nosso código Java. Se no código XML eu
possuir um widget do tipo EditText, para acessar esse componente pelo Java
é preciso fazer uso da classe EditText. Cada widget no XML possui o seu
respectivo “em classe” Java, logo, se possui um widget Button, para acessá-lo
devo fazer uso da classe Button e assim vai.

Agora dentro do método onCreate após a linha:

setContentView(R.layout.activity_calculadora);

106
Digite as seguintes linhas de código:

ednumero1 = (EditText) findViewById(R.id.ednumero1);


ednumero2 = (EditText) findViewById(R.id.ednumero2);
btsomar = (Button) findViewById(R.id.btsomar);

Veja como ficou na figura abaixo :

Código digitado

Agora vou explicar as linhas de comando acima que adicionamos. A linha:

ednumero1 = (EditText) findViewById(R.id.ednumero1);

Faz referência ao primeiro EditText, através do método findViewById com o


parâmetro “R.id.numero1”.

Se lembra do nome da primeira EditText que está no código XML? Ela se


chama “ednumero1”.

Vamos entender. Observe que para fazer referência ao EditText pelo método
findViewById eu passei o parâmetro “R.id.numero1”.

107
Na segunda instrução que digitamos, para fazer referência à segunda
EditText, cujo nome é “ednumero2”, pelo método findViewById, passei o
parâmetro “R.id.numero2”.

Como você pode ver, estou fazendo uso da classe R (uma classe “interna” do
Android, onde todos os elementos e diretórios são estruturados em atributos da
classe) que funciona como interface entre o código Java e o arquivo XML. O
procedimento é o mesmo para o componente Button.

Agora iremos adicionar um evento em nosso componente Button que será


responsável por “detectar” toda vez que ele for “clicado” (tocado na tela),
executando um conjunto de instruções após o evento (que vai consistir na
soma dos números e na exibição do resultado). Para adicionarmos esse evento
em nosso componente, basta escrevermos, após a última instrução que
adicionamos, a seguinte linha de código destacado em azul:

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_calculadora);

ednumero1 = (EditText) findViewById(R.id.ednumero1);


ednumero2 = (EditText) findViewById(R.id.ednumero2);
btsomar = (Button) findViewById(R.id.btsomar);

btsomar.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {

double num1 = Double.parseDouble(


ednumero1.getText().toString());

double num2 = Double.parseDouble(


ednumero2.getText().toString());
double soma = num1 + num2;

AlertDialog.Builder dialogo = new


AlertDialog.Builder(CalculadoraActivity.this);

dialogo.setTitle("Resultado soma");

dialogo.setMessage("A soma é " + soma);

dialogo.setNeutralButton("OK", null);

dialogo.show();

}
});
}

108
Toda vez que eu clicar no botão ele irá mostrar o resultado da soma na tela
através de uma caixa de mensagem. Ótimo!

Vamos executar a nossa aplicação? Para executar faça os mesmos


procedimentos que já mostrei. O resultado da execução dessa aplicação você
vê na figura seguinte:

Aplicação em execução

OBS: Provavelmente durante a execução da aplicação ao entrar com um


número, deve ter surgido no dispositivo um teclado virtual, para ocultar ele é só
pressionar ESC.

Irei descrever o código do evento de “clique”. O método setOnClickLisneter


serve para definir um evento de “clique” em um componente. Como
parâmetro, criamos uma instância da interface OnClickListener, e dentro da
mesma existe um método chamado onClick, que será disparado toda vez que
o botão for clicado.

A linha:

double num1 = Double.parseDouble(ednumero1.getText().toString());

109
Cria uma variável chamada num1 e atribui a ela o valor que está contido dentro
do componente identificado como ednumero1. Eu faço uso do método
parseDouble da classe Double pois o conteúdo é uma String. Observem que
chamo o método getText de ednumero1 para retornar o conteúdo. Diferente de
muitos métodos de retorno String, esse método getText não retorna uma
String, mais sim um tipo chamado Editable. Por isso chamei o método
toString de getText para que me retornasse uma String. A descrição da
próxima linha e a similar ao que já foi explicado.

Logo após a soma dos números que será armazenada na variável soma , vem
o código em seguida:

AlertDialog.Builder dialogo = new


AlertDialog.Builder(CalculadoraActivity.this);

dialogo.setTitle("Resultado soma");

dialogo.setMessage("A soma é " + soma);

dialogo.setNeutralButton("OK", null);

dialogo.show();

Que mostra a soma dos números digitados na tela. Para conseguirmos exibir
uma mensagem na tela, tivemos que fazer uso da classe AlertDialog.Builder,
responsável por criar caixas de diálogo e exibi-las. Vamos aos comentários.
A linha de comando:

AlertDialog.Builder dialogo = new


AlertDialog.Builder(CalculadoraActivity.this);

Cria a instância da classe AlertDialog.Builder que será representada e


guardada dentro da variável dialogo. Na linha seguinte:

dialogo.setTitle("Resultado soma");

Define o título da caixa de diálogo através do método setTitle. Na linha


seguinte:

dialogo.setMessage("A soma é " + soma);

Define a mensagem a ser exibida através do método setMessage. Na linha


seguinte:

dialogo.setNeutralButton("OK", null);

110
Define o botão “OK” da caixa de texto através do método setNeutralButton. O
parâmetro null indica que nenhuma ação será executada quando o botão for
clicado (simplesmente a caixa será fechada e nada mais). E para finalizar:

dialogo.show();

Que é responsável por “exibir” a mensagem na tela por imediato.

Agora vamos continuar as outras operações certo ? Retornaremos então para


a tela da nossa aplicação e vamos adicionar mais 3 botões referentes as
operações restantes. Vamos adicionar na tela mais três botões como segue
(um em baixo do outro, conforme a sequência abaixo):

Button

Propriedade Valor
Id btsubtrair
text Subtrair
layout:width match_parent

Button

Propriedade Valor
id btmultiplicar
text Multiplicar
layout:width match_parent

Button

Propriedade Valor
id btdividir
text Dividir
layout:width match_parent

Depois de “finalizado” o que foi se pedido acima, veja como ficou a tela da
nossa aplicação:

111
Tela da aplicação da calculadora

Conforme já havia falado, a tela da aplicação nada mais é do que uma


estrutura XML. Vamos ver agora a estrutura XML que existe por trás dessa tela
que acompanhamos na figura acima:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".CalculadoraActivity">

<TextView android:text="Digite o primeiro número"


android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/ednumero1"
android:layout_below="@+id/textView"

112
android:layout_alignParentLeft="true" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Digite o segundo número"
android:id="@+id/textView2"
android:layout_below="@+id/ednumero1"
android:layout_alignParentLeft="true" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/ednumero2"
android:layout_below="@+id/textView2"
android:layout_alignParentLeft="true" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Somar"
android:id="@+id/btsomar"
android:layout_below="@+id/ednumero2"
android:layout_alignParentLeft="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subtrair"
android:id="@+id/btsubstrair"
android:layout_below="@+id/btsomar"
android:layout_alignParentLeft="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Multiplicar"
android:id="@+id/btmultiplicar"
android:layout_below="@+id/btsubstrair"
android:layout_alignParentLeft="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dividir"
android:id="@+id/btdividir"
android:layout_below="@+id/btmultiplicar"
android:layout_alignParentLeft="true" />

</RelativeLayout>

Agora retornando para o código do arquivo “CalculadoraActivity.java”, vamos


declarar mais três atributos (variáveis) que vão corresponder aos botões que
representam as operações restantes, conforme destaca a linha em azul:

113
:
Button btsomar, btsubtrair,btmultiplicar, btdividir;
:

Agora vamos atribuir para cada botão um evento de clique, fazendo com que
eles efetuem a sua respectiva operação aritmética. Vamos continuar a
codificação do método onCreate , digitando o seguinte código destacado em
azul em seguida:

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_calculadora);

ednumero1 = (EditText) findViewById(R.id.ednumero1);


ednumero2 = (EditText) findViewById(R.id.ednumero2);
btsomar = (Button) findViewById(R.id.btsomar);

btsubtrair = (Button) findViewById(R.id.btsubtrair);

btmultiplicar=(Button)findViewById(R.id.btmultiplicar);

btdividir = (Button) findViewById(R.id.btdividir);

btsomar.setOnClickListener(new View.OnClickListener() {

});

btsubtrair.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {

double num1 = Double.parseDouble


(ednumero1.getText().toString());

double num2 = Double.parseDouble


(ednumero2.getText().toString());

double soma = num1 - num2;

AlertDialog.Builder dialogo = new


AlertDialog.Builder(CalculadoraActivity.this);

dialogo.setTitle("Resultado subtração");

dialogo.setMessage("A subtração é " + soma);

dialogo.setNeutralButton("OK", null);

114
dialogo.show();

}
});
btmultiplicar.setOnClickListener(new View.

OnClickListener() {

@Override
public void onClick(View arg0) {

double num1 = Double.parseDouble


(ednumero1.getText().toString());

double num2 = Double.parseDouble


(ednumero2.getText().toString());

double soma = num1 * num2;

AlertDialog.Builder dialogo = new


AlertDialog.Builder(CalculadoraActivity.this);

dialogo.setTitle("Resultado multiplicação");

dialogo.setMessage("A multiplicação é " + soma);

dialogo.setNeutralButton("OK", null);

dialogo.show();

}
});

btdividir.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {

double num1 = Double.parseDouble


(ednumero1.getText().toString());

double num2 = Double.parseDouble


(ednumero2.getText().toString());

double soma = num1 / num2;

AlertDialog.Builder dialogo = new


AlertDialog.Builder(CalculadoraActivity.this);

dialogo.setTitle("Resultado divisão");

dialogo.setMessage("A divisão é " + soma);

dialogo.setNeutralButton("OK", null);

115
dialogo.show();
} });
}
Depois de escrever o código acima, salve o arquivo e em seguida teste a
aplicação. Veja o resultado na figura seguinte:

Aplicação da calculadora em execução

5.2) Desenvolvendo uma aplicação simples de compras

Agora para aprimorarmos o nosso conhecimento no desenvolvimento de


aplicações para Android, vamos criar um outro aplicativo que consiste em um
sistema de compras, bem simples. Em nossa aplicação terei disponível cinco
produtos: Arroz (R$ 2,69) , Leite (R$ 5,00) , Carne (R$ 10,00), Feijão (R$ 2,30)
e Refrigerante Coca-Cola (R$ 2,00). Nessa aplicação eu marco os itens que
quero comprar e no final o sistema mostra o valor total das compras.

Na aplicação que iremos desenvolver vamos utilizar os seguintes widgets :


TextView, CheckBox e Button.

Bom, vamos criar um novo projeto no Eclipse para Android chamado


“SistemaDeCompras”. Siga os dados do projeto abaixo:

116
Application Name : Sistema de Compras

Company Domain : app.usuario

Project location : (Fica ao seu critério onde salvar)

Activity Name: ComprasActivity

Layout Name : activity_compras

Title : Sistema de Compras

Resource Menu Name : menu_compras

Depois de carregado e criado o projeto modifique o componente TextView


situado na tela, de acordo com a tabela abaixo:

TextView

Propriedade Valor
text Escolha seu produto

Feito o que se foi pedido, adicione os seguintes componentes na sequência:

CheckBox

Propriedade Valor
text Arroz (R$ 2,69)
id Chkarroz

CheckBox

Propriedade Valor
text Leite (R$ 5,00)
id Chkleite

117
CheckBox

Propriedade Valor
text Carne (R$ 9,70)
id Chkcarne

CheckBox

Propriedade Valor
text Feijão (R$ 2,30)
id Chkfeijao

Button

Propriedade Valor
text Total das compras
id bttotal
layout:width match_parent

Ao final, o layout da nossa aplicação deve estar de acordo com a figura


seguinte:

Layout da tela da aplicação

118
Vamos ver agora a estrutura XML da tela desta aplicação:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".ComprasActivity">
<TextView android:text="Escolha o seu produto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Arroz (R$ 2,69)"
android:id="@+id/chkarroz"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Leite (R$ 5,00)"
android:id="@+id/chkleite"
android:layout_below="@+id/chkarroz"
android:layout_alignParentLeft="true" />

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Carne (R$ 9,70)"
android:id="@+id/chkcarne"
android:layout_below="@+id/chkleite"
android:layout_alignParentLeft="true" />

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Feijão (R$ 2,70)"
android:id="@+id/chkfeijao"
android:layout_below="@+id/chkcarne"
android:layout_alignParentLeft="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Total das compras"
android:id="@+id/bttotal"
android:layout_below="@+id/chkfeijao"
android:layout_alignParentLeft="true" />

</RelativeLayout>

119
Agora vamos modificar o arquivo “ComprasActivity.java“. O código “completo”
desse arquivo será como o código que é exibido abaixo:

package usuario.app.sistemadecompras;

import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;
import android.app.*;

public class ComprasActivity extends Activity {

CheckBox chkarroz, chkleite, chkcarne, chkfeijao;

Button bttotal;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_compras);

chkarroz = (CheckBox) findViewById(R.id.chkarroz);

chkleite = (CheckBox) findViewById(R.id.chkleite);

chkcarne = (CheckBox) findViewById(R.id.chkcarne);

chkfeijao = (CheckBox) findViewById(R.id.chkfeijao);

Button bttotal = (Button) findViewById(R.id.bttotal);

bttotal.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {

double total = 0;

if (chkarroz.isChecked())
total += 2.69;

if (chkleite.isChecked())
total += 5.00;

if (chkcarne.isChecked())
total += 9.7;

if (chkfeijao.isChecked())
total += 2.30;

120
AlertDialog.Builder dialogo = new AlertDialog.Builder(
ComprasActivity.this);

dialogo.setTitle("Aviso");
dialogo.setMessage("Valor total da compra :"
+ String.valueOf(total));

dialogo.setNeutralButton("OK", null);
dialogo.show();

}
});

}
}

Agora vou descrever o código situado no método onClick. Dentro do método


eu crio uma variável chamada total que armazena o valor total da compra.
Observe que eu tenho quatro estruturas if’s onde cada uma verifica se um
determinado item foi marcado, se foi, incrementa o valor do item na variável
total. No final é exibido o valor total das compras na tela.

Vamos roda nossa aplicação? O resultado você confere na figura seguinte:

Aplicação simples de compras em execução

121
5.3) Desenvolvendo uma aplicação de cálculo de salário

Agora vamos desenvolver uma nova aplicação que vai consistir em um sistema
onde nós vamos digitar o salário de um funcionário permitindo escolher o seu
percentual de aumento, que pode ser de 40% , 45% e 50%. Ao final de tudo, o
sistema irá mostrar o salário reajustado com o novo aumento.

Para essa aplicação vamos utilizar os seguintes widgets : TextView, EditText,


RadioButton e Button.

Bom, vamos lá! Crie um novo projeto Android com os seguintes dados abaixo:

Application Name: Calculo de Salario

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: SalarioActivity

Layout Name : activity_salario

Title : Cálculo de Salário

Resource Menu Name : menu_salario

Depois de carregado e criado o projeto modifique o componente TextView


situado na tela, de acordo com a tabela abaixo:

TextView

Propriedade Valor
text Digite seu salário

Em seguida, adicione os seguintes componentes na sequência:

EditText (Number Decimal)

Propriedade Valor
text
id edsalario
layout:width match_parent

122
TextView

Propriedade Valor
text Qual é o seu percentual ?

Seguindo os passos acima ate aqui, a aplicação deve estar de acordo com o
dá figura abaixo:

Tela de layout da aplicação Cálculo de salário

Bom, agora vamos adicionar um componente, ou melhor, uma estrutura que


será responsável por agrupar as RadioButtons dentro dela, que se chama
RadioGroup (Para mais informações veja o Capítulo 4). Clique e arraste o
componente abaixo do ultimo widget adicionado. O resultado você confere na
figura abaixo:

123
Estrutura RadioGroup inserida

Com o RadioGroup selecionado, modifique as propriedades abaixo:

RadioGroup

Propriedade Valor
layout:width match_parent
id rgopcoes

Observe que o RadioGroup ESTÁ VAZIO. Vamos arrastar para dentro dele
três elementos, cada um deles do tipo RadioButton e identificados por um
nome. Vamos arrastar o primeiro RadioButton para dentro do componente
RadioGroup. Vejamos o resultado :

124
Agora vamos alterar as seguintes propriedades do RadioButton, conforme
mostra a tabela :

RadioButton

Propriedade Valor
text 40%
id rb40

Agora vamos arrastar mais dois componentes do tipo RadioButton para dentro
do RadioGroup, e em seguida modifique as suas propriedades conforme
mostra a tabela :

RadioButton

Propriedade Valor
text 45%
id rb45

RadioButton

Propriedade Valor
text 50%
id rb50

Agora vamos selecionar novamente o componente RadioGroup para


alterarmos a seguinte propriedade em seguida :

RadioGroup

Propriedade Valor
layout:height wrap_content

125
Vejamos o resultado:

Tela da aplicação em construção

Agora, vamos adicionar uma Button, simplesmente clicando e arrastando o


componente na tela. Agora um detalhe, é para colocar esse componente na
tela do dispositivo, mas, FORA da área do RadioGroup (e abaixo do mesmo).

Depois de colocar o Button, modifique as propriedades abaixo:

Propriedade Valor
text Calcular novo salário
id btcalcular
layout:width match_parent

Depois de inserir todos os componentes citados, o layout da aplicação deve


ficar de acordo com a figura em seguida:

126
Layout da tela da aplicação

Vamos analisar agora parte de um trecho de código produzido. Como havia


falado acima, as RadioButtons precisam ficar dentro de uma estrutura
chamada RadioGroup certo ? Vamos ver como isso é estruturado dentro de
um código XML, como você confere abaixo:

<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/textView2"
android:layout_alignParentLeft="true"
android:id="@+id/rgopcoes">

<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="40%"
android:id="@+id/rb40" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="45%"
android:id="@+id/rb45" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="50%"
android:id="@+id/rb50" />
</RadioGroup>

127
Observe acima que logo após a definição da estrutura RadioGroup, existe
dentro dela as RadioButtons, que serão utilizadas na aplicação.

Agora confira a estrutura XML da tela da aplicação em desenvolvimento:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".SalarioActivity">

<TextView android:text="Digite seu salário"


android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:ems="10"
android:id="@+id/edsalario"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Qual seu percentual ?"
android:id="@+id/textView2"
android:layout_below="@+id/edsalario"
android:layout_alignParentLeft="true" />

<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/textView2"
android:layout_alignParentLeft="true"
android:id="@+id/rgopcoes">

<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="40%"
android:id="@+id/rb40" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="45%"

128
android:id="@+id/rb45" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="50%"
android:id="@+id/rb50" />
</RadioGroup>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Calcular novo salário"
android:id="@+id/btcalcular"
android:layout_below="@+id/rgopcoes"
android:layout_alignParentLeft="true"
/>

</RelativeLayout>

No arquivo “SalarioActivity.java” vamos colocar o seguinte código abaixo:

package usuario.app.calculodesalario;

import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;
import android.app.*;

public class SalarioActivity extends Activity {

RadioGroup rgopcoes;
Button btcalcular;

EditText edsalario;

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_salario);

edsalario = (EditText) findViewById(R.id.edsalario);

rgopcoes = (RadioGroup) findViewById(R.id.rgopcoes);

btcalcular = (Button) findViewById(R.id.btcalcular);

btcalcular.setOnClickListener(new View.OnClickListener() {

129
@Override
public void onClick(View arg0) {

double salario = Double.parseDouble


(edsalario.getText().toString());

int op = rgopcoes.getCheckedRadioButtonId();

double novo_salario = 0;

if (op == R.id.rb40)
novo_salario = salario + (salario * 0.4);
else if (op == R.id.rb45)
novo_salario = salario + (salario * 0.45);
else
novo_salario = salario + (salario * 0.5);

AlertDialog.Builder dialogo = new


AlertDialog.Builder(SalarioActivity.this);

dialogo.setTitle("Novo salário");

dialogo.setMessage("Seu novo salário é : R$"


+ String.valueOf(novo_salario));

dialogo.setNeutralButton("OK", null);

dialogo.show();

}
});

Vamos à explicação de alguns códigos interessantes. Dentro do método


onClick, eu realizo o cálculo do novo salário do funcionário. Os primeiros
códigos do evento são similares de programas anteriores que já foram
devidamente explicados. A linha:

int op = rgopcoes.getCheckedRadioButtonId();

Cria uma variável op e retorna para ela o Id da opção selecionada, ou seja,


qual RadioButton foi selecionada.

Agora na condição:

if (op == R.id.rb40)

130
Verifico se a opção de 40% foi selecionada, se foi selecionada, realiza o cálculo
do salário com o reajuste de 40%. A mesma explicação e válida para o cálculo
dos outros reajustes. Agora vamos executar a nossa aplicação. O resultado
você vê na figura seguinte:

Aplicação de cálculo de salário em execução

5.4) Desenvolvendo uma aplicação de cálculo de salário (Segunda versão)

Agora nós vamos criar uma segunda versão do aplicativo acima. A diferença da
aplicação que desenvolvemos para a que vamos desenvolver agora é que
vamos utilizar como recurso de seleção de opções o componente Spinner
(ComboBox) e não o componente RadioGroup.

Vamos agora criar um novo projeto no Android com os seguintes dados abaixo:

Application Name: Calculo de Salario 2

Company Domain : app.usuario

Project location : (Fica a sua escolha)

131
Activity Name: SalarioActivity

Layout Name : activity_salario

Title : Cálculo de Salário

Resource Menu Name : menu_salario

Depois de carregado e criado o projetomodifique o componente TextView


situado na tela, de acordo com a tabela abaixo:

TextView

Propriedade Valor
text Digite seu salário

Em seguida, adicione os seguintes componentes na sequência:

EditText (Number Decimal)

Propriedade Valor
id edsalario
layout:width match_parent

TextView

Propriedade Valor
text Qual é o seu percentual ?

Spinner

Propriedade Valor
Id spnopcoes

Seguindo os passos acima ate aqui, a aplicação deve estar de acordo com o
da figura seguinte:

132
Tela de layout da aplicação

Aparentemente o componente Spinner apresenta alguns itens dentro dele,


mas, o que visualizamos somente é só um “enfeite” de seu conteúdo (ele está
vazio, sem itens).

Existe duas formas de se adicionar elementos dentro dele : de forma estática


(em tempo de projeto) e dinâmica (em tempo de execução). Iremos optar aqui
por adicionar os elementos de forma estática.

Para adicionarmos os elementos de forma estática, devemos alterar o


conteúdo do arquivo “strings.xml”, situado dentro do diretório “values”. Vamos
abrir o arquivo citado para criarmos um array (vetor) de strings onde dentro
desse array estará presente elementos (itens) que serão visualizados no
componente.

Depois de aberto o arquivo “strings.xml” veremos o seguinte conteúdo em


seguida :

133
Arquivo “strings.xml”

Agora vamos criar uma estrutura do tipo string-array dentro do XML (chamada
“opcoes_salario”), conforme mostra o código destacado em azul em seguida :

<resources>
<string name="app_name">Calculo de Salario 2</string>

<string name="hello_world">Hello world!</string>


<string name="action_settings">Settings</string>

<string-array name="opcoes_salario">
<item>40%</item>
<item>45%</item>
<item>50%</item>
</string-array>

</resources>

Vejamos como ficou o resultado na figura seguinte :

134
Elementos criados com sucesso

A string-array chamada “opcoes_salario” irá armazenar os itens de opção


relacionados ao reajuste do salário (que são “40%” , “45%” e “50%”).

Agora voltando para o arquivo “activity_salario.xml” vamos fazer com que o


componente Spinner “obtenha” o conteúdo do objeto “opcoes_salario” que foi
criado no arquivo “strings.xml”. Para isso, vamos na propriedade “entries” do
componente Spinner onde nela vamos informar o objeto (ou melhor,
constante) que possui os itens que ele deve exibir. Para isso basta digitarmos
nessa propriedade o valor “@array/opcoes_salario”. Veja como ficou na figura
seguinte:

135
Carregando a lista dentro da propriedade “Entries”

Agora para finalizar, vamos adicionar o componente Button e em seguida


modificar as propriedades como segue:

Button

Propriedade Valor
text Calcular novo salário
id btcalcular
layout:width match_parent

Feito isso a aplicação deve estar de acordo como mostra a figura seguinte:

136
Layout da tela da aplicação

Vamos conferir agora o código em XML do nosso arquivo salvo:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".SalarioActivity">

<TextView android:text="Digite seu salário"


android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edsalario"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true" />

137
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Qual o seu percentual ?"
android:id="@+id/textView2"
android:layout_below="@+id/edsalario"
android:layout_alignParentLeft="true" />

<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/spopcoes"
android:layout_below="@+id/textView2"
android:layout_alignParentLeft="true"
android:focusable="true"
android:entries="@array/opcoes_salario" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Calcular novo salário"
android:id="@+id/btcalcular"
android:layout_below="@+id/spnopcoes"
android:layout_alignParentLeft="true" />

</RelativeLayout>

Agora vamos no arquivo “SalarioActivity.java” para adicionarmos o código


conforme é mostrado abaixo:

package usuario.app.calculodesalario2;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.view.View;
import android.widget.*;

public class SalarioActivity extends Activity {

EditText edsalario;
Spinner spnopcoes;
Button btcalcular;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_salario);
edsalario = (EditText) findViewById(R.id.edsalario);

spnopcoes = (Spinner) findViewById(R.id.spnopcoes);

138
btcalcular = (Button) findViewById(R.id.btcalcular);

btcalcular.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {

double salario =
Double.parseDouble(edsalario.getText()
.toString());

double novo_salario = 0;

switch (spnopcoes.getSelectedItemPosition()) {

case 0:
novo_salario = salario + (salario * 0.4);
break;

case 1:
novo_salario = salario + (salario * 0.45);
break;

case 2:
novo_salario = salario + (salario * 0.5);
break;
}

AlertDialog.Builder dialogo = new


AlertDialog.Builder(SalarioActivity.this);
dialogo.setTitle("Novo salário");
dialogo.setMessage("Seu novo salário é : R$"
+ String.valueOf(novo_salario));
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
});
}

Observando o código do programa acima, podemos ver que ele é similar o da


primeira versão do aplicativo, porém, quero comentar alguns códigos
interessantes desta aplicação.

Vamos analisar agora o código dentro do evento onClick do objeto Button.


Dentro dele existe o seguinte código mostrado em seguida:

139
switch (spnopcoes.getSelectedItemPosition()) {

case 0:
novo_salario = salario + (salario * 0.4);
break;

case 1:
novo_salario = salario + (salario * 0.45);
break;

case 2:
novo_salario = salario + (salario * 0.5);
break;

Que verifica qual será o novo salário , de acordo com a opção selecionada no
objeto Spinner. Vamos entender esse código.

Observe que o objeto spnopcoes, possui um método chamado


getSelectedItemPosition, que é responsável por retornar o índice do item
selecionado, sabendo se que o primeiro item possui índice zero, o segundo
possui índice um e assim por diante. Observe que dentro dessa estrutura eu
verifico a opção selecionada, se for a primeira, o novo salário terá aumento de
40%, se for a segunda , o aumento será de 45% senão, o aumento será de
50%.

Logo após o cálculo do novo salário, é exibido na tela o novo salário.

Vamos executar a nossa aplicação. O resultado da execução você confere na


figura abaixo:

140
Aplicação de cálculo de salário usando Spinner em execução

Como havia falado, nós podemos adicionar os elementos no componente


Spinner de forma estática e de forma dinâmica. Aprendemos como
colocarmos de forma estática, agora vamos aprender (através do mesmo
projeto) como adicionar os elementos de forma dinâmica (em tempo de
execução).

Voltando para o arquivo “activity_salario.xml”, no componente Spinner


atribuímos um valor a propriedade “entries”, que era a referência ao objeto
“opcoes_salario”. Agora iremos DEIXAR EM BRANCO a propriedades “entries”,
pois os elementos serão carregados de forma dinâmica.

E agora voltando para o arquivo “SalarioActivity.java” vamos alterar o código


conforme será explicado passo a passo a partir de agora.

Na seção onde declaramos todos os nossos atributos (edsalario, btcalcular e


etc.), vamos declarar um atributo chamado aOpcoes do tipo ArrayAdapter,
conforme você confere abaixo:

ArrayAdapter<String> aOpcoes;

141
O ArrayAdapter é um objeto que consiste em um vetor (array) onde nele serão
adicionados os elementos (itens de opções) que vão constituir o objeto
Spinner, e todos os objetos serão do tipo String , conforme você pode conferir
no parâmetro da declaração do atributo acima.

Dentro do método onCreate logo após o carregamento das referências dos


objetos em seus respectivos atributos, adicione o seguinte código abaixo,
destacado em negrito:

:
edsalario = (EditText) findViewById(R.id.edsalario);

spnopcoes = (Spinner) findViewById(R.id.spnopcoes);

btcalcular = (Button) findViewById(R.id.btcalcular);

aOpcoes = new ArrayAdapter<String>(this,


android.R.layout.simple_spinner_item);

aOpcoes.add("40%");
aOpcoes.add("45%");
aOpcoes.add("50%");

spnopcoes.setAdapter(aOpcoes);
:

Iréi explicar agora o código. A primeira linha em negrito, conforme é mostrado


abaixo:

aOpcoes = new ArrayAdapter<String>(this,


android.R.layout.simple_spinner_item);

Carrega o objeto aOpcoes na memória. Em seguida são adicionados os


elementos que vão estar dentro do componente:

aOpcoes.add("40%");
aOpcoes.add("45%");
aOpcoes.add("50%");

E por último, os elementos adicionados no objeto são carregados no


componente Spinner através do método setAdapter, presente no
componente, conforme podemos conferir:

spnopcoes.setAdapter(aOpcoes);

Feito as devidas alterações no código, salve o arquivo e teste a aplicação para


que você possa conferir os resultados.

142
5.5) Desenvolvendo uma aplicação de lista de contatos

Agora vamos fazer uma nova aplicação em Android que consiste em uma
aplicação de lista de contatos. Para essa aplicação iremos utilizar um
componente chamado ListView , que seja bastante útil para esse tipo de
situação (quando queremos exibir itens). Toda vez que clicarmos (ou melhor
“tocarmos”) em um contato na lista, será exibida uma mensagem com o nome
do contato selecionado.

Vamos criar agora um novo projeto no Android Studio, conforme os dados


abaixo:

Application Name: Lista de Contatos

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: ListaContatosActivity

Layout Name : activity_lista_contatos

Title : Lista de Contatos

Resource Menu Name : menu_lista_contatos

Após o projeto ser carregado selecione o componente TextView, e em seguida


dentro da sua propriedade “text” digite a seguinte frase : “Escolha um contato:”.

Em seguida vamos adicionar o componente ListView (que se encontra na


seção “Containers”). Seguindo o que foi se pedido, a tela da aplicação ficará de
acordo com a seguinte figura:

143
Layout da tela da aplicação em desenvolvimento

Agora vamos criar um objeto (String Array) que vai armazenar os contatos que
serão exibidos no componente, que iremos chamado de “contatos” (criar no
arquivo “strings.xml”). Os contatos que estarão nessa lista são :
"Aline","Lucas","Rafael","Gabriela" e "Silvana".

Depois de criar os contatos, selecione o objeto ListView que você adicionou e


altere as seguintes propriedades.

ListView

Propriedade Valor
id lista_contatos
entries @array/contatos

Agora vamos visualizar a estrutura XML do arquivo que forma a tela da


aplicação acima:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".ListaContatosActivity">

144
<TextView android:text="Escolha um contato:"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />

<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true"
android:entries="@array/contatos" />

</RelativeLayout>

Agora vamos no arquivo “ListaContatosActivity.java” para colocar o seguinte


código abaixo:
package usuario.app.listadecontatos;

import android.os.Bundle;
import android.widget.*;
import android.view.*;
import android.app.*;

public class ListaContatosActivity extends Activity {

ListView lista_contatos;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lista_contatos);
lista_contatos = (ListView) findViewById(R.id.lista_contatos);
lista_contatos.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {

String nome = ((TextView) view).getText().toString();


AlertDialog.Builder dialogo = new AlertDialog.Builder(
ListaContatosActivity.this);
dialogo.setTitle("Contato");
dialogo.setMessage("Contato selecionado: " + nome);
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
});
}
}

145
Como havia falado (e também como vocês podem conferir no código acima),
quando se clica em um item, o sistema mostra uma mensagem do item
selecionado (no caso, o nome contato selecionado). Isso é conseguido fazendo
uso da interface OnItemClickListener, como mostra a instrução abaixo:

lista_contatos.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {

String nome = ((TextView) view).getText().toString();


AlertDialog.Builder dialogo = new AlertDialog.Builder(
ListaContatosActivity.this);
dialogo.setTitle("Contato");
dialogo.setMessage("Contato selecionado: " + nome);
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
});

Vamos analisar alguns trechos do código. A linha de comando:

String nome = ((TextView) view).getText().toString();

Guarda na variável “nome” o conteúdo retornado pelo objeto “view” (que


contém o contato selecionado). Como o conteúdo precisa ser retornado para a
variável que é do tipo String, foi preciso converte-lo em TextView para que o
conteúdo fosse retornado em uma String (através do método toString situado
em getText).

Vamos executar a aplicação. O resultado você vê na figura seguinte:

146
Aplicação de lista de contatos em execução

5.6) Desenvolvendo uma aplicação que visualiza imagens (com


ImageView)

Agora vamos desenvolver uma aplicação básica que visualiza imagens através
do uso o componente ImageView. Vamos criar um projeto com os seguintes
dados abaixo:

Application Name: Visualizador de Imagens

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: VisualizadorImagensActivity

Layout Name : activity_visualizador_imagens

Title : Visualizador de Imagens

Resource Menu Name : menu_ visualizador_imagens

147
Antes de iniciarmos a codificação do programa, quero que você coloque duas
imagens JPEG (com a extensão .jpg), dentro da pasta “drawable”, presente
dentro do diretório “res” (para esse projeto usei duas imagens chamadas
“foto1.jpg” e “foto2.jpg”, que já acompanham este projeto, presente dentro do
diretório “Tópico 5.6”).

Como colocar as imagens dentro do diretório “drawable” ?

Vamos através do Windows Explorer abrir o diretório onde se encontra esses


arquivos, e em seguida selecione-os , pressionando as teclas CTRL+C.

Selecionando e copiando os arquivos

Depois de copiarmos os arquivos de imagem vamos voltar para o Android


Studio para o nosso projeto aberto, e em seguida, selecione a pasta
“drawable”:

Selecionando a pasta “drawable”

148
Com a pasta selecionada, pressione CTRL+V, e em seguida surgirá a seguinte
caixa de diálogo :

Para finalizar clique em “OK” para que as imagens possam ser adicionadas no
diretório “drawable”.

Fotos inseridas no dreitório “drawable”

Agora vamos remover o componente TextView da tela do nosso dispositivo e


em seguida vamos adicionar dentro da tela da nossa aplicação uma estrutura
LinearLayout (Horizontal), que se encontra na guia “Layouts”, simplesmente
arrastando o componente para a tela da aplicação. O resultado você confere na
figura abaixo:

149
Estrutura LinearLayout inserida

Agora dentro da estrutura LinearLayout que adicionamos acima, vamos inserir


o componente ImageView (que se encontra na guia “Widgets”). Vejamos o
resultado:

Componente ImageView inserido

Observe que nós podemos ver um pequeno quadrinho minúsculo


representando o componente ImageView. Isso ocorre pelo fato de o mesmo
não possuir nenhuma imagem.

Na guia “Properties” selecione a propriedade “src”, e em seguida clique no


botão (...), conforme indica a figura seguinte :

150
Inserindo uma imagem

Na caixa de dialogo que se abre, expanda o item drawable (se não estiver
expandido) e selecione a imagem da “foto1.jpg” :

Caixa de diálogo – Resource

Nesta caixa de diálogo escolhemos a imagem que o nosso componente vai


assumir. Depois de escolher a imagem clique em “OK”. Veja o resultado em
seguida:

151
Resultado da operação

Agora vamos alterar a propriedade do componente ImageView conforme


abaixo:

ImageView

Propriedade Valor
id imgfoto

Agora vamos adicionar um componente TextView que ficará ao lado da


imagem. Altere suas propriedades conforme a tabela abaixo:

TextView

Propriedade Valor
id txtinformacao
text Foto 1
textSize 20dp
padding / left 10dp

Seguindo os passos acima, o resultado do layout deve ficar de acordo com a


figura abaixo:

152
Layout da aplicação

Agora vamos selecionar a estrutura LinearLayout que adicionarmos (onde


inserimos a imagem e o título acima) para modificarmos a seguinte propriedade
:

LinearLayout

Propriedade Valor
layout:height wrap_content

Agora vamos adicionar na sequência dois componentes do tipo Button, só que


esses dois componentes vão estar dentro da tela da aplicação e fora (e
também abaixo) da estrutura de layout que adicionamos. Segue abaixo as
propriedades que precisam ser modificadas:

Button

Propriedade Valor
id btfoto1
text Exibir foto 1
layout:width match_parent

Button

Propriedade Valor
id btfoto2
text Exibir foto 2
layout:width match_parent

153
Depois de seguir todos os passos descritos acima, a aplicação tem que estar
de acordo com a figura abaixo:

Layout da aplicação

Vamos conferir agora como ficou o código XML da tela da nossa aplicação :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".VisualizadorImagensActivity">

<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:id="@+id/linearLayout">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imgfoto"
android:src="@drawable/foto1" />

154
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Foto 1"
android:id="@+id/txtinformacao"
android:textSize="20sp"
android:paddingLeft="10dp" />
</LinearLayout>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Exibir foto 1"
android:id="@+id/btfoto1"
android:layout_below="@+id/linearLayout"
android:layout_alignParentLeft="true" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Exibir foto 2"
android:id="@+id/btfoto2"
android:layout_below="@+id/btfoto1"
android:layout_alignParentLeft="true" />
</RelativeLayout>

Agora vamos no arquivo “VisualizadorImagensActivity.java” para colocarmos o


código em seguida :

package usuario.app.visualizadordeimagens;

import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;

public class VisualizadorImagensActivity extends Activity {

ImageView imgfoto;

Button btfoto1, btfoto2;

TextView txtinformacao;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_visualizador_imagens);

155
imgfoto = (ImageView) findViewById(R.id.imgfoto);

btfoto1 = (Button) findViewById(R.id.btfoto1);


btfoto2 = (Button) findViewById(R.id.btfoto2);

txtinformacao = (TextView) findViewById(R.id.txtinformacao);

btfoto1.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {

imgfoto.setImageResource(R.drawable.foto1);

txtinformacao.setText("Foto 1");

}
});

btfoto2.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {

imgfoto.setImageResource(R.drawable.foto2);
txtinformacao.setText("Foto 2");

}
});

Agora vamos analisar alguns trechos de códigos. Vamos no evento Click


referente a abertura da primeira imagem. O código:

imgfoto.setImageResource(R.drawable.foto1);

É responsável por abrir a imagem “foto1.jpg” e exibi-la no componente.


Observe que foi passado o parâmetro “R.drawable.foto1” onde “drawable”
corresponde a pasta e “foto1” corresponde ao arquivo “foto1.jpg”. Logo após
vem o código:
txtinformacao.setText("Foto 1");

Cuja finalidade é mudar o título da TextView , de acordo com a String passada


como parâmetro.

156
O comentário acima é o mesmo para o segundo botão referente à abertura da
segunda imagem.

Vamos executar a nossa aplicação. O resultado você vê nas imagens abaixo:

Aplicação de visualização de imagens em execução

5.7) Desenvolvendo uma aplicação que visualiza imagens (com Gallery)

Agora iremos desenvolver um outra aplicação que visualiza imagens, só que


um pouco diferente da que desenvolvemos acima. Essa aplicação que vamos
criar vai utilizar um componente chamado Gallery, que também serve para
visualizar imagens (como se fosse uma galeria). Vamos demonstrar o uso
desse componente. Crie um novo projeto com os seguintes dados abaixo:

Application Name: Galeria de Imagens

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: GaleriaActivity

157
Layout Name : activity_galeria

Title : Galeria de Imagens

Resource Menu Name : menu_galeria

Depois de criado o projeto vamos em seguida “copiar” e “colar” para dentro do


diretório “drawable” do nosso projeto todas as imagens presentes dentro da
pasta “Topico 5.7” que acompanha este material

Depois de colocar as imagens vamos criar uma classe chamada


ImageAdapter (dentro do pacote “usuario.app.galeriadeimagens”) , que será
uma classe iremos utilizar em nossa aplicação e essencial para o
funcionamento do componente Gallery. Siga os passos abaixo:

Clique com o botão direito sobre o pacote “usuario.app.galeriadeimagens” (o


primeiro de cima, dentro da pasta “java”) e selecione a opção “New” / “Java
Class”:

Criando uma nova classe

Será aberto um formulário no qual você deverá preencher os dados da classe a


ser criada. Veja na figura a seguir :

Caixa de diálogo – Create New Class

158
No campo “Name” você vai digitar o nome da classe a ser criada (neste caso, a
classe ImageAdapter). Confira na figura seguinte:

Criando uma nova classe

Se estiver tudo certo é só pressionar o botão “OK” para que a classe possa ser
criada. Em seguida coloque o código abaixo:
package app.usuario.galeriadeimagens;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {

private Context myContext;

public final static int[] myImageIds = { R.drawable.box_foto1,


R.drawable.box_foto2, R.drawable.box_foto3, };

public ImageAdapter(Context c) {
this.myContext = c;
}

public int getCount() {


return this.myImageIds.length;
}

public Object getItem(int position) {


return position;
}

public long getItemId(int position) {


return position;
}

public View getView(int position, View convertView, ViewGroup parent)


{

159
ImageView i = new ImageView(this.myContext);
i.setImageResource(this.myImageIds[position]);

i.setScaleType(ImageView.ScaleType.FIT_XY);
i.setLayoutParams(new Gallery.LayoutParams(210, 187));
return i;
}

public float getScale(boolean focused, int offset) {


return Math.max(0, 1.0f / (float) Math.pow(2,
Math.abs(offset)));
}
}

Observem que dentro desta classe existe um array chamado myImageIds,


onde eu armazeno as imagens a serem visualizadas no componente Gallery.

Agora voltando para o arquivo “activity_galeria.xml”, abra o editor de XML da


tela da nossa aplicação e vamos substituir o código existente pelo novo código
da tela mostrado abaixo :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout_tela_principal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/fundo_tela_os_vingadores_ultron"
android:orientation="vertical"
tools:context=".GaleriaActivity" >

<LinearLayout
android:id="@+id/layout_titulo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#000000"
android:gravity="center" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/titulo_os_vingadores" />
</LinearLayout>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/layout_titulo"
android:paddingBottom="15dp"

160
android:paddingTop="10dp"
android:text="Escolha uma das fotos abaixo :"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<LinearLayout
android:id="@+id/layout_galeria"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView2"
android:background="#000000"
android:orientation="vertical" >
<Gallery
android:id="@+id/galeria_fotos"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>

Após a operação solicitada acima, salve o arquivo “activity_galeria.xml”.


Vejamos o resultado na figura seguinte :

Tela da aplicação em desenvolvimento

161
Pelo que podemos ver na figura acima, estamos desenvolvimento um aplicativo
Android que irá visualizar a galeria de fotos do fime “Os Vingadores – A era de
Ultron” .

Feito isso, abra o arquivo “GaleriaActivity.java” para digitarmos o seguinte


código em seguida :

package usuario.app.galeriadeimagens;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.Gallery;

public class GaleriaActivity extends Activity {

Gallery galeria_fotos;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_galeria);
galeria_fotos = (Gallery) findViewById(R.id.galeria_fotos);
galeria_fotos.setAdapter(new ImageAdapter(this));

Depois de digitarmos o código acima, execute a nossa aplicação e confira o


resultado, conforme mostra a figura seguinte:

162
Aplicação de galeria de imagens em execução

Observe que no componente Gallery as imagens são visualizadas quando


tocamos nela e deslizamos, porem, só visualizamos elas em seu tamanho fixo,
conforme especificado no código da classe ImageAdapter no método getView
:

i.setScaleType(ImageView.ScaleType.FIT_XY);
i.setLayoutParams(new Gallery.LayoutParams(210, 187));
return i;

No código acima especificamos que cada imagem presente dentro do


componente Gallery possuirá uma dimensão de 210x187 pixels (de largura e
altura respectivamente).

Vamos melhorar a nossa aplicação de forma que toda vez que escolhermos
uma derminada imagem, a mesma possa ser visualizado de forma que ocupe
boa parte da tela de nossa aplicação.

Primeiramente, vamos abrir novamente o editor XML (guia “Text”) e localize a


seguinte região de código destacada abaixo :
<RelativeLayout
.....
>

163
:
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/layout_titulo"
android:paddingBottom="15dp"
android:paddingTop="10dp"
android:text="Escolha uma das fotos abaixo :"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<LinearLayout
android:id="@+id/layout_galeria"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView2"
android:background="#000000"
android:orientation="vertical" > Coloque o cursor aqui.
<Gallery
android:id="@+id/galeria_fotos"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

</RelativeLayout>

Conforme o local indicado no código anterior, vamos copiar e colar o seguinte


trecho destacado em azul em seguida :

<LinearLayout
:
>
<Gallery
android:id="@+id/galeria_fotos"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:id="@+id/layout_foto"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_alignParentLeft="true"
android:layout_alignTop="@+id/textView2"
android:orientation="vertical"
android:visibility="gone" >

<ImageView
android:id="@+id/imgfoto"
android:layout_width="match_parent"

164
android:layout_height="280dp"
android:scaleType="fitXY"
android:src="@drawable/foto_1" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:gravity="right"
android:orientation="vertical" >

<Button
android:id="@+id/btfechar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fechar" />

</LinearLayout>

</LinearLayout>

</RelativeLayout>

Depois de colocarmos o trecho de código vamos abrir o código do arquivo


“GaleriaActivity.java” para digitarmos o seguinte código destacado em azul em
seguida :

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.Gallery;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class GaleriaActivity extends Activity {

Gallery galaria_fotos;

ImageView imgfoto;

LinearLayout layout_foto;

Button btfechar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

165
setContentView(R.layout.activity_galeria);
galaria_fotos = (Gallery) findViewById(R.id.galeria_fotos);
galaria_fotos.setAdapter(new ImageAdapter(this));

imgfoto = (ImageView) findViewById(R.id.imgfoto);

btfechar = (Button) findViewById(R.id.btfechar);

layout_foto = (LinearLayout) findViewById(R.id.layout_foto);

galaria_fotos.setOnItemClickListener(new OnItemClickListener()
{
@Override
public void onItemClick(AdapterView<?> parent, View view, int
position, long id) {

imgfoto.setImageResource(ImageAdapter.myImageIds[position]);
layout_foto.setVisibility(View.VISIBLE);

});

btfechar.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

layout_foto.setVisibility(View.GONE);

}
});

Bom, irei explicar o código destacado que foi inserido. Observe que dentro do
objeto galeria_fotos foi definido um evento do tipo OnItemClickListener, que
será disparado toda vez que uma imagem e selecionada. Quando uma imagem
é selecionada, é executado o seguinte trecho de código :

imgfoto.setImageResource(ImageAdapter.myImageIds[position]);
layout_foto.setVisibility(View.VISIBLE);

166
A primeira instrução carrega a imagem selecionada no componente Gallery.
Como funciona esse carregamento ? A referencia da imagem selecionada está
no parâmetro position que armazena o índice da imagem selecionada (se a
primeira imagem foi selecionada retorna “0”, caso foi a segunda retorna “1” e
assim por diante).

Esse parâmetro (position) é passado para o array myImageIds (que guarda os


nomes das imagens em um vetor), que retorna o nome da imagem a ser
carregada , que será processada pelo método setImageResource.

Em seguida, a foto da imagem selecionada é “ampliada” na tela (na verdade a


foto e carregada em um componente ImageView que está oculto dentro de
uma estrutura, que ocupa boa parte da tela do dispositivo).

Depois de digitado o código execute o nosso programa e confira os resultados,


conforme mostra a figura seguinte :

Aplicação em execução – Imagem selecionada

167
5.8) Desenvolvendo uma aplicação que demonstra o uso do ProgressBar

Agora iremos desenvolver uma aplicação que vai demonstrar o uso do


componente ProgressBar. Vamos criar um projeto de acordo com os dados
seguintes:

Application Name: Demonstracao ProgressBar

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: ProgressBarActivity

Layout Name : activity_progress_bar

Title : Demonstracao ProgressBar

Resource Menu Name : menu_ progress_bar

Depois de criado o projeto altere a propriedade do componente TextView


conforme é mostrado em seguida:

TextView

Propriedade Valor
text ProgressBar (Normal)

ProgressBar (Normal)

Nenhuma propriedade para alterar desse componente, só adicione.

TextView

Propriedade Valor
text ProgressBar (Large)

168
ProgressBar (Large)

Nenhuma propriedade para alterar desse componente, só adicione.

TextView

Propriedade Valor
text ProgressBar (Horizontal)

ProgressBar (Horizontal)

Propriedade Valor
td barra_progresso
layout:width match_parent

LinearLayout (Horizontal)

Propriedade Valor
gravity center

Agora dentro da estrutura adicionada acima (LinearLayout), vamos adicionar


os seguintes componentes na sequência:

Button

Propriedade Valor
text “+”
id btaumentar

Button

Propriedade Valor
text “-”
id btdiminuir

Depois de seguir os passos acima, a aplicação deve estar de acordo com a


figura seguinte:

169
Layout da tela da aplicação

Agora vejamos o código XML da tela da nossa aplicação:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".ProgressBarActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ProgressBar (Normal)" />

<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ProgressBar (Large)" />

170
<ProgressBar
android:id="@+id/progressBar2"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ProgressBar (Horizontal)" />
<ProgressBar
android:id="@+id/barra_progresso"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >

<Button
android:id="@+id/btaumentar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+" />

<Button
android:id="@+id/btdiminuir"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-" />
</LinearLayout>

</LinearLayout>

Agora vamos no arquivo “ProgressBarActivity.java” para colocar o seguinte


código abaixo:

package usuario.app.demonstracaoprogressbar;

import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;

public class ProgressBarActivity extends Activity {

ProgressBar barra_progresso;

Button btaumentar, btdiminuir;

@Override

171
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_bar);

barra_progresso = (ProgressBar) findViewById


(R.id.barra_progresso);

btaumentar = (Button) findViewById


(R.id.btaumentar);

btdiminuir = (Button) findViewById


(R.id.btdiminuir);

btaumentar.setOnClickListener(new
View.OnClickListener() {

@Override
public void onClick(View arg0) {

barra_progresso.
incrementProgressBy(10);
}
});

btdiminuir.setOnClickListener(new
View.OnClickListener() {

@Override
public void onClick(View arg0) {

barra_progresso.
incrementProgressBy(-10);
}
});
}
}

Agora vou explicar o código desse programa. Os primeiros componentes do


tipo ProgressBar (Small, Normal e Large) são executados normalmente de
forma automática, sem a interação dele com o usuário ou programa. Já o
ultimo componente ProgressBar que adicionamos (Horizontal) precisa de um
código que de alguma forma possa interagir com ele. Por isso neste ultimo
componente adicionamos dois botões que são responsáveis por “aumentar” e
“diminuir” o “progresso” do processamento do componente.

No código do botão “btaumentar” (dentro do método onClick) existe seguinte


linha de comando:

barra_progresso.incrementProgressBy(10);

172
O método acima “incrementa” o “progresso” atual da barra em 10 (OBS:
Quando adicionamos o componente ProgressBar na tela, o valor máximo do
“progresso” é 100, logo, ele irá incrementar até 100).

No código do botão “btdiminuir” (dentro do método onClick) existe seguinte


linha de comando:

barra_progresso.incrementProgressBy(-10);

O método acima “diminui” o “progresso” atual da barra em 10.

Vamos executar a nossa aplicação para conferirmos o resultado, como


demonstra a figura abaixo:

Aplicação em execução

Agora como fazer com que a nossa barra de progresso “aumente” o seu
progresso de forma automática ? Existe um meio. Para isso vamos adicionar
um Button, em que toda vez quando ele for clicado, “aumente” de forma
automática o “progresso” da barra.

173
Ao lado do botão de “+” (aumentar) vamos adicionar um novo Button e nele
mudaremos as seguintes propriedades:

Button

Propriedade Valor
text Automático
id btautomatico

Veja a “cara” da tela aplicação na figura seguinte:

Layout da aplicação

Agora vamos voltar para o arquivo “ProgressBarActivity.java” e iremos agora


colocar o seguinte código destacado em azul:

package usuario.app.demonstracaoprogressbar;

import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;

import android.os.*;

174
public class ProgressBarActivity extends Activity {

ProgressBar barra_progresso;

Button btaumentar, btdiminuir, btautomatico;

Runnable runnableAumentar;

Handler handleAumentar;

@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_progress_bar);
:
btdiminuir = (Button) findViewById(R.id.btdiminuir);

btautomatico = (Button) findViewById(R.id.btautomatico);

btdiminuir.setOnClickListener(new View.OnClickListener() {
:
});

handleAumentar = new Handler();

runnableAumentar = new Runnable() {

@Override
public void run() {

if (barra_progresso.getProgress() !=
barra_progresso.getMax()) {
barra_progresso.incrementProgressBy(5);
handleAumentar.postDelayed(runnableAumentar,
100);
}
}
};
btautomatico.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
handleAumentar.post(runnableAumentar);
}
});
}
}

175
Agora irei comentar alguns códigos destacados do programa. Na seção de
declaração dos atributos foi declarado a seguinte variável (ou atributo):

Runnable runnableAumentar;

Essa variável irá guardar e representar o código que vai executar o


“incremento” automático do progresso da barra. O próximo atributo:

Handler handleAumentar;

Será responsável por executar automaticamente o código representado e


guardado na variável runnableAumentar (do tipo Runnable). Dento do método
onCreate temos o seguinte trecho de código:

runnableAumentar = new Runnable() {

@Override
public void run() {

if (barra_progresso.getProgress() != barra_progresso.getMax()) {
barra_progresso.incrementProgressBy(5);
handleAumentar.postDelayed(runnableAumentar, 100);
}
}
};

O código acima guarda e vai referenciar na variável runnableAumentar o


conjunto de instruções que vai “incrementar” o progresso da barra de forma
automática. Primeiramente é feito dentro do código uma avaliação (if) que
verifica se o valor atual do “progresso” (obtido com o método getProgress) é
diferente do valor máximo do “progresso” ( obtido através do método getMax,
que por padrão, quando adicionamos o componente pela primeira vez, retorna
100). Quando a condição é verdadeira ele executa as seguintes instruções:

barra_progresso.incrementProgressBy(5);
handleAumentar.postDelayed(runnableAumentar, 100);

Que “incrementa” o valor do “progresso” em 5 e em seguida chama novamente


(de forma recursiva, “teoricamente” falando) a instrução de incremento após
100 milissegundos (através do método postDelayed, situado na variável
handleAumentar (do tipo Handler)). Dentro do código do botão
btaumentar_auto (dentro do método onClick) existe a seguinte instrução:

handleAumentar.post(runnableAumentar);

176
Que dispara a instrução que incrementa o “progresso” da barra (através do
método post do objeto handleAumentar).

Depois das modificações feitas, podemos executar a nossa aplicação. Confira


o resultado conforme mostra a figura seguinte:

Aplicação em execução

5.9) Desenvolvendo uma aplicação que demonstra o uso componente


DatePicker

A partir de agora vamos desenvolver uma aplicação que fará o uso do


componente DatePicker (muito utilizado em calendários e também para definir
datas). Vamos criar agora um projeto com os seguintes dados abaixo:

Application Name: Demonstracao Date Picker

Company Domain : app.usuario

Project location : (Fica a sua escolha)

177
Activity Name: DatePickerActivity

Layout Name : activity_date_picker

Title : Demonstracao Date Picker

Resource Menu Name : menu_ date_picker

Por alguns problemas que encontrei no Android Studio ao pré-visualizar o


componente DatePicker na tela, irei construir a tela de nossa aplicação usando
o código XML. Vejamos o problema que encontrei nesta versão (possivelmente
na próxima versão do Android Studio, isso já tenha sido corrigido) :

????

Problema no Android Studio : Cadê o componente na tela ?

Vamos abrir a guia “Text” para inserirmos o código XML da nossa tela abaixo :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"

178
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".DatePickerActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Configure a data"
tools:context=".DatePickerActivity" />
<DatePicker
android:id="@+id/data"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btmostrardata"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Mostrar data" />

</LinearLayout>

Agora vamos no arquivo “DatePickerActivity.java” para colocarmos o seguinte


código:

package usuario.app.demonstracaodatepicker;

import android.os.Bundle;
import android.app.Activity;
import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;
import android.app.*;

public class DatePickerActivity extends Activity {

DatePicker data;

Button btmostrardata;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_date_picker);

data = (DatePicker) findViewById(R.id.data);

btmostrardata = (Button) findViewById


(R.id.btmostrardata);

179
btmostrardata.setOnClickListener(new
View.OnClickListener() {

@Override
public void onClick(View arg0) {

AlertDialog.Builder dialogo = new AlertDialog.


Builder(DatePickerActivity.this);

dialogo.setMessage("Data selecionada : " +


String.valueOf(data.getDayOfMonth()) +
"/" + String.valueOf(data.getMonth() + 1) + "/" +
String.valueOf(data.getYear()));

dialogo.setNeutralButton("OK", null);
dialogo.setTitle("Data");
dialogo.show();

}
});

Após digitar todo o código mostrado acima, vamos executar a nossa aplicação.
O resultado você vê na figura seguinte:

180
Aplicação de calendário em execução
.
Se clicarmos no botão “Mostrar data”, será exibida a data selecionada no
calendário, conforme podemos ver na figura seguinte :

Data selecionada no componente

181
5.10) Desenvolvendo uma aplicação que demonstra o uso componente
TimerPicker

A partir de agora vamos desenvolver uma aplicação que fará o uso do


componente TimePicker (ele é similar ao DatePicker , só que ao invés de
trabalhar com data trabalha com horas). Vamos criar agora um projeto com os
seguintes dados abaixo:

Application Name: Demonstracao TimePicker

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: TimePickerActivity

Layout Name : activity_time_picker

Title : Demonstracao Time Picker

Resource Menu Name : menu_ time_picker

Devido a problemas encontrados também ao visualizar e trabalhar com este


componente no modo “Design” vamos digitar seu código XML diretamente
(abrindo a guia “Text”) :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".TimePickerActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:text="Configura a hora"
android:textSize="20sp" />

<TimePicker

182
android:id="@+id/hora"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btmostrarhora"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Mostrar hora" />
</LinearLayout>

Agora vamos no arquivo “TimePickerActivity.java” para digitarmos o seguinte


código abaixo:

package usuario.app.demonstracaotimepicker;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.view.View;
import android.widget.Button;
import android.widget.TimePicker;

public class TimePickerActivity extends Activity {

TimePicker hora;
Button btmostrarhora;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_time_picker);

hora = (TimePicker) findViewById(R.id.hora);

btmostrarhora = (Button) findViewById


(R.id.btmostrarhora);

btmostrarhora.setOnClickListener(new
View.OnClickListener() {

@Override
public void onClick(View arg0) {
AlertDialog.Builder dialogo = new
AlertDialog.Builder(TimePickerActivity.this);
dialogo.setMessage("Hora selecionada : " +
String.valueOf(hora.getCurrentHour() + 1) + ":" +
String.valueOf(hora.getCurrentMinute()));
dialogo.setNeutralButton("OK", null);
dialogo.setTitle("Hora");
dialogo.show();
}
});
}
}

183
Vamos executar a nossa aplicação . O resultado você vê na figura seguinte:

Aplicação que demonstra o uso do TimePicker em execução

5.11) Desenvolvendo uma aplicação de sistema de classificação

Neste tópico iremos aprender a desenvolver uma aplicação que consiste em


um pequeno sistema de classificação (onde nela iremos avaliar um jogo). Para
esse tipo de situação vamos utilizar o componente RatingBar, desenvolvido
para esse tipo de situação.

Crie um novo projeto no Android Studio com os seguintes dados abaixo:

Application Name: Sistema de Classificacao

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: ClassificacaoActivity

Layout Name : activity_classificacao

184
Title : Sistema de Classificacao

Resource Menu Name : menu_ classificação

Depois de criado o projeto altere as propriedades do componente TextView


conforme você pode conferir abaixo:

TextView

Propriedade Valor
padding (Deixar em branco)
text Avalie o jogo abaixo:

Feito isso adicione uma estrutura LinearLayout (Horizontal) e modifique as


seguintes propriedades abaixo:

LinearLayout (Horizontal)

Propriedade Valor
id layoutFoto
gravity center

Dentro da estrutura que adicionamos acima, vamos adicionar um componente


ImageView que vai conter a foto do jogo (para este exemplo estou utilizando
uma imagem chamada “jogo_angry_birds.jpg” que acompanha este material
(encontra-se na pasta “Tópico 5.11”) . Fique a vontade para escolher a imagem
do jogo que você queira). Feito isso altere as suas propriedades abaixo:

ImageView

Propriedade Valor
id imagem_jogo
layout:width 200dp
layout:height 200dp
src “jogo_angry_birds.jpg”

Selecione novamente o componente layoutFoto (LinearLayout) e modifique a


seguinte propriedade :

LinearLayout

Propriedade Valor
layout:height wrap_content

185
Logo abaixo a estrutura layoutFotos que adicionamos , coloque os seguintes
componentes abaixo:

TextView

Propriedade Valor
text Deixe seu voto

RatingBar

Propriedade Valor
id rtbvotacao
numStars 4

TextView

Propriedade Valor
id txtstatus
text Status:

Seguindo os passos acima, a aplicação deve estar de acordo como mostra a


figura seguinte:

186
Layout da tela da aplicação

Vejamos o código XML da estrutura da tela da aplicação acima:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".ClassificacaoActivity">

<TextView android:text="Avalie o jogo abaixo:"


android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />

<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true"
android:id="@+id/layoutFoto"
android:gravity="center">

187
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="@+id/imagem_jogo"
android:src="@drawable/jogo_angry_birds" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Deixe seu voto:"
android:id="@+id/textView2"
android:layout_below="@+id/layoutFoto"
android:layout_alignParentLeft="true" />

<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/rtbvotacao"
android:layout_below="@+id/textView2"
android:layout_alignParentLeft="true"
android:numStars="4" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Status :"
android:id="@+id/txtstatus"
android:layout_below="@+id/rtbvotacao"
android:layout_alignParentLeft="true" />

</RelativeLayout>

Agora vamos no arquivo “ClassificacaoActivity.java” para digitarmos o seguinte


código:

package usuario.app.sistemadeclassificacao;

import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;

public class ClassificacaoActivity extends Activity {

TextView txtstatus;

RatingBar rtbvotacao;

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_classificacao);

188
txtstatus = (TextView) findViewById(R.id.txtstatus);

rtbvotacao = (RatingBar) findViewById(R.id.rtbvotacao);

txtstatus.setText("Status: Ruim");

rtbvotacao.setOnRatingBarChangeListener(new
RatingBar.OnRatingBarChangeListener() {

@Override
public void onRatingChanged(RatingBar ratingBar,
float rating, boolean fromUser) {

if (rating == 1)
txtstatus.setText("Status: Regular");
else if (rating == 2)
txtstatus.setText("Status: Bom");
else if (rating == 3)
txtstatus.setText("Status: Ótimo");
else if (rating == 4)
txtstatus.setText("Status: Excelente");
}
});

Vamos analisar agora o método onRatingChanged, que é disparado toda vez


que mexemos no componente para definimos uma votação (classificação). Um
dos argumentos presentes no método é o parâmetro “rating” que armazena um
valor de ponto flutuante que retorna (em um número) o valor da classificação
(ele retorna “0.5” se “meia” estrela está preenchida, e retorna “1” quando uma
estrela está preenchida). Veja uma demonstração:

Parâmetro “rating” Equivale a quantas


(valor) estrelas
0,5 Meia estrela preenchida
1 Uma estrela preenchida
1,5 Uma estrela e meia
preenchida
2 Duas estrelas preenchidas

De acordo com o valor da classificação, é exibido seu o status , conforme é


demonstrado no código abaixo:

189
if (rating == 1)
txtstatus.setText("Status: Regular");
else if (rating == 2)
txtstatus.setText("Status: Bom");
else if (rating == 3)
txtstatus.setText("Status: Ótimo");
else if (rating == 4)
txtstatus.setText("Status: Excelente");

Execute a aplicação e faça os teste. Veja a imagem seguinte:

Aplicação de sistema de classificação em execução

190
Capitulo 6 Trabalhando com
mais de uma tela em uma
aplicação

A té agora as aplicações que desenvolvemos tinham somente uma única


tela, mas, sabemos que algumas aplicações possuem normalmente
mais de uma tela. A partir de agora iremos aprender como inserir e
gerenciar várias telas em uma aplicação Android através dos exemplos que
serão demonstrados nesse capítulo.

Para começarmos, vamos criar um novo projeto Android com os seguintes


dados abaixo:

Application Name: Troca de Telas

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: TrocaTelasActivity

Layout Name : tela_principal

Title : Troca de Telas

Resource Menu Name : menu_ tela_principal

Altere a estrutura de layout da sua aplicação para o LinearLayout e em


seguida altere o componente TextView de acordo com a tabela abaixo.

TextView

Propriedade Valor
Você está na tela
text
principal

191
Agora adicione um componente Button e modifique as seguintes propriedades:
Button

Propriedade Valor
id bttela2
layout:width match_parent
text Ir pata tela 2

Seguindo os passos acima, a aplicação deve estar de acordo com a figura


abaixo:

Layout da tela 1

Vejamos agora o código XML da tela da nossa aplicação:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".TrocaTelasActivity">

<TextView android:text="Você está na tela principal"


android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" />

192
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ir para tela 2"
android:id="@+id/bttela2"
android:layout_below="@+id/textView"
android:layout_alignParentLeft="true" />

</RelativeLayout>

Nossa primeira tela está pronta, muito bem! Agora vamos criar uma nova tela
para a nossa aplicação. O nome do arquivo que vai representar a segunda tela
da nossa aplicação vai se chamar “tela2.xml” (um arquivo XML). Conforme já
foi explicado (e explico novamente aqui), todos os arquivos que representam a
tela da aplicação devem estar dentro do diretório “layout” (situado dentro da
pasta “res” do projeto), logo, vamos criar o nosso arquivo dentro desse
diretório.

Para criarmos um novo arquivo XML dentro do diretório “layout” basta clicar
com o botão direito sobre a pasta “layout” e em seguida selecionar “New” e em
seguida clicar em “Layout Resource File”. Veja na figura abaixo :

Criando um novo arquivo de layout

Feito isso surgirá uma caixa de diálogo, conforme mostra a figura a seguir :

193
New Resource File

Por padrão a estrutura de layout padrão selecionada é LinearLayout (definida


em “Root element”). Vamos no campo “Root element" para substituir
LinearLayout por RelativeLayout. Feito isso , vamos no campo “File name”
para digitar “tela2” (que será o nome do nosso arquivo XML) e em seguida
clique em “OK” para que o arquivo seja gerado. Veja o resultado na figura
seguinte:

Tela de layout em branco

194
No componente RelativeLayout vamos modificar as seguintes propriedades a
seguir:

RelativeLayout

Propriedade Valor
padding / right @dimen/activity_horizontal_margin
padding / left @dimen/activity_horizontal_margin
padding / top @dimen/activity_vertical_margin
padding / bottom @dimen/activity_vertical_margin

Agora vamos adicionar os seguintes componentes, na sequência:

TextView

Propriedade Valor
text Você está na tela 2

Button

Propriedade Valor
id bttelaprincipal
padding:width match_parent
text Ir pata tela principal

Seguindo os passos acima, o layout do arquivo “tela2.xml” deve estar de


acordo com a figura abaixo:

195
Layout da tela 2

Vejamos agora o código XML da tela da nossa aplicação:

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Você está na tela 2"
android:id="@+id/textView2"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ir para tela principal"
android:id="@+id/bttelaprincipal"
android:layout_below="@+id/textView2"
android:layout_alignLeft="@+id/textView2" />
</RelativeLayout>

196
Agora vamos no arquivo “TrocaTelasActivity.java” para digitarmos o código em
seguida:

package usuario.app.trocadetelas;

import android.os.Bundle;
import android.app.Activity;
import android.widget.*;
import android.view.*;

public class TrocaTelasActivity extends Activity {

Button bttelaprincipal, bttela2;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
CarregarTelaPrincipal();
}
public void CarregarTelaPrincipal()
{
setContentView(R.layout.tela_principal);
bttela2 = (Button) findViewById(R.id.bttela2);
bttela2.setOnClickListener(new
View.OnClickListener() {

@Override
public void onClick(View v) {

CarregarTela2();

}
});
}

public void CarregarTela2()


{
setContentView(R.layout.tela2);
bttelaprincipal = (Button) findViewById
(R.id.bttelaprincipal);
bttelaprincipal.setOnClickListener(new
View.OnClickListener() {

@Override
public void onClick(View v) {

CarregarTelaPrincipal();

}
});
}
}

197
Observem que nesta classe eu criei dois métodos : CarregaTelaPrincipal e
CarregaTela2. Para toda aplicação que utilize mais de um layout (tela), o
carregamento dos layouts e de seus respectivos widgets devem estar
separados em funções desenvolvidas para esse propósito. Logo, o método
CarregaTelaPrincipal carrega o layout principal e seus respectivos
componentes, o mesmo válido para o método CarregaTela2, que carrega o
layout da tela 2 e seus respectivos componentes. Feito isso, execute a
aplicação. Veja o resultado abaixo:

Aplicação em execução (na tela principal)

198
Aplicação em execução (na segunda tela)

6.1) Desenvolvendo um Sistema de Cadastro (Primeira versão)

Com o que já aprendemos neste capítulo (e também nós capítulos e tópicos


anteriores) já podemos desenvolver agora uma aplicação mais interessante.
Para isso, vamos criar um sistema de cadastro de usuários, onde através dele
iremos cadastrar as seguintes informações: nome, telefone e endereço.

Essa aplicação vai possuir três telas, cada uma com as seguintes
funcionalidades:

Tela principal (tela com opções): Nessa tela da aplicação teremos um menu
que dará acesso ao cadastro do usuário e a visualização dos usuários
cadastrados.

Tela de cadastro: Nesse tela o usuário irá preencher os campos solicitados


pela aplicação e em seguida o mesmo poderá cadastrar para que as
informações sejam registradas.

Tela de visualização de dados: Nessa tela poderão ser visualizados os


dados (usuários) cadastrados. Se nada foi cadastrado na aplicação, será
exibida uma mensagem informando essa situação.

199
Nessa primeira versão da nossa aplicação que iremos desenvolver,
utilizaremos somente uma única Activity com vários arquivos XML (onde cada
arquivo XML representa uma tela da nossa aplicação) que será gerenciados
pela mesma.

Bom, vamos construir a nossa aplicação. Crie um novo projeto com os


seguintes dados abaixo:

Application Name: Sistema de Cadastro

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: MainActivity

Layout Name : tela_principal

Title : Sistema de Cadastro

Resource Menu Name : menu_ aplicacao

Dentro da pasta “drawable” vamos colocar uma imagem que acompanha este
material (que se encontra dentro do diretório “Tópico 6.x”) chamada
“icone_programa.png”.

Depois de colocar a imagem solicitada, abra o código XML do arquivo


“tela_principal.xml” para adicionarmos o seguinte código XML abaixo :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:id="@+id/layouttopo_tp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fdb46d"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icone_programa" />

200
<LinearLayout
android:id="@+id/layout_titulo_programa_tp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Sistema de"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Cadastro"
android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="Bem vindo ao Sistema de Cadastro. Esse é um pequeno
software de cadastro de usuários. Escolha uma das opções abaixo :"
android:textSize="18sp" />

<Button
android:id="@+id/btcadastrar_usuario"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cadastrar Usuário" />

<Button
android:id="@+id/bt_listar_usuarios_cadastrados"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Listar usuários cadastrados" />
</LinearLayout>

Depois de colocarmos o código XML solicitado, teremos o seguinte resultado


abaixo :

201
Layout da tela principal da aplicação

Agora vamos criar mais uma tela (arquivo de layout XML) para nossa
aplicação, referente à tela de cadastro de usuário. Para isso vamos clicar com
o botão direito sobre a pasta “layout” e em seguida vamos chamar o recurso de
criação de arquivos de layout XML para Android (o “Layout Resource File”,
conforme já foi mostrado anteriormente no último exemplo). O nome do nosso
arquivo de layout XML vai ser “cadastro_de_usuario”.

Depois de criado o arquivo vamos abrir o editor de XML para digitarmos o


seguinte código refente a tela de cadastro de usuários :

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/layouttopo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fdb46d"
android:orientation="horizontal" >

202
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icone_programa" />

<LinearLayout
android:id="@+id/layout_titulo_programa"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:orientation="vertical" >

<TextView

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Cadastro de"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Usuário"
android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>
</LinearLayout>

<TextView
android:id="@+id/txtnome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Preencha os dados abaixo :"
android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:text="Nome :"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/ednome"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<requestFocus />
</EditText>

203
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Endereço :"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/edendereco"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Telefone :"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/edtelefone"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="@+id/layout_botoes_cadastro"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >

<Button
android:id="@+id/btcadastrar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cadastrar" />

<Button
android:id="@+id/btcancelar_cadastro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancelar" />

</LinearLayout>

</LinearLayout>

Depois de digitarmos o código solicitado, teremos a seguinte aparência abaixo :

204
Layout da tela de cadastro

Agora vamos criar mais uma tela (arquivo de layout XML) para nossa
aplicação, que será referente à tela de listagem de usuários cadastrados. O
nome da nossa tela vai se chamar “listagem_usuarios_cadastros”.

Após criar a tela da nossa aplicação, abra o editor de XML para digitarmos o
seguinte código a seguir :

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/layouttopo_luc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fdb46d"
android:orientation="horizontal" >

<ImageView

android:layout_width="wrap_content"
android:layout_height="wrap_content"

205
android:src="@drawable/icone_programa" />

<LinearLayout
android:id="@+id/layout_titulo_programa_luc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Listagem de "
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Usuários"
android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

</LinearLayout>

<LinearLayout
android:id="@+id/layout_status_luc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >

<TextView
android:id="@+id/txtstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="Registros : 1/10"
android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nome :"
android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
android:id="@+id/txtnome"

206
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:text="[NOME]"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fb7600" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:text="Endereço :"
android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
android:id="@+id/txtendereco"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:text="[ENDERECO]"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fb7600" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:text="Telefone :"
android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
android:id="@+id/txttelefone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:text="[TELEFONE]"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fb7600" />

<LinearLayout
android:id="@+id/layout_botoes_luc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:paddingTop="10dp" >

<Button
android:id="@+id/btanterior"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Anterior" />

207
<Button
android:id="@+id/btproximo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Próximo" />

</LinearLayout>

<LinearLayout
android:id="@+id/layout_botao_fechar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >

<Button
android:id="@+id/btfechar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fechar" />

</LinearLayout>

</LinearLayout>

Depois de digitarmos o código XML de nossa tela, teremos o seguinte


resultado, conforme mostra a figura a seguir :

208
Layout da tela de listagem de usuários

Todos os registros dos usuários cadastrados estarão dentro de um objeto do


tipo ArrayList. Para isso, iremos criar agora uma classe que irá armazenar (e
retornar) os dados referentes ao usuário (nome, telefone e endereço) chamada
Registro.

Essa classe vai estar dentro do mesmo pacote onde se encontra o arquivo
“MainActivity.java” (neste caso, o primeiro pacote
“usuario.app.sistemadecadastro”). Vamos criar agora uma classe (conforme já
foi mostrado) chamada Registro, e em seguida vamos escrever o seu código
conforme é mostrado em seguida:

package usuario.app.sistemadecadastro;

public class Registro {

private String nome;


private String endereco;
private String telefone;

209
public Registro(String nome, String endereco, String telefone)
{
this.nome = nome;
this.endereco = endereco;
this.telefone = telefone;
}

public String getNome() { return nome; }


public String getTelefone() { return telefone; }
public String getEndereco() { return endereco; }

Agora vamos abrir o arquivo “MainActivity.java” para digitarmos o seguinte


código abaixo:

package usuario.app.sistemadecadastro;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;

public class MainActivity extends Activity {

private ArrayList<Registro> aRegistro;


TelaPrincipal tela_principal;
TelaCadastroUsuario tela_cadastro;
TelaListagemUsuarios tela_listagem;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

aRegistro = new ArrayList<Registro>();

tela_principal = new TelaPrincipal(this);


tela_cadastro = new TelaCadastroUsuario(this, tela_principal);
tela_listagem = new TelaListagemUsuarios(this, tela_principal);
tela_principal.setTelaCadastro(tela_cadastro);
tela_principal.setTelaListagem(tela_listagem);

tela_principal.CarregarTela();

public ArrayList<Registro> getRegistros() {

return aRegistro;

210
public void ExibirMensagem(String msg) {
AlertDialog.Builder d = new
AlertDialog.Builder(MainActivity.this);
d.setTitle("Aviso");
d.setMessage(msg);
d.setNeutralButton("OK", null);
d.show();
}

Muito provavelmente em seu editor de código do Android Developer Tools


deverá aparecer inúmeros erros (sublinhados em vermelho e marcados com
um “X”). Isso é pelo fato de o código presente nessa classe ainda não existir
(ou seja, será criado posteriormente).

A classe MainActivity será responsável por inicializar o vetor onde serão


armazenados os registros e carregar as telas da nossa aplicação (onde cada
uma delas será gerenciada por uma classe). Vamos analisar o seguinte bloco
de código em seguida :

aRegistro = new ArrayList<Registro>();

tela_principal = new TelaPrincipal(this);


tela_cadastro = new TelaCadastroUsuario(this, tela_principal);
tela_listagem = new TelaListagemUsuarios(this, tela_principal);

tela_principal.setTelaCadastro(tela_cadastro);
tela_principal.setTelaListagem(tela_listagem);

tela_principal.CarregarTela();

Na primeira linha do trecho, iniciamos e criamos em memória o nosso


ArrayList que armazenará todos os registros que serão gerenciados pelo
nosso programa.

No trecho restante criamos as instâncias das classes responsáveis pelo


gerenciamento de cada dela do programa (que AINDA VÃO SER CRIADAS,
com seus respectivos métodos) , são elas : TelaPrincipal,
TelaCadastroUsuario , TelaListagemUsuarios.

Na última instrução do trecho acima, carregamos a tela principal do programa,


através do método CarregarTela da classe TelaPrincipal (método e classes
que ainda serão criados).

211
Vamos criar agora uma classe (dentro do pacote
“usuario.app.sistemadecadastro”) chamada TelaPrincipal com o seguinte
código a seguir :

package usuario.app.sistemadecadastro;

import android.view.View;
import android.widget.Button;

public class TelaPrincipal {

MainActivity act;

Button btcadastrar_usuario;
Button bt_listar_usuarios_cadastrados;
TelaCadastroUsuario tela_cadastro;
TelaListagemUsuarios tela_listagem;

public TelaPrincipal(MainActivity act) {

this.act = act;

public void CarregarTela()


{
act.setContentView(R.layout.tela_principal);
btcadastrar_usuario = (Button)
act.findViewById(R.id.btcadastrar_usuario);
bt_listar_usuarios_cadastrados = (Button)
act.findViewById(R.id.bt_listar_usuarios_cadastrados);

btcadastrar_usuario.setOnClickListener(new
View.OnClickListener() {

@Override
public void onClick(View view) {

tela_cadastro.CarregarTela();
}
});

bt_listar_usuarios_cadastrados.setOnClickListener(new
View.OnClickListener() {

@Override
public void onClick(View view) {

tela_listagem.CarregarTela();
}
});
}

212
public void setTelaCadastro(TelaCadastroUsuario tela_cadastro)
{
this.tela_cadastro = tela_cadastro;
}

public void setTelaListagem(TelaListagemUsuarios tela_listagem)


{
this.tela_listagem = tela_listagem;
}

Essa classe simplesmente tem a finalidade de mostrar a tela principal do


programa, permitindo que o usuário escolha uma das opções da aplicação que
permite cadastrar o usuário e listar os usuários cadastrados.

Agora vamos criar uma nova classe chamada TelaCadastroUsuario (dentro


do pacote “usuario.app.sistemadecadastro”) com o seguinte código em seguida
:

package usuario.app.sistemadecadastro;

import android.app.*;
import android.content.DialogInterface;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class TelaCadastroUsuario {

MainActivity act;
EditText ednome,edendereco, edtelefone;
Button btcadastrar, btcancelar_cadastro;
TelaPrincipal tela_principal;

public TelaCadastroUsuario(MainActivity act, TelaPrincipal


tela_principal)
{
this.act = act;
this.tela_principal = tela_principal;
}

public void CarregarTela()


{
act.setContentView(R.layout.cadastro_de_usuarios);
ednome = (EditText) act.findViewById(R.id.ednome);
edtelefone = (EditText) act.findViewById(R.id.edtelefone);

213
edendereco = (EditText) act.findViewById(R.id.edendereco);
btcadastrar = (Button) act.findViewById(R.id.btcadastrar);
btcancelar_cadastro = (Button)
act.findViewById(R.id.btcancelar_cadastro);

btcadastrar.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

AlertDialog.Builder dialogo = new


AlertDialog.Builder(act);
dialogo.setTitle("Aviso");
dialogo.setMessage("Cadastrar usuário ?");
dialogo.setNegativeButton("Não", null);
dialogo.setPositiveButton("Sim", new
DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog,
int which) {

String nome =
ednome.getText().toString();
String telefone =
edtelefone.getText().toString();
String endereco =
edendereco.getText().toString();
act.getRegistros().add(new
Registro(nome,telefone,endereco));
act.ExibirMensagem("Cadastro efetuado com
sucesso.");
tela_principal.CarregarTela();

});
dialogo.show();
}
});

btcancelar_cadastro.setOnClickListener(new
View.OnClickListener() {

@Override
public void onClick(View view) {

AlertDialog.Builder dialogo = new


AlertDialog.Builder(act);
dialogo.setTitle("Aviso");
dialogo.setMessage("Sair do cadastro ?");
dialogo.setNegativeButton("Não", null);

214
dialogo.setPositiveButton("Sim", new
DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog,
int which) {

tela_principal.CarregarTela();

}
});
dialogo.show();
}
});
}

O código da classe TelaCadastroUsuario será responsável por efetuar os


registros dos cadastros dos usuários na aplicação.

Agora vamos criar uma classe chamada TelaListagemUsuarios (dentro do


pacote “usuario.app.sistemadecadastro”), com o seguinte código em seguida:

package usuario.app.sistemadecadastro;

import android.app.AlertDialog;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class TelaListagemUsuarios {

MainActivity act;
TelaPrincipal tela_principal;

Button btanterior, btproximo, btfechar;

TextView txtnome, txttelefone, txtendereco, txtstatus;

int index;

public TelaListagemUsuarios(MainActivity act,TelaPrincipal


tela_principal) {

this.act = act;
this.tela_principal = tela_principal;
index = 0;
}

215
public void CarregarTela()
{
//Antes de carregar a tela, verifica se existe registros
//inseridos
if(act.getRegistros().size() == 0)
{
(new AlertDialog.Builder(act))
.setTitle("Aviso")
.setMessage("Não existe nenhum registro cadastrado.")
.setNeutralButton("OK", null)
.show();

return;
}

act.setContentView(R.layout.listagem_usuarios_cadastrados);
btanterior = (Button) act.findViewById(R.id.btanterior);
btproximo = (Button) act.findViewById(R.id.btproximo);
btfechar = (Button) act.findViewById(R.id.btfechar);

txtnome = (TextView) act.findViewById(R.id.txtnome);


txtendereco = (TextView) act.findViewById(R.id.txtendereco);
txttelefone = (TextView) act.findViewById(R.id.txttelefone);
txtstatus = (TextView) act.findViewById(R.id.txtstatus);

PreencheCampos(index);
AtualizaStatus(index);

btanterior.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

if(index > 0)
{
index--;
PreencheCampos(index);
AtualizaStatus(index);
}
}
});
btproximo.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

if(index < act.getRegistros().size() - 1)


{
index++;
PreencheCampos(index);
AtualizaStatus(index);
}

216
}
});

btfechar.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

tela_principal.CarregarTela();

}
});
}

private void PreencheCampos(int idx)


{
txtnome.setText(act.getRegistros().get(idx).getNome());
txttelefone.setText(act.getRegistros().get(idx).getTelefone());
txtendereco.setText(act.getRegistros().get(idx).getEndereco());
}

private void AtualizaStatus(int idx)


{
int total = act.getRegistros().size();
txtstatus.setText("Registros : " + (idx+1) + "/" + total);
}

Essa classe será responsável por mostrar a listagem dos usuários cadastrados
no sistema.

Depois de digitarmos todos os códigos das classes mencionadas


anteriormente, vamos executar a nossa aplicação. O resultado você confere na
figura seguinte :

217
Aplicação em execução – Tela principal

Quando executamos a nossa aplicação, o que visualizamos e a tela principal


da aplicação. Quando clicamos no botão “Listar usuários cadastrados”, é
executado o seguinte trecho de código dentro da classe
TelaListagemUsuarios :

if(act.getRegistros().size() == 0)
{
(new AlertDialog.Builder(act))
.setTitle("Aviso")
.setMessage("Não existe nenhum registro cadastrado.")
.setNeutralButton("OK", null)
.show();

return;
}

Que verifica se o total de registros armazenados na aplicação é igual a “0” (ou


seja, se não existe nenhum registro cadastrado). Se a condição for verdadeira
(e será verdadeira), será visualizada a seguinte mensagem :

218
Agora vamos clicar no botão “Cadastrar Usuário”, para visualizarmos a
seguinte tela abaixo :

Aplicação em execução – Tela de cadastro de usuário

Vamos preencher abaixo o seguintes dados (fictícios) a seguir :

Nome Marcelo Costa


Endereço Av. Monteiro Costa 145
Telefone (31) 2100-9011

219
Vejamos o resultado :

Preenchendo os dados na aplicação

Quando clicamos no botão “Cadastrar” é executado o seguinte trecho de


código presente dentro da classe TelaCadastradoUsuario :

AlertDialog.Builder dialogo = new AlertDialog.Builder(act);


dialogo.setTitle("Aviso");
dialogo.setMessage("Cadastrar usuário ?");
dialogo.setNegativeButton("Não", null);
dialogo.setPositiveButton("Sim", new DialogInterface.OnClickListener()
{ ... });

Que será responsável por exibir a seguinte mensagem abaixo :

220
Perguntando se você deseja confirmar o cadastrar o usuário. Se clicarmos no
botão “Sim”, será executado o seguinte trecho de código abaixo (presente
dentro do evento OnClickListener presente dentro do método
setPositiveButton (responsável por mostrar o título “Sim” do botão), da classe
AlertDialog.Builder :

String nome = ednome.getText().toString();


String telefone = edtelefone.getText().toString();
String endereco = edendereco.getText().toString();

act.getRegistros().add(new Registro(nome,telefone,endereco));

act.ExibirMensagem("Cadastro efetuado com sucesso.");


tela_principal.CarregarTela();

As três primeiras linhas obtem dos campos os valores digitados (nome ,


telefone e endereço) , guardando cada valor em suas respectivas variáveis
(nome, telefone e endereço) :

Na linha seguinte :

act.getRegistros().add(new Registro(nome,telefone,endereco));

É efetuado o registro do usuário, onde as suas informações são armazenadas


dentro de uma instância da classe Registro. A instância da classe Registro
após registrar as informações passadas como parâmetro no método construtor,
a mesma é armazenada dentro do array de registros (retornado pelo método
getRegistros), que foi declarado dentro da classe MainActivity.

Após o registro e mostrado uma mensagem informando que o registro foi feito
com sucesso e em seguida carregada a tela principal do programa, pela
instrução :

tela_principal.CarregarTela();

221
Na tela principal do programa, vamos clicar no botão “Listar usuários
cadastrados”. Feito isso será mostrada a seguinte tela abaixo :

Aplicação em execução – Listagem dos usuários cadastrados

Experimente agora efetuar mais alguns registros na aplicação e confira a


listagem de aplicações.

6.2) Desenvolvendo um Sistema de Cadastro (Segunda versão)

Na primeira versão da aplicação que desenvolvemos para Android utilizamos


somente uma única Activity (a classe MainActivity) gerenciando várias telas
(onde cada tela era representada por uma classe individual).

Atualmente a técnica mais empregada (e mais comum hoje em dia na


programação com Android) é utilizar para cada tela uma Activity individual.

Vamos criar agora, uma nova versão do programa, onde cada tela da nossa
aplicação será gerenciada por uma Activity individual.

222
Vamos criar um novo projeto, de acordo com as informações abaixo :

Application Name: Sistema de Cadastro V2

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: MainActivity

Layout Name : tela_principal

Title : Sistema de Cadastro

Resource Menu Name : menu_ aplicacao

Dentro da pasta “res/drawable” vamos colocar a mesma imagem que utilizamos


no programa anterior (que se encontra dentro do diretório “Tópico 6.x”)..

Depois de colocar a imagem solicitada, abra o código XML do arquivo


“tela_principal.xml” para adicionarmos o seguinte código XML abaixo :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:id="@+id/layouttopo_tp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fdb46d"
android:orientation="horizontal" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icone_programa" />

<LinearLayout
android:id="@+id/layout_titulo_programa_tp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:orientation="vertical" >

223
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Sistema de"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Cadastro"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="Bem vindo ao Sistema de Cadastro. Esse é um pequeno
software de cadastro de usuários. Escolha uma das opções abaixo :"
android:textSize="18sp" />
<Button
android:id="@+id/btcadastrar_usuario"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cadastrar Usuário" />

<Button
android:id="@+id/bt_listar_usuarios_cadastrados"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Listar usuários cadastrados" />

</LinearLayout>

Depois de colocarmos o código XML solicitado, teremos o seguinte resultado


abaixo :

224
Layout da tela principal da aplicação

Agora vamos criar a tela de cadastro de usuários, porém, não da mesma forma
que fizemos no programa anterior. Vamos criar agora uma nova Activity que
será responsável por gerenciar somente a tela da cadastro. Para isso, vamos
clicar com o botão direito sobre a pasta “app” (na seção “Project”) e em
seguida selecione “New” / “Activity” / “Blank Activity”. Veja na figura abaixo :

Criando a nossa Activity

225
Feito será aberta uma caixa de diálogo, como mostra a figura a seguir :

Janela – New Android Activity

No campo “Activity Name” vamos informar o nome da nossa Activity que será
responsável por gerenciar a tela de cadastro de usuário. Vamos digitar
“TelaCadastroActivity” (sem aspas, é claro).

No campo “Layout Name” vamos digitar “tela_cadastro”.

No campo “Title” vamos digitar “Cadastro de Usuário”.

Vamos deixar DESMARCADO a opção “Launcher Activity”.

No campo “Menu Resource Name” vamos deixar “menu_tela_cadastro”.

Feito isso vamos clicar no botão “Finish” para criarmos a nossa Activity.

Agora vamos abrir o editor do arquivo “tela_cadastro.xml” para digitarmos o


seguinte código XML da tela , conforme podemos ver em seguida :

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"

226
android:orientation="vertical" >
<LinearLayout
android:id="@+id/layouttopo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fdb46d"
android:orientation="horizontal" >

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icone_programa" />
<LinearLayout
android:id="@+id/layout_titulo_programa"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Cadastro de"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Usuário"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>

<TextView
android:id="@+id/txtnome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Preencha os dados abaixo :"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:text="Nome :"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/ednome"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

227
<requestFocus />
</EditText>

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Endereço :"
android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText
android:id="@+id/edendereco"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:text="Telefone :"
android:textAppearance="?android:attr/textAppearanceMedium" />

<EditText
android:id="@+id/edtelefone"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<LinearLayout
android:id="@+id/layout_botoes_cadastro"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >

<Button
android:id="@+id/btcadastrar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cadastrar" />

<Button
android:id="@+id/btcancelar_cadastro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancelar" />

</LinearLayout>

</LinearLayout>

228
Feito isso teremos o seguinte resultado :

Layout da tela de cadastro

Agora, da forma como já foi mostrado, vamos criar mais uma Activity
responsável por gerenciar a tela de listagem de usuários cadastrados. Segue
os dados abaixo :

Activity Name : TelaListagemActivity


Layout Name : tela_listagem
Title : Listagem de Usuários
Menu Resource Name : menu_ tela_listagem

229
Depois de criar a nossa Activity vamos abrir o editor XML do arquivo
“tela_listagem.xml” para digitarmos o seguinte código abaixo :

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/layouttopo_luc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fdb46d"
android:orientation="horizontal" >

<ImageView

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icone_programa" />

<LinearLayout
android:id="@+id/layout_titulo_programa_luc"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_vertical"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Listagem de "
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Usuários"
android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

</LinearLayout>

<LinearLayout
android:id="@+id/layout_status_luc"
android:layout_width="match_parent"
android:layout_height="wrap_content"

230
android:gravity="right"
android:orientation="horizontal" >

<TextView
android:id="@+id/txtstatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="Registros : 1/10"
android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nome :"
android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
android:id="@+id/txtnome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:text="[NOME]"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fb7600" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:text="Endereço :"
android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
android:id="@+id/txtendereco"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:text="[ENDERECO]"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fb7600" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:text="Telefone :"
android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
android:id="@+id/txttelefone"
android:layout_width="wrap_content"

231
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:text="[TELEFONE]"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fb7600" />

<LinearLayout
android:id="@+id/layout_botoes_luc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:paddingTop="10dp" >

<Button
android:id="@+id/btanterior"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Anterior" />

<Button
android:id="@+id/btproximo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Próximo" />

</LinearLayout>

<LinearLayout
android:id="@+id/layout_botao_fechar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >

<Button
android:id="@+id/btfechar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fechar" />

</LinearLayout>

</LinearLayout>

232
Feito isso teremos o seguinte resultado :

Layout da tela de listagem de usuários

Agora vamos criar uma classe chamada Registro que vai estar dentro do
mesmo pacote onde se encontra o arquivo “TelaPrincipalActivity.java” (neste
caso, o pacote “usuario.app.sistemadecadastrov2”). Vamos criar agora uma
classe (conforme já foi mostrado) chamada Registro, e em seguida vamos
escrever o seu código conforme é mostrado em seguida:

package usuario.app.sistemadecadastrov2;

public class Registro {

private String nome;


private String endereco;
private String telefone;

public Registro(String nome, String endereco, String telefone)


{
this.nome = nome;
this.endereco = endereco;
this.telefone = telefone;
}

233
public String getNome() { return nome; }
public String getTelefone() { return telefone; }
public String getEndereco() { return endereco; }

Agora vamos criar uma classe chamada RegistrosManager, que irá possuir o
seguinte código abaixo :

package usuario.app.sistemadecadastrov2;

import java.util.ArrayList;

public class RegistrosManager {

private static ArrayList<Registro> aRegistros = null;

public static ArrayList<Registro> getRegistros()


{
if(aRegistros == null)
aRegistros = new ArrayList<Registro>();

return aRegistros;
}

Agora na classe (Activity) TelaPrincipalActivity vamos digitar o seguinte


código abaixo :

package usuario.app.sistemadecadastrov2;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Intent;

public class TelaPrincipalActivity extends Activity {

Button btcadastrarusuario;
Button btlistagemusuarios;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tela_principal);

234
btcadastrarusuario = (Button)
findViewById(R.id.btcadastrar_usuario);
btlistagemusuarios = (Button)
findViewById(R.id.bt_listar_usuarios_cadastrados);

btcadastrarusuario.setOnClickListener(new View.OnClickListener()
{

@Override
public void onClick(View view) {

Intent intentTelaCadastro = new


Intent(TelaPrincipalActivity.this,
TelaCadastroActivity.class);
startActivity(intentTelaCadastro);

}
});

btlistagemusuarios.setOnClickListener(new View.OnClickListener()
{

@Override
public void onClick(View view) {

if(RegistrosManager.getRegistros().size() == 0)
{
(new AlertDialog.Builder
(TelaPrincipalActivity.this))
.setTitle("Aviso")
.setMessage("Não existe nenhum registro
cadastrado.")
.setNeutralButton("OK", null)
.show();

return;
}

Intent intentTelaListagem = new


Intent(TelaPrincipalActivity.this,
TelaListagemActivity.class);

startActivity(intentTelaListagem);

}
});
}

235
Agora dentro da classe (Activity) TelaCadastroActivity vamos digitar o
seguinte código a seguir :

package usuario.app.sistemadecadastrov2;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class TelaCadastroActivity extends Activity {

EditText ednome,edendereco, edtelefone;


Button btcadastrar, btcancelar_cadastro;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tela_cadastro);

ednome = (EditText) findViewById(R.id.ednome);


edtelefone = (EditText) findViewById(R.id.edtelefone);
edendereco = (EditText) findViewById(R.id.edendereco);
btcadastrar = (Button) findViewById(R.id.btcadastrar);
btcancelar_cadastro = (Button)
findViewById(R.id.btcancelar_cadastro);

btcadastrar.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

AlertDialog.Builder dialogo = new


AlertDialog.Builder(TelaCadastroActivity.this);
dialogo.setTitle("Aviso");
dialogo.setMessage("Cadastrar usuário ?");
dialogo.setNegativeButton("Não", null);
dialogo.setPositiveButton("Sim", new
DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog,
int which) {

String nome =
ednome.getText().toString();

236
String telefone = edtelefone.getText().toString();
String endereco = edendereco.getText().toString();
RegistrosManager.getRegistros().add(new
Registro(nome,telefone,endereco));

(new AlertDialog.Builder(TelaCadastroActivity.this))
.setTitle("Aviso")
.setMessage("Cadastro efetuado com sucesso")
.setNeutralButton("OK", new DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int which) {

TelaCadastroActivity.this.finish();

}
})
.show();

});
dialogo.show();
}
});

btcancelar_cadastro.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

TelaCadastroActivity.this.finish();

}
});

}
}

237
Agora dentro da classe (Activity) TelaListagemActivity vamos digitar o
seguinte código a seguir :

package usuario.app.sistemadecadastrov2;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.app.Activity;

public class TelaListagemActivity extends Activity {

Button btanterior, btproximo, btfechar;

TextView txtnome, txttelefone, txtendereco, txtstatus;

int index;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tela_listagem);

btanterior = (Button) findViewById(R.id.btanterior);


btproximo = (Button) findViewById(R.id.btproximo);
btfechar = (Button) findViewById(R.id.btfechar);

txtnome = (TextView) findViewById(R.id.txtnome);


txtendereco = (TextView) findViewById(R.id.txtendereco);
txttelefone = (TextView) findViewById(R.id.txttelefone);
txtstatus = (TextView) findViewById(R.id.txtstatus);

PreencheCampos(index);
AtualizaStatus(index);

btanterior.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

if(index > 0)
{
index--;
PreencheCampos(index);
AtualizaStatus(index);
}
}
});

238
btproximo.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

if(index < RegistrosManager.getRegistros().size() – 1)


{
index++;
PreencheCampos(index);
AtualizaStatus(index);
}

}
});

btfechar.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View view) {

TelaListagemActivity.this.finish();

}
});

private void PreencheCampos(int idx)


{
txtnome.setText( RegistrosManager.getRegistros().get(idx).getNome());
txttelefone.setText(RegistrosManager.getRegistros()
.get(idx).getTelefone());
txtendereco.setText( RegistrosManager.getRegistros()
.get(idx).getEndereco());
}

private void AtualizaStatus(int idx)


{
int total = RegistrosManager.getRegistros().size();
txtstatus.setText("Registros : " + (idx+1) + "/" + total);
}

239
Depois de digitar todo o código das classes citadas vamos executar a nossa
aplicação. O resultado você confere na figura a seguir :

Aplicação em execução

A execução desse programa é similar ao da versão anterior. A diferença é que


neste programa utilizamos várias Activitys (ao invés de uma), onde cada
Activity gerencia uma tela (diferente da primeira versão onde tinhamos classes
comuns que gerenciavam as telas , sendo controladas por uma única Activity).

240
Capitulo 7 Conhecendo os
tipos de estruturas de layout
do Android

A plataforma Android nos oferece vários tipos de estruturas de layouts


que podemos utilizar em nossas aplicações. Até o presente momento,
trabalhamos com o RelativeLayout (estrutura padrão das telas do
dispositivo Android). Agora vamos conhecer outros tipos de estruturas de
layouts disponíveis no Android.

Para iniciar este capítulo, vamos começar criando primeiramente um projeto no


Android Studio com os seguintes dados:

Application Name: Tipos de Layout

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: TiposLayoutActivity

Layout Name : tela_relative_layout

Title : Tipos de Layout

Resource Menu Name : menu_ aplicacao

7.1) RelativeLayout

A estrutura RelativeLayout (padrão do Android Studio) organiza os


componentes relativamente sobre outros componentes já inseridos na
estrutura.

241
Quando criamos um projeto no Android Studio, automaticamente, a estrutura
de layout padrão utilizada pela tela do dispositivo Android é RelativeLayout.

Na tela do dispositivo Android visualizamos uma frase escrita “Hello world”.


Vamos selecionar essa frase (o componente TextView) e em seguida na
propriedade “text” desse vamos digitar a seguinte frase: “Digite seu nome”.
Veja o resultado na figura seguinte:

Texto modificação

Agora vamos inserir um componente do tipo EditText, porém, com o seguinte


detalhe: iremos arrastá-lo sobre o componente TextView que acabamos de
inserir e “não diretamente” na estrutura RelativeLayout, pois como havia
falado, a organização do componente inserido é baseada relativamente em
outro componente já inserido anteriormente. Se arrastarmos o componente
EditText sobre o componente TextView será exibida algumas “guias” nas
quais você pode ver para organizar seu componente, conforme você confere
na figura seguinte:

Arrastando o EditText sobre o TextView já inserido

Vamos colocar o nosso componente EditText de forma fique abaixo do nosso


TextView já inserido colocando-o ele em uma das guias exibidas, conforme a
indicação da figura acima.

242
Escolhido a posição desejada, bastar soltar o botão do mouse e o componente
será inserido, conforme você observa na figura abaixo:

Componente inserido

Agora mude as propriedades da EditText conforme tabela seguinte:

EditText

Propriedade Valor
Text (Deixar em branco)
layout:width match_parent

Agora vamos adicionar um componente Button em nossa aplicação. Arraste o


componente Button sobre o componente EditText e em seguida, coloque ele
no local conforme mostra a figura abaixo:

Arrastando o componente sobre um local

Veja como ficou o resultado na figura seguinte:

243
Componente inserido

Agora vamos alterar as propriedades do componente Button conforme a tabela


abaixo:

Button

Propriedade Valor
text Cancelar

Vejamos como ficou na figura seguinte :

Título do botão alterado

244
Agora vamos arrastar um outro componente Button sobre o componente
anteriormente inserido, de forma que ele fique do lado esquerdo dele, conforme
demonstra a figura seguinte:

Ajustando o componente na tela

Agora vamos alterar as propriedades do componente Button conforme a tabela


abaixo:

Button

Propriedade Valor
text OK

Veja como ficou a tela da nossa aplicação na figura seguinte:

Tela da aplicação

Agora vamos conferir o código XML da tela da aplicação:

245
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Digite seu nome:" />

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView1" >

<requestFocus />
</EditText>

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/editText1"
android:text="Cancelar" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText1"
android:layout_toLeftOf="@+id/button1"
android:text="OK" />

</RelativeLayout>

7.2) TableLayout

A estrutura TableLayout “comporta” os componentes nele inseridos como se


eles estivessem em uma tabela (Table) , organizados em linhas e colunas.

246
Vamos demonstrar o uso dessa estrutura. Dentro do projeto que criamos, na
pasta “layout”, vamos criar um arquivo XML chamado “table_layout” (cuja
estrutura de layout será TableLayout). Para isso, clique com o botão direto
sobre a pasta “layout” e em seguida selecione “New” / “Layout Resource File”.

No campo “File name” vamos digitar o nome do nosso arquivo, que se chamará
“table_layout”. No campo “Root element” vamos digitar “TableLayout”, que será
a nossa estrutura do nosso arquivo. Veja como ficou na figura abaixo :

Campos preenchidos

Clique em “OK” para gerarmos o nosso arquivo.

Como podemos ver, a tela não possui nenhum componente. Vamos


experimentar arrastar um componente do tipo TextView sobre a tela, e olha só
o que aparece enquanto estamos arrastando :

Coordenadas sendo exibidas

247
Observe que surgiu vários quadrinhos, onde cada quadrinho desse é uma
posição que podemos colocar o nosso componente. Vamos colocar nosso
componente na coordenada [row 0, column 0]. Vejamos o resultado:

Componente inserido na tela

Observe que surgiu nos locais indicados acima dois retângulos (um horizontal e
um outro vertical), indicando respectivamente a largura e a altura do
componente na tela.

Experimente agora colocar mais dois componentes do tipo TextView, um na


coordenada [row 0, column 1] e outro na [row 0, column 2]. Vejamos o
resultado :

Componentes inseridos na tela

Experimente agora colocar mais dois componentes do tipo TextView, um na


coordenada [row 1, column 0] e outro na [row 1, column 0]. Vejamos o
resultado :

248
Componentes inseridos na tela

OBS: Quando colocarmos os componentes distribuídos neste tipo de layout,


nunca pule ou salte colunas ou linhas, ou seja, coloque os componentes de
forma que eles estejam um abaixo do outro ou um ao lado do outro, nunca com
saltos.

Vamos ver agora como ficou o código em XML da tela da aplicação, conforme
você pode conferir abaixo:

<?xml version="1.0" encoding="utf-8"?>


<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">

<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/textView2"
android:layout_column="0" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/textView3"
android:layout_column="1" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

249
android:text="New Text"
android:id="@+id/textView4"
android:layout_column="2" />

</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/textView5"
android:layout_column="0" />
</TableRow>

<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/textView6"
android:layout_column="0" />
</TableRow>
</TableLayout>

7.3) LinearLayout

A estrutura LinearLayout organiza os componentes de forma que eles


possam ser distribuídos de forma horizontal e vertical (ele foi uma estrutura
padrão de distribuição de componentes nas primeiras versões do Android
Developer Tools). Vamos criar agora um arquivo de layout chamado
“tela_linear_layout”, através do “Layout resoruce file”. Veja abaixo como ficará
as configurações do nosso arquivo :

250
Clique em “OK” para que o arquivo possa ser criado. Vejamos a tela criada
abaixo :

Tela criada

Vamos adicionar um componente do TextView e em seguida, modifique a


seguinte propriedade abaixo :

TextView

Propriedade Valor
text Texto 1

Agora adicione mais dois componentes TextView na sequência, conforme as


tabelas a seguir:

251
TextView

Propriedade Valor
text Texto 2
TextView

Propriedade Valor
text Texto 3

Vejamos o resultado:

Componentes distribuídos com o LinearLayout (Vertical)

A estrutura LinearLayout que definimos acima faz a distribuição vertical dos


componentes (um embaixo do outro) . Vamos agora na propriedade
“orientation” e troque de “vertical” para “horizontal” (distribuição um ao lado do
outro) e confira o resultado:

Componentes distribuídos com o LinearLayout (Horizontal)

252
Capitulo 8 Trabalhando com
efeitos de transição

N
este capítulo iremos aprender a trabalhar com efeitos de transição em
componentes e telas de uma aplicação, através de uma estrutura
conhecida como ViewFlipper, situada na guia “Expert” da paleta de
componentes da ferramenta de desenvolvimento Android Studio.

Para começarmos vamos criar um novo projeto com as seguintes informações :

Application Name: Demonstracao ViewFlipper

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: ViewFlipperActivity

Layout Name : activity_view_flipper

Title : Tipos de Layout

Resource Menu Name : menu_ view_flipper

Depois de criado o projeto vamos alterar os atributos do componente TextView


, conforme mostrados a seguir:

TextView

Propriedade Valor
text Demonstração ViewFlipper
textSize 20sp
textColor #a60000

253
Agora vamos na seção “Expert” e em seguida vamos arrastar o componente
ViewFlipper para a tela do nosso dispositivo (e abaixo do título que acabamos
de configurar agora a pouco)

Feito isso vamos alterar as seguintes propriedades abaixo do componente


inserido:

ViewFlipper

Propriedade Valor
id viewFlipper
layout:width match_parent
layout:height 150sp

Vejamos o resultado:

Componente ViewFlipper inserido na tela

Agora dentro do componente ViewFlipper vamos inserir uma TextView. Em


seguida, vamos conferir o resultado:

254
Componente TextView inserido dentro da estrutura ViewFlipper

Agora vamos arrastar um componente do tipo Button para dentro da estrutura


ViewFlipper e confira o resultado :

Componente Button inserido dentro da estrutura (Ué, cadê o Button ?)

Se observarmos acima o componente Button que inserimos não está sendo


visualizado. Isso ocorreu porque a estrutura so exibe um componente de cada
vez, e a exibição de cada componente é controlada e gerenciada via
programação (ou também via atributos XML).

Como eu posso saber se meu componente Button foi realmente inserido ?


Basta olharmos para a guia “Component Tree” da ferramenta, conforme é
mostrado a seguir:

255
Componente Button inserido dentro da estrutura

Agora, para finalizar, arraste um componente RadioButton dentro da estrutura


ViewFlipper . Se olharmos a tela da aplicação, da mesma forma que o
componente Button, não visualizamos o componente RadioButton , somente
podemos visualizá-lo pela guia “Component Tree”, conforme podemos conferir
a seguir:

Componente RadioButton inserido dentro da estrutura

Agora vamos executar a nossa aplicação para conferirmos o resultado:

256
Aplicação em execução (nada acontece)

Se observamos a aplicação acima, só visualizamos somente um único


componente na tela e nenhum efeito de transição acontece. Óbvio! Isso porque
não definimos nenhuma configuração ou parâmetro para que isso aconteça.

Vamos fazer funcionar o nosso componente ViewFlipper para realizar os


efeitos de transição.

Primeiramente vamos selecionar o componente ViewFlipper inserido e em


seguida vamos em suas propriedades alterar os seguintes atributos

ViewFlipper

Propriedade Valor
flipInterval 2000
autoStart true (marcar opção)

A propriedade “Auto Start” define que o objeto ao ser iniciado irá realizar
“automaticamente” as transições dos elementos presentes dentro dele, e a
propriedade “Flip Interval” define o intervalo (em milissegundos) da transição de
um elemento para o outro (o valor 2000 equivale a 2 segundos).

257
Vamos executar agora a nossa aplicação para conferirmos os resultados:

Aplicação em execução (transição sem efeito de animação)

Se observarmos a aplicação, ocorreu a troca dos elementos, porém, sem


nenhum tipo de efeito (parece aquele efeito “Aparecer” do Power Point com
“Ocultar após animação” não é mesmo ?) . Todos os efeitos de transição ficam
armazenados em arquivos XML que devem estar dentro do diretório “anim” do
nosso projeto.

Para aplicarmos esses efeitos, primeiramente, vamos criar uma pasta chamada
“anim” dentro do diretório “res” do nosso projeto :

Para criarmos um novo diretório especifico para arquivos de animação basta


clicar com o botão direito do mouse sobre a pasta “res” e em seguida
selecionar “New” / “Android resource directory”. Feito isso será aberta a
seguinte caixa de diálogo :

258
Caixa de diálogo – New Resource Directory

No campo “Directory name” vamos digitar “anim” (não pode ser outro nome,
tem que se chamar “anim”). Em “Resource type” troque a opção “values” para
“anim”. Depois disso é só clicar em “OK”.

Em seguida, vamos criar dois arquivos “XML” que irão representar os efeitos de
transição. Para isso , clique com o botão direito do mouse sobre a pasta “anim”
e selecione “New” / “Animation resource file”. Veja na figura abaixo:

Criando um arquivo de animação

259
Feito isso será aberta a seguinte caixa de diálogo em seguida:

Caixa de diálogo – New Resource File

No campo “File name” vamos digitar o nome do nosso arquivo, que será
chamar “in_left”. Depois disso clique em “OK”. Feito isso o arquivo será criado,
conforme mostra a figura a seguir :

Arquivo criado com sucesso

Dentro do arquivo “in_left.xml” vamos digitar o seguinte código, conforme


podemos ver em seguida :

260
<?xml version="1.0" encoding= ”utf-8”?>
<set xmlns:android=”http://schemas.android.com/apk/res/android”>
<translate android:fromXDelta=”100%p” android:toXDelta=”0”
android:duration=”300”/>
<alpha android:fromAlpha=”0.0” android:toAlpha=”1.0”
android:duration=”300” />
</set>

Depois de digitar o código vamos criar um segundo arquivo (também dentro da


pasta “anim”), que irá se chamar “out_right.xml”. Esse arquivo irá possuir o
seguinte código abaixo:

<?xml version=”1.0” encoding=”utf-8”?>


<set xmlns:android=”http://schemas.android.com/apk/res/android”>
<translate android:fromXDelta=”0” android:toXDelta=”100%p”
android:duration=”300”/>
<alpha android:fromAlpha=”1.0” android:toAlpha=”0.0”
android:duration=”300” />
</set>

Depois de criarmos os arquivos, vamos novamente em nossa aplicação para


selecionarmos o componente ViewFlipper para em seguida alterar as
seguintes propriedades:

ViewFlipper

Propriedade Valor
inAnimation @anim/in_left
outAnimation @anim/out_right

Feito as alterações, execute a aplicação e confira os resultados:

261
Aplicação em execução (transição com efeito de animação)

Que ótimo! Agora nossos componentes são exibidos com efeitos de transição.

Dentro do diretório “anim” vamos criar mais dois arquivos, cada um com seus
respectivos códigos como segue:

Arquivo “fade_in.xml”

<?xml version=”1.0” encoding=”utf-8”?>


<set xmlns:android=”http://schemas.android.com/apk/res/android”>
<alpha android:fromAlpha=”0.0” android:toAlpha=”1.0”
android:duration=”300” />
</set>

Arquivo “fade_out.xml”

<?xml version=”1.0” encoding=”utf-8”?>


<set xmlns:android=”http://schemas.android.com/apk/res/android”>
<alpha android:fromAlpha=”1.0” android:toAlpha=”0.0”
android:duration=”300” />
</set>

262
Agora vamos alterar os atributos do componente ViewFlipper abaixo:

ViewFlipper

Propriedade Valor
inAnimation @anim/fade_in
outAnimation @anim/fade_out

Agora execute a aplicação e confira os resultados.

Transições manuais, via programação

Até agora aprendemos a realizar transições utilizando a propriedade “auto


Start” que realiza tudo de forma “automática” sem utilizar código Java, agora,
vamos aprender a realizar transições “manualmente”, via programação no
Android.

Utilizando o mesmo exemplo desenvolvido, vamos adicionar uma estrutura do


tipo LinearLayout (Horizontal), abaixo da estrutura ViewFlipper, e depois
disso altere a seguinte propriedade:

LinearLayout

Propriedade Valor
gravity center
layout:width match_parent

E dentro da estrutura inserida acima vamos adicionar dois botões, com as


informações a seguir:

Button

Propriedade Valor
id btanterior
text Anterior

Button

Propriedade Valor
id btproximo
text Proximo

263
Vamos voltar para o componente LinearLayout e modifique a propriedade a
seguir:

LinearLayout

Propriedade Valor
layout:height wrap_content

Veja o resultado :

Layout da tela da aplicação

Agora para finalizar, vamos alterar a seguintes propriedades :

ViewFlipper

Propriedade Valor
autoStart false (desmarcar)
id viewFlipper

Agora vamos para o arquivo “ViewFlipperActivity.java” para digitarmos o


seguinte código:

package usuario.app.demonstracaoviewflipper;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.*;

264
public class ViewFlipperActivity extends Activity {

Button btanterior, btproximo;


ViewFlipper viewFlipper;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_flipper);

viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);

btanterior = (Button) findViewById(R.id.btanterior);


btproximo = (Button) findViewById(R.id.btproximo);

btanterior.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
viewFlipper.showPrevious();

}
});
btproximo.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
viewFlipper.showNext();
}
});
}

Irei explicar aqui algumas linhas de código do nosso projeto. A instrução :

viewFlipper.showPrevious();

Serve para mostrar o elemento anterior dentro da estrutura ViewFlipper


usando recursos de transição para exibir o mesmo na tela . Já a instrução :

viewFlipper.showNext();

Serve para mostrar o próximo elemento dentro da estrutura ViewFlipper


usando recursos de transição para exibir o mesmo na tela .

Depois de escrever o código acima, execute a aplicação e confira os


resultados:

265
Aplicação em execução (transição manual)

Até agora aprendemos a realizar transições entre elementos em uma aplicação


Android. Vamos aprender agora como realizar uma transição entre telas em
uma aplicação. A idéia é basicamente a mesma, não há nenhum mistério.

Vamos criar um novo projeto com as seguintes propriedades abaixo:

Application Name: Demonstracao ViewFlipper V2

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: ViewFlipperActivity

Layout Name : activity_view_flipper

Title : Tipos de Layout

Resource Menu Name : menu_ view_flipper

266
Apos criar o projeto vamos apagar primeiramente o componente TextView
frase “Hello world!”) da tela. Em seguida, vamos arrastar o componente
ViewFlipper. Feito isso vamos modificar as seguintes propriedades abaixo:

ViewFlipper

Propriedade Valor
layout:width match_parent
layout:height match_parent

Dentro do ViewFlipper vamos arrastar e colocar um componente


LinearLayout (Vertical).

Dentro da estrutura LinearLayout inserida, vamos adicionar os seguintes


componentes na sequência.

TextView

Propriedade Valor
text Cadastro V1.0
textColor #ff0000
textSize 25sp
layout:width match_parent
gravity center

TextView

Propriedade Valor
Escolha a opção
text
abaixo:

Button

Propriedade Valor
id btinserirregistro
text Inserir Registro

267
Vejamos como ficou a tela da nossa aplicação:

Tela da aplicação

Vejamos agora como está nossa aplicação estruturada , vendo pela guia
“Component Tree” :

Estrutura da aplicação (guia “Component Tree”)

Os próximos componentes a serem inseridos não serão visualizados na tela da


aplicação, somente na seção “Component Tree”, pois, o ViewFlipper “enxerga”
o LinearLayout (com todos os elementos dentro dele) como um único
elemento somente, por isso conseguimos ver todos os componentes na
estrutura LinearLayout.

Agora dentro da estrutura ViewFlipper vamos adicionar mais um componente


do tipo LinearLayout (Vertical), porém, iremos ARRASTAR o componente
DIRETAMENTE no “Component Tree”, conforme podemos ver na figura em
seguida:

268
1) Clique aqui e mantenha 2) Arraste e solte
pressionado. DIRETAMENTE AQUI, e
não tela tela.

Por que não arrastamos diretamente na tela ?

Se arrastassemos esse componente diretamente na tela, estaríamos


colocando um LinearLayout dentro de outro LinearLayout, e não dois
componentes separados dentro de um ViewFlipper.

Depois de colocar a estrutura LinearLayout , coloque os próximos


componentes dentro dessa estrutura (usando o método acima, colocando pelo
“Component Tree”), conforme mostra a sequencia abaixo:

TextView

Propriedade Valor
Informe os dados a
text
seguir:
TextView

Propriedade Valor
text Nome:

EditText

Propriedade Valor
layout:width match_parent

269
TextView

Propriedade Valor
text Telefone:

EditText

Propriedade Valor
layout:width match_parent

Vejamos como esta ficando a estrutura da aplicação:

Estrutura da aplicação (guia “Component Tree”)

Agora vamos adicionar uma estrutura do tipo LinearLayout (Horizontal) ,


sabendo-se que esse estrutura vai estar dentro da LinearLayout de orientação
vertical e não dentro do ViewFlipper. Após adicionar, altere as seguintes
propriedades:

LinearLayout

Propriedade Valor
gravity center
layout:height wrap_content

270
Após inserir a estrutura, vamos adicionar os seguintes componentes dentro
dela:

Button

Propriedade Valor
text Cadastrar

Button

Propriedade Valor
id btcancelar
text Cancelar

Vejamos o resultado da estrutura da aplicação:

Estrutura da aplicação (guia “Component Tree”)

Vejamos agora a cara da nossa aplicação :

271
Tela da aplicação final (em tempo de projeto)

Agora dentro do diretório “res” do nosso projeto, crie uma pasta chamada
“anim” e dentro dela adicione os seguintes arquivos, com os seus respectivos
códigos:

Código do arquivo “in_left.xml”

<?xml version="1.0" encoding="utf-8"?>


<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%p" android:toXDelta="0"
android:duration="300"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="300" />
</set>

Código do arquivo “out_right.xml”

<?xml version="1.0" encoding="utf-8"?>


<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
android:duration="300"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
android:duration="300" />
</set>

Para finalizar, vamos selecionar o componente ViewFlipper adicionado para


alteramos os seguintes atributos:

272
ViewFlipper

Propriedade Valor
id viewFlipper
inAnimation @anim/in_left
outAnimation @anim/out_right

Agora vamos ver o código XML de nossa aplicação:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".ViewFlipperActivity">
<ViewFlipper
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewFlipper"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cadastro V1.0"
android:id="@+id/textView"
android:textColor="#ff0000"
android:textSize="25sp"
android:gravity="center" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Escolha a opção abaixo:"
android:id="@+id/textView2" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Inserir Registro"
android:id="@+id/btinserirregistro" />
</LinearLayout>

273
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Informe os dados a seguir:"
android:id="@+id/textView3" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nome:"
android:id="@+id/textView4" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/editText" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Telefone:"
android:id="@+id/textView5" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/editText2" />

<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cadastrar"
android:id="@+id/button" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancelar"
android:id="@+id/btcancelar" />
</LinearLayout>
</LinearLayout>
</ViewFlipper>

</RelativeLayout>

274
Agora vamos digitar o código do arquivo “ViewFlipperActivity.java”, conforme é
mostrado em seguida:

package usuario.app.demonstracaoviewflipperv2;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.*;
import android.view.*;

public class ViewFlipperActivity extends Activity {

Button btinserirregistro, btcancelar;

ViewFlipper viewFlipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_flipper);

viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);


btinserirregistro = (Button)
findViewById(R.id.btinserirregistro);
btcancelar = (Button) findViewById(R.id.btcancelar);
btinserirregistro.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View arg0) {
viewFlipper.showNext();
}
});
btcancelar.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
viewFlipper.showPrevious();
}
});
}
}

Depois de escrever o código acima, execute a aplicação e confira os


resultados, conforme é exibido na figura seguinte :

275
Aplicação em execução

Até aqui aprendemos como trabalhar com mais de uma tela em uma aplicação
como também aplicar efeitos de transição nos elementos que são visualizados.
Agora no próximo capítulo iremos aprender a colocar menus em uma
aplicação.

276
Capitulo 9 Trabalhando com
menus em uma aplicação

E m uma aplicação Android é possível implementarmos e trabalharmos


com menus , onde neles podemos agregar funções que poderão ser
executadas de acordo com a nossa necessidade. Os menus da
aplicação são visualizados quando pressionamos o botão “Menu” do dispositivo
(existentes nos Smartphones, Tablets). Neste capítulo vamos demonstrar o uso
dos menus em uma aplicação Android.

Vamos começar criando primeiramente um projeto de acordo com os seguintes


dados abaixo:

Application Name: Exemplo com Menus

Company Domain : app.usuario

Project location : (Fica a sua escolha)

Activity Name: MenusActivity

Layout Name : activity_menus

Title : Exemplo com Menus

Resource Menu Name : menu_ aplicacao

Depois de criado o projeto mude as propriedades do componente TextView


conforme demonstra a tabela seguinte:

TextView

Propriedade Valor
Clique no botão menu para ver as
text
opções

277
Seguindo o passo acima, a aplicação deve estar de acordo com a figura
abaixo:

Layout da tela de aplicação

Vejamos agora a estrutura XML da tela desta aplicação:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MenusActivity">

<TextView android:text="Clique no botão menu para ver as opções"


android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</RelativeLayout>

Vejamos agora o código do arquivo “MenusActivity.java”:

package usuario.app.exemplocommenus;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MenusActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {

278
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_menus);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is
// present.
getMenuInflater().inflate(R.menu.menu_aplicacao, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

Se observarmos o código acima, por padrão, existe um método responsável


por carregar um menu do arquivo XML (o arquivo “menu_aplicacao.xml”). O
nome desse método é onCreateOptionsMenu. Ele é executado durante o
carregamento do programa na memória. O arquivo que contém todos os itens
de menu se encontra dentro do diretório “menu”, dento da pasta de recursos do
projeto (a pasta “res”).

Vamos carregar o arquivo “menu_aplicacao.xml” situado dentro do diretório


“menu” para adicionarmos os menus da nossa aplicação. Vejamos o seu
código:

279
Código XML do arquivo “menu_aplicacao.xml”

Se observarmos o seu código acima, existe um item de menu que exibe o item
“Settings”.

Vamos executar a nossa aplicação para observarmos como os menus


funcionam na prática. Com o emulador aberto, pressione a tecla “F2” para que
possamos exibir a opção de menu, conforme podemos ver na figura em
seguida :

Menu em exibição

280
Para demonstrar o uso deste recurso de menus no Android irei criar um menu
com três itens de opções : “Novo” , “Abrir” e “Salvar”. Nas versões mais atuais
do Android (como o 4.x), diferentemente das versões anteriores (como o 2.x e
etc), não é e não será possível atribuir ícones para os itens de menu
adicionados na aplicação.

Para começar vamos “remover” o item “Settings” do arquivo


“menu_aplicacao.xml”, conforme mostra a figura abaixo :

Item removido

Para adicionarmos os itens de menu adicione o seguinte código XML


destacado em azul, conforme podemos ver em seguida:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MenusActivity">

<item android:id="@+id/item_novo"
android:title="Novo" ></item>
<item android:id="@+id/item_abrir"
android:title="Abrir" ></item>
<item android:id="@+id/item_salvar"
android:title="Salvar" ></item>

</menu>

Agora vamos voltar para o arquivo “MenusActivity.java”. Possivelmente você


deve ter se deparado com esse erro, conforme mostra a próxima figura :

281
Erro - O item de menu não existe mais.

O erro acima ocorreu pelo fato de removermos aquele item padrão que já fica
presente no arquivo de menu. Para solucionarmos esse erro basta remover o
seguinte trecho de código destacado abaixo:

Remover este trecho


de código marcado.

282
Depois de remover o trecho de código citado, basta executarmos novamente a
aplicação e em seguida pressionar a tecla “F2” para chamarmos o menu.
Confira o resultado:

Menus em exibição

Irei comentar agora as propriedades que nós alteramos para a criação de


nosso menu.

Uma das propriedades que nós alteramos (e que já estamos acostumados a


mexer nela) foi a propriedade “Id”. Uma coisa interessante é que para informar
o nome do componente usamos a seguinte notação:

@+id/<nome do componente>

Dentro do Android quando informando um nome (ou “Id”) para um componente,


ele usa sempre essa notação. Por exemplo, quando atribuímos um nome para
um componente cujo nome é “btcalcular” (como já fizemos em um dos
exemplos anteriores), “internamente”, o nome desse componente está nessa
forma:

@+id/btcalcular

283
Aqui na criação de “menus” estamos atribuindo os nomes utilizando a notação
“real” de como o Android associa esses nomes.

A propriedade “Title” serve para definir o título (ou rótulo) do menu.

Por enquanto fizemos a parte visual, porém, não definimos nenhuma ação para
os menus. Vamos aprender agora como atribuir ações para cada menu no
Android. Vamos no arquivo “MenusActivity.java” e dentro do método
onOptionsItemSelected digite o seguinte código abaixo:

@Override
public boolean onOptionsItemSelected(MenuItem item)
{
switch (item.getItemId()) {

case R.id.item_novo:
//Executa algo
break;
case R.id.item_abrir:
//Executa algo
break;
case R.id.item_salvar:
//Executa algo
break;
}
return super.onOptionsItemSelected(item);
}

Vamos analisar o código desse método. Observe que na estrutura switch é


avaliado o valor retornado pelo método getItemId, do objeto “item”. Esse
método retorna o “Id” do menu selecionado, que é representado pelas
constantes, como pode ser observado na estrutura.

Também é possível adicionar sub-menus a um determinado menu. Vamos


voltar agora para o arquivo de menu “menu_aplicacao.xml” para adicionarmos
um sub-menu em um dos itens. Irei escolher aqui o item “salvar” (cujo nome é
“item_salvar”) que vai ter um sub-menu associado a ele. Nesse sub-menu
haverá duas opções : “Salvar cópia” , “Salvar como”. Para adicionarmos um
sub-menu abra o arquivo “menu_aplicacao.xml” e digite o seguinte trecho de
código destacado em azul em seguida :

284
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MenusActivity">

<item android:id="@+id/item_novo"
android:title="Novo" ></item>
<item android:id="@+id/item_abrir"
android:title="Abrir" ></item>
<item android:id="@+id/item_salvar"
android:title="Salvar" >

<menu>

<item android:id="@+id/item_salvar_copia"
android:title="Salvar Cópia" ></item>

<item android:id="@+id/item_salvar_como"
android:title="Salvar Como" ></item>

</menu>
</item>
</menu>

Toda vez que pressionarmos o botão salvar, será aberto um sub-menu com as
duas opções que colocamos acima. Confira na figura seguinte:

Sub-Menu em exibição

285
Vejamos agora o código dentro do método onOptionsItemSelected para
detectar a ação dos dois itens de sub-menu:

@Override
public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.item_novo:
//Executa algo
break;
case R.id.item_abrir:
//Executa algo
break;
case R.id.item_salvar_copia:
//Executa algo
break;
case R.id.item_salvar_como:
//Executa algo
break;
}
return super.onOptionsItemSelected(item);
}

Praticamente no código acima não houve grandes mudanças, o que foi


necessário foi associar a “id” de cada item de sub-menu para executar uma
tarefa dentro da estrutura switch.

286
Capitulo 10 Conhecendo as
caixas de diálogo da
plataforma Android

N ós já usamos em alguns dos nossos programas anteriores uma classe


responsável por exibir uma mensagem na tela, a classe AlertDialog.
Neste capítulo vamos entender melhor a utilização desta classe,
conhecendo os métodos existentes dentro dela, além de conhecer outras
classes derivadas com a mesma funcionalidade.

10.1) A classe AlertDialog

Já trabalhamos com essa classe nos programas anteriores. Agora vamos


conhecer alguns métodos existentes dessa classe:

Métodos Descrição
Neste método, você define um ícone para
setIcon(int IconId)
a sua caixa de diálogo.

setMessage(CharSequence Neste método, você define a mensagem


mensagem) que será exibida na caixa de diálogo.

Neste método, você define o título que


setTitle(CharSequence titulo)
será exibido na caixa de diálogo.

setNeutralButton(CharSequence Neste método você define um botão


<rotulo do botão>, neutro (normalmente rotulado com o título
OnClickListener evento) “OK”) e um evento, caso ele seja clicado.

setPositiveButton(CharSequence Neste método você define um botão


<rotulo do botão>, positivo (normalmente rotulado com o
DialogInterface.OnClickListener título “Sim” ou “Yes”) e um evento, caso
evento) ele seja clicado.

setNegativeButton(CharSequence Neste método você define um botão


<rotulo do botão>, negativo(normalmente rotulado com o
DialogInterface.OnClickListener título “Não” ou “No”) e um evento, caso ele
evento) seja clicado.

287
Veja alguns exemplos:

AlertDialog.Builder dialogo = new


AlertDialog.Builder(this);
dialogo.setMessage("Cadastro efetuado com sucesso.");
dialogo.setNeutralButton("OK", null);
dialogo.setTitle("Aviso");
dialogo.show();

O resultado será :

AlertDialog com o botão OK

Outro Exemplo:

AlertDialog.Builder dialogo = new AlertDialog.Builder(this);


dialogo.setMessage("Deseja cadastrar esse registro ?");
dialogo.setPositiveButton("Sim", new
DialogInterface.OnClickListener(){

public void onClick(DialogInterface di, int arg) {


//Executa algo se o botão "Sim" por pressionado
}

});
dialogo.setNegativeButton("Não", new
DialogInterface.OnClickListener(){

public void onClick(DialogInterface di, int arg)


{
//Executa algo se o botão "Não" por pressionado
}
});

dialogo.setTitle("Aviso");
dialogo.show();

288
O resultado será :

AlertDialog com botões SIM e NÃO

Mais um exemplo :

AlertDialog.Builder dialogo = new AlertDialog.Builder(this);


dialogo.setMessage("Exemplo com ícone.");
dialogo.setNeutralButton("OK", null);
dialogo.setTitle("Ícone");
dialogo.setIcon(R.mipmap.ic_launcher);
dialogo.show();

O resultado será:

AlertDialog com o botão OK e com ícone

É possível também na classe AlertDialog.Builder trabalharmos com lista de


itens (como no ListView) e também com opções (como no RadioButton).

289
Vou demonstrar aqui como trabalhar com lista de itens. Veja o código seguinte:

AlertDialog.Builder dialogo = new AlertDialog.Builder(this);

final String[] opcoes ={"Azul","Amarelo","Vermelho"};


dialogo.setTitle("Escolha uma opção");

dialogo.setItems(opcoes, new DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int item) {

switch (item) {

case 0: //EXECUTA OPERAÇÃO SE SELECIONOU A


//OPÇÃO AZUL
case 1: //EXECUTA OPERAÇÃO SE SELECIONOU A
//OPÇÃO AMARELO
case 2: //EXECUTA OPERAÇÃO SE SELECIONOU A
//OPÇÃO VERMELHO
}
}
});

dialogo.show();

Vamos analisar algumas linhas de código acima. Observe que criei uma
constante de array de String chamada opcoes, com três valores, como é
demonstrado abaixo:

final String[] opcoes = {"Azul","Amarelo","Vermelho"};

Para criar a lista de itens na caixa de diálogo, foi preciso usar o método
setItems que possui dois parâmetros :no primeiro, você passa o array de itens
a serem selecionados ; no segundo você define um método (evento) onClick,
que será disparado toda vez que um determinado item for selecionado. Vamos
analisar o método onClick:

public void onClick(DialogInterface dialog, int item) {

switch (item) {

case 0: //EXECUTA OPERAÇÃO SE SELECIONOU A


//OPÇÃO AZUL
case 1: //EXECUTA OPERAÇÃO SE SELECIONOU A
//OPÇÃO AMARELO
case 2: //EXECUTA OPERAÇÃO SE SELECIONOU A
//OPÇÃO VERMELHO
}
}

290
O método onClick possui dois parâmetros : o primeiro corresponde a instância
da caixa de diálogo e o segundo parâmetro corresponde ao índice do item
selecionado.

Veja o resultado abaixo:

AlertDialog com o lista de opções

Agora vamos trabalhar com itens de opções , como no RadioButton. Veja o


código abaixo:

AlertDialog.Builder dialogo = new AlertDialog.Builder(this);


final String[] opcoes ={"Azul","Amarelo","Vermelho"};
dialogo.setTitle("Escolha uma opção");
dialogo.setSingleChoiceItems(opcoes, -1, new
DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int item)
{
switch (item) {

case 0: //EXECUTA OPERAÇÃO SE SELECIONOU A


//OPÇÃO AZUL
case 1: //EXECUTA OPERAÇÃO SE SELECIONOU A
//OPÇÃO AMARELO
case 2: //EXECUTA OPERAÇÃO SE SELECIONOU A
//OPÇÃO VERMELHO
}
}
});

dialogo.show();

Bom, vamos analisar o código acima. Observe que para utilizar o recurso de
itens de opção foi necessário usar o método setSingleChoiceItems, que
possui três parâmetros : no primeiro você passa o array de itens a serem

291
selecionados ; no segundo você define a opção que já será selecionada “por
default” ao abrir a caixa de diálogo através do seu índice, neste caso definimos
como -1 ou seja, nenhuma opção padrão será selecionada ; no terceiro você
define um método onClick, que será disparado toda vez que um determinado
item for selecionado. O restante do código já foi explicado anteriormente. Veja
o resultado na figura abaixo:

AlertDialog com o lista RadioButons

10.2) A classe DatePickerDialog

Se lembra daquele componente que nós trabalhamos o DatePicker ? Pois


bem, ele também existe na sua forma de caixa de diálogo, o
DatePickerDialog. Vamos ver uma demonstração do uso dessa caixa de
diálogo.

DatePickerDialog.OnDateSetListener mudarData = new


DatePickerDialog.OnDateSetListener() {

@Override
public void onDateSet(DatePicker dialog, int
year, int monthOfYear, int dayOfMonth) {

//ESSE MÉTODO SEMPRE SERÁ EXECUTADO TODA VEZ QUE


//UMA DATA FOR SELECIONADA
}
};

DatePickerDialog datePicker = new


DatePickerDialog(this,mudarData,2013,11,10);

datePicker.setTitle("Selecione a data");

datePicker.show();

292
Bom, vamos analisar o código acima. Observe que a primeira coisa que faço é
criar uma instância da interface OnDateSetListener, que será representado
pela variável mudarData. Nesta interface existe um método chamado
onDateSet, que possui quatro parâmetros : no primeiro você tem a instância da
caixa de diálogo , no segundo você tem o ano, no terceiro você tem o mês (não
se esqueça daquele detalhe: primeiro mês número zero, segundo mês número
um e assim por diante), e no quatro e ultimo parâmetros temos o dia do mês.

Na linha abaixo:

DatePickerDialog datePicker = new


DatePickerDialog(this,mudarData,2013,11,10);

Crio a instância do objeto DatePickerDialog. Esta classe possui 5 parâmetros


: o primeiro faz referencia à atividade em execução ; o segundo faz referência a
interface que será disparada quando a data for selecionada, que está sendo
representada pela variável mudarData ; no terceiro parâmetro especificamos o
ano ; no quarto parâmetro especificamos o mês e no último parâmetro,
especificamos o dia.

Veja o resultado abaixo:

Exemplo usando DatePickerDialog

293
10.3) A classe TimePickerDialog

Se lembra daquele componente que nós trabalhamos o TimePicker ? Pois


bem, ele também existe na sua forma de caixa de diálogo, o
TimePickerDialog. Vamos ver uma demonstração do uso dessa caixa de
diálogo.

TimePickerDialog.OnTimeSetListener mudarHora = new


TimePickerDialog.OnTimeSetListener() {

@Override
public void onTimeSet(TimePicker view, int hourOfDay,
int minute) {

//ESTE MÉTODO SERÁ EXECUTADO QUANDO A HORA FOR


//SELECIONADA
}

};

TimePickerDialog timePicker = new TimePickerDialog


(this,mudarHora,10,10,false);

timePicker.setTitle("Selecione a hora");

timePicker.show();

Vamos analisar o código acima. Observe que a primeira coisa que faço é criar
uma instância da interface OnTimeSetListener, que será representado pela
variável mudarHora. Nesta interface existe um método chamado onTimeSet,
que possui três parâmetros : no primeiro você tem a instância do objeto
TimePicker ; no segundo parâmetro nós definimos a hora e no terceiro
parâmetro nós definimos os minutos.

Na linha abaixo:

TimePickerDialog timePicker = new TimePickerDialog


(this,mudarHora,10,10,false);

Crio a instância do objeto TimePickerDialog. Esta classe possui 5


parâmetrros : o primeiro faz referencia à atividade em execução ; o segundo
faz referência a interface que será disparada quando a hora for selecionada,
que está sendo representada pela variável mudarHora ; no terceiro parâmetro
especificamos a hora ; no quarto especificamos o minuto e no último
especificamos se a hora será vista no formato 24 horas (true) ou não (false).

294
Veja o resultado na figura seguinte:

Exemplo usando TimePickerDialog

10.4) A classe ProgressDialog

Se lembra daquele componente que nós trabalhamos o ProgressBar ? Pois


bem, ele também existe na sua forma de caixa de diálogo, o ProgressDialog.
Vamos ver uma demonstração do uso dessa caixa de diálogo.

ProgressDialog progressDialog = new ProgressDialog(this);

progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);

progressDialog.setTitle("Carregando...");
progressDialog.setMessage("Carregando dados, aguarde...");

progressDialog.show();

Vamos analisar as instruções acima. As linhas:

ProgressDialog progressDialog = new ProgressDialog(this);

progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);

Cria uma instância da classe ProgressDialog e em seguida defino o estilo da


barra de progresso, que neste caso será um estilo “Spinner”. As instruções
seguintes já são conhecidas. Veja o resultado abaixo:

295
Exemplo usando ProgressDialog

Quando a caixa de diálogo é exibida na tela , não existe um botão de “OK” para
encerrar a sua exibição. Então, como fazemos para “sumir” com esta caixa de
diálogo da tela ? Existem duas formas : A primeira forma é pressionando a tela
“ESC” , dando a entender que você quis cancelar um processo em
andamento. A segunda forma é chamar o método dismiss da classe
ProgressDialog. Considerando a variável progressDialog , vejamos o exemplo
em seguida:

progressDialog.dismiss();

Este método é utilizado quando um determinado processo em andamento,


indicado pela exibição da caixa de diálogo na tela, é finalizado. Supondo que a
caixa de diálogo em exibição indica o download de um arquivo, após o termino
do download esse método deve ser chamado, que vai fechar a caixa de
diálogo, indicando assim o fim do processo.

Também é possível trabalharmos com uma barra de progresso no estilo


horizontal. Veja uma demonstração abaixo:

Declarando a seguintes variáveis abaixo como globais:

Runnable rBarraProgresso;

Handler hBarraProgresso;

Agora dentro de um método qualquer:

progressDialogHorizontal = new ProgressDialog(CaixaDialogoActivity.this);

progressDialogHorizontal.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);

progressDialogHorizontal.setTitle("Carregando...");
progressDialogHorizontal.setMessage("Carregando dados, aguarde...");

progressDialogHorizontal.setMax(100);

296
Agora vamos carregar a instância do objeto hBarraProgresso e em seguida
vamos carregar o objeto rBarraProgresso, conforme é mostrado abaixo:

hBarraProgresso = new Handler();

rBarraProgresso = new Runnable() {

@Override
public void run() {

if(progressDialogHorizontal.getProgress() <
progressDialogHorizontal.getMax())
{
progressDialogHorizontal.
incrementProgressBy(5);

hBarraProgresso.
postDelayed(this, 100);
}

}
};

O código acima é responsável por atualizar a cada “100” milissegundos o


progresso da barra até ele chegar ao seu limite.

Agora para finalizar vamos digitar o seguinte código abaixo:

progressDialogHorizontal.setProgress(0);
hBarraProgresso.post(rBarraProgresso);
progressDialogHorizontal.show();

Veja o resultado dessa execução na figura abaixo:

Exemplo usando ProgressDialog

297
10.5) Criando uma caixa de diálogo personalizada

Acabamos de ver agora os diversos tipos de caixas de diálogo que o Android


nos oferece. Vamos supor agora que eu quisesse criar uma caixa de diálogo
minha “personalizada” (como por exemplo, uma caixa de diálogo para o usuário
preencher um campo com uma determinada informação) . Pois bem, o Android
também nos permite fazermos isso. Do mesmo jeito que utilizamos os arquivos
XML para definirmos a tela da nossa aplicação podemos utilizá-los para definir
uma caixa de diálogo nossa “personalizada”.

Para demonstrar esse exemplo vamos supor um arquivo XML chamado


“mensagem.xml”, cuja estrutura padrão de layout é LinearLayout (Vertical)
com os seguintes componentes, na sequência:

TextView

Propriedade Valor
text Digite sua matrícula

EditText (Plain Text)

Propriedade Valor
id edmatricula
layout:width match_parent
Button

Propriedade Valor
id btok
layout:width match_parent
text OK

Agora, em um método qualquer:

Dialog dialogo = new Dialog(this);

dialogo.setContentView(R.layout.mensagem);

dialogo.setTitle("Matrícula");

dialogo.show();

298
Exemplo de uma caixa de diálogo personalisada

Neste capítulo você conferiu mais detalhes a respeito da classe


AlertDialog.Builder, além de conhecer caixas de diálogos derivadas dela
como o DatePickerDialog, TimePickerDialog e também o ProgressDialog.
Também neste capítulo aprendemos a desenvolver nossa própria caixa de
diálogo “personalizada”, através do uso da classe Dialog.

299
Capitulo 11 Publicando as
aplicações Android no Google
Play

A
té agora aprendemos a desenvolver as aplicações voltadas para a
plataforma Android utilizando o emulador oferecido pelo Android SDK.
Mas agora, como nós fazemos para publicar as nossas aplicações na
loja virtual de aplicativos do Android, o Google Play. Neste capítulo iremos
aprender passo a passo como realizar esta tarefa.

Quem aqui já pensou em desenvolver uma aplicação Android para distribui-lá,


permitindo que outras pessoas possam utilizá-la (seja um utilitário, jogo e etc) ?
Pois bem, isso já permitindo utilizando um serviço, ou melhor, uma loja virtual
de aplicativos do Android, o “Google Play” (o extinto “Android Market”). Para
acessarmos o “Google Play” basta acessarmos o seguinte link :
https://play.google.com/store.

Veja o WebSite conforme é demonstrado na figura seguinte:

Site do “Google Play”

300
Neste site podemos “publicar” e distribuir nossas aplicações Android, mas ,
para que suas aplicações possam ser instaladas através deste site, você
precisa acessar o site acima através do seu Smartphone ou Tablet (caso
contrário, a aplicação não poderá ser instalada).

Para publicarmos um aplicativo no “Google Play”, devemos primeiramente ter


uma conta criada no “Google”. Caso você não tenha uma conta no Google é
preciso que você crie uma conta para tal propósito. Se você já tem uma conta
no Google, basta acessar o seguinte link para começarmos a publicar nossas
aplicações: http://developer.android.com/distribute/index.html.

Veja o conteúdo na figura seguinte:

Site dos desenvolvedores do Android

Depois de carregado o site acima, clique no botão “Developer Console” (que na


verdade vai redirecioná-lo para o link https://play.google.com/apps/publish/).
Caso você não esteja logado, será solicitado que você digite seu login e senha
para continuar o processo. Feito isso será aberta a seguinte tela conforme você
pode conferir na figura seguinte:

301
Android Developer Console

Para publicar nossas aplicações no “Google Play” devemos preencher os


campos informados na página acima, aceitar os termos do “Contrato de
distribuição do desenvolvedor” do “Google Play” e pagar uma taxa de
US$25,00 (aproximadamente R$75,00) através do “Google Wallet”. Feito isso
você poderá publicar suas aplicações que poderão ser distribuídas tanto de
graça quanto pagas.

302
Capitulo 12 Propriedades e
eventos dos componentes
trabalhados

N este capitulo eu irei mostrar e descrever as propriedades e eventos de


todos os componentes que trabalhamos neste material.

Widget TextView

- Propriedades

Propriedade Em XML Em Java

text android:text setText(CharSequence c)

Nessa propriedade, você define o texto a ser exibido na tela.

Propriedade Em XML Em Java

textColor android:textColor setTextColor(Color c)

Nessa propriedade, você define a cor de texto.

Propriedade Em XML Em Java

background android:background setBackGroundColor(Color c)

Nessa propriedade , você define o cor de fundo do componente exibido.


Valor: #000000 até #FFFFFF.

Propriedade Em XML Em Java

setTextSize(float
textSize android:textSize tamanho) ou

setTextSize(int
unidade, int tamanho)
Define o tamanho do texto. O tamanho da fonte pode ser especificado em várias notações : px
(pixels),sp(scaled-pixels) , mm(milímetros), in (polegadas) e etc.

303
Propriedade Em XML Em Java
typeface android:typeface setTypeface(Typeface fonte)
Essa propriedade serve para definir uma fonte ao texto (normal,sans,serif,monospace).

- Eventos

Método que define o Evento Métodos relacionados ao


evento evento

setOnClickListener OnClickListener onClick(View v)

Esse evento é disparado toda vez que o componente for clicado, disparando o método onClick.

Widget EditText

- Propriedades

Propriedade Em XML Em Java


text android:text setText(CharSequence c)
Nessa propriedade, você define o texto a ser exibido na tela.

Propriedade Em XML Em Java

textColor android:textColor setTextColor(Color c)

Nessa propriedade, você define a cor do texto.

Propriedade Em XML Em Java


background android:background setBackGroundColor(Color c)
Nessa propriedade , você define o cor de fundo do componente exibido.
Valor: #000000 até #FFFFFF.

Propriedade Em XML Em Java

capitalize android:capitalize

Essa propriedade serve para definir o tipo capitalização das palavras. Por padrão, o valor e
“none”(nenhum). Os possíveis valores para essa propriedade são : “words”,”sentences” e
”characters”

304
Propriedade Em XML Em Java
password android:password
Com essa propriedade você habilita a digitação de senhas. O valor padrão desse atributo é
“false”.

Propriedade Em XML Em Java

setTextSize(float
tamanho) ou
textSize android:textSize

setTextSize(int unidade,
int tamanho)
Define o tamanho do texto. O tamanho da fonte pode ser especificado em várias notações : px
(pixels),sp(scaled-pixels) , mm(milímetros), in (polegadas) e etc.

Propriedade Em XML Em Java

typeface android:typeface setTypeface(Typeface fonte)

Essa propriedade serve para definir uma fonte ao texto. Os possíveis valores são :
“normal”,”monospace”,”sans” e “serif”.

Propriedade Em XML Em Java


hint android:hint setHint(CharSequence c)
define uma mensagem que aparecerá quando a EditText estiver vazia.

- Eventos

Método que define o Evento Métodos relacionados ao


evento evento

setOnClickListener OnClickListener onClick(View v)

Esse evento é disparado toda vez que o componente for clicado, disparando o método onClick.

Método que define o Evento Métodos relacionados ao


evento evento
onKey(View v,int KeyCode,
setOnKeyListener OnKeyListener
KeyEvent event)
Esse evento é disparado toda vez que a tecla é acionada, disparando o método onKey.
Método que define o Evento Métodos

305
evento relacionados ao
evento
onFocusChange(View
setOnFocusChangeListener OnFocusChangeListener
v, boolean hasFocus)
Esse método é disparado toda vez quando um componente EditText ganha ou perde foco.

Widget Button

- Propriedades

Propriedade Em XML Em Java


text android:text setText(CharSequence c)
Nessa propriedade, você define o texto a ser exibido na tela.

Propriedade Em XML Em Java

textColor android:textColor setTextColor(Color c)

Nessa propriedade, você define a cor do texto.

Propriedade Em XML Em Java


setTextSize(float tamanho) ou
textSize android:textSize
setTextSize(int unidade, int
tamanho)
Define o tamanho do texto. O tamanho da fonte pode ser especificado em várias notações : px
(pixels),sp(scaled-pixels) , mm(milímetros), in (polegadas) e etc.

Propriedade Em XML Em Java

typeface android:typeface setTypeface(Typeface fonte)

Essa propriedade serve para definir uma fonte ao texto. Os possíveis valores são :
“normal”,”monospace”,”sans” e “serif”.

306
- Eventos

Métodos
Método que define o evento Evento relacionados ao
evento

setOnClickListener OnClickListener onClick(View v)

Esse evento é disparado toda vez que o componente for clicado, disparando o método onClick.

Métodos relacionados
Método que define o evento Evento
ao evento
onKey(View v,int
setOnKeyListener OnKeyListener
KeyCode, KeyEvent event)
Esse evento é disparado toda vez que a tecla é acionada, disparando o método onKey.

Widget ToogleButton

- Propriedades

Propriedade Em XML Em Java


textOff android:textOff setTextOff(CharSequence c)
Nessa propriedade, você define o texto a ser exibido quando o botão estiver desmarcado.

Propriedade Em XML Em Java


textOn android:textOn setTextOn(CharSequence c)
Nessa propriedade, você define o texto a ser exibido quando o botão estiver marcado.

Propriedade Em XML Em Java

textColor android:textColor setTextColor(Color c)

Nessa propriedade, você define a cor do texto.

Propriedade Em XML Em Java


setTextSize(float
tamanho) ou
textSize android:textSize
setTextSize(int
unidade, int tamanho)
Define o tamanho do texto. O tamanho da fonte pode ser especificado em várias notações : px
(pixels),sp(scaled-pixels) , mm(milímetros), in (polegadas) e etc.

307
Propriedade Em XML Em Java
setTypeface(Typeface
typeface android:typeface
fonte)
Essa propriedade serve para definir uma fonte ao texto. Os possíveis valores são :
“normal”,”monospace”,”sans” e “serif”.

Propriedade Em XML Em Java

checked android:checked setChecked(boolean


estado)
Nessa propriedade você define o estado do CheckBox, se estará marcado (true) ou não (false).

- Eventos

Métodos relacionados
Método que define o evento Evento
ao evento

setOnClickListener OnClickListener onClick(View v)

Esse evento é disparado toda vez que o componente for clicado, disparando o método onClick.

Método que define o Métodos relacionados ao


Evento
evento evento
setOnCheckedChangeListen OnCheckedChangeListen onCheckedChanged(CompondBut
er er ton v, boolean isChecked)
Esse evento é disparado toda vez que a propriedade Checked do ToggleButton é alterada

Métodos
Método que define o evento Evento relacionados ao
evento
onKey(View v,int
setOnKeyListener OnKeyListener KeyCode, KeyEvent
event)
Esse evento é disparado toda vez que a tecla é acionada, disparando o método onKey.

Widget CheckBox/RadioButton

- Propriedades

Propriedade Em XML Em Java


text android:text setText(CharSequence c)
Nessa propriedade, você define o texto a ser exibido na tela.

308
Propriedade Em XML Em Java

textColor android:textColor setTextColor(Color c)

Nessa propriedade, você define a cor do texto.

Propriedade Em XML Em Java


setChecked(boolean
checked android:checked
estado)
Nessa propriedade você define o estado do CheckBox, se estará marcado (true) ou não (false).

- Eventos

Métodos relacionados
Método que define o evento Evento
ao evento
setOnClickListener OnClickListener onClick(View v)
Esse evento é disparado toda vez que o componente for clicado, disparando o método onClick.

Métodos
Método que define o evento Evento relacionados ao
evento
onCheckedChanged
setOnCheckedChangeListener OnCheckedChangeListener(CompoundButton
cb,boolean b)
Esse evento será disparado toda vez que o estado do CheckBox for modificado, ou seja,
marcado ou desmarcado, disparando o método onCheckedChanged.

Widget Spinner / ListView

- Propriedades

Método Descrição
Nesse método você define os
elementos que irão compor
setAdapter(SpinnerAdapter a)
esse componente através de
um vetor (array).

Essa função retorna a


posição do elemento
selecionado. Por exemplo, se
for o primeiro elemento,
int getSelectedPosition()
retorna 0, se for o segundo,
retorna 1 e assim
sucessivamente.

309
Essa função retorna em um
Object getSelectedItem() tipo Object, o item
selecionado.
Retorna em um tipo Object o
elemento de uma
Object getItemAtPosition(int posicao) determinada posição,
passada como parâmetro.

- Eventos

Método que define o Evento Métodos relacionados


evento ao evento
setOnClickListener OnClickListener onClick(View v)

Esse evento é disparado toda vez que o componente for clicado, disparando o método onClick.

Métodos
Método que define o evento Evento relacionados ao
evento
onItemClick
(AdapterView<?> a,
setOnItemClickListener OnItemClickListener View v, int I,
long l)

Esse evento será disparado toda vez que um derminado item for clicado, disparando o método
onItemClick.

Método que define o Evento Métodos relacionados ao


evento evento

onItemSelected(AdapterView
av, View v,int posição,long
setOnItemSelectedListene OnItemSelectedListene id)
r r
onNothingSelected(AdapterVie
w av)

Esse evento será disparado toda vez que um derminado item for selecionado, disparando o
método onItemSelected. Caso nenhum item seja selecionado, será disparado o método
onNothingSelected.

Widget ImageView

- Propriedades

Propriedade Em XML Em Java


src android:src setImageResource(int Id)
Nessa propriedade, você define a imagem que será exibida na tela.

310
Método Descrição
Esse método é similar ao
método acima, sendo que
aqui você especifica o Uri
setImageURI(Uri link)
(como se fosse um link de
internet) como caminho de
localização da imagem.

- Eventos

Método que define o evento Evento Métodos relacionados


ao evento
setOnClickListener OnClickListener onClick(View v)
Esse evento é disparado toda vez que o componente for clicado, disparando o método onClick.

Widget Gallery

- Propriedades

Método Descrição
Nesse método você define
os elementos que irão
setAdapter(SpinnerAdapter a)
compor esse componente
através de um vetor (array).

- Eventos

Método que define o evento Evento Métodos


relacionados ao
evento

setOnClickListener OnClickListener onClick(View v)

Esse evento é disparado toda vez que o componente for clicado, disparando o método onClick.

Método que define o evento Evento Métodos


relacionados ao
evento
onItemClick
(AdapterView<?> a,
setOnItemClickListener OnItemClickListener
View v, int I,
long l)
Esse evento será disparado toda vez que um derminado item for clicado, disparando o método
onItemClick.

311
Widget ProgressBar

- Propriedades

Propriedade Em XML Em Java


style style

Nessa propriedade, você define o estilo da progressbar. Essa propriedade assume os


seguintes valores: "?android:attr/progressBarStyleHorizontal",
"?android:attr/progressBarStyle"
"?android:attr/progressBarStyleLarge"
"?android:attr/progressBarStyleSmall"

Propriedade Em XML Em Java


max android:max setMax(int valor_maximo)

Neste método você define o valor máximo da faixa. Ou seja, se definir o valor máximo como
100, a faixa de progresso será entre 0 e 100.

Propriedade Em XML Em Java


setProgress(int
progress android:progress
progresso)

Neste método, você define o valor corrente do progresso.


Propriedade Em XML Em Java
Secondary android:secondaryProgress setSecondaryProgress(int
progress progresso)
Neste método, você define o valor corrente do progresso secundário.

Método Descrição
Neste método você define o
incrementProgressBy(int incr) quando o progresso será
incrementado.
Neste método você define o
quando o progresso
incrementSecondaryProgressBy(int incr)
secundário será
incrementado.

312
Widget DatePicker

- Propriedades

Método Descrição
Neste método você define o
valor inicial do ano , mês e dia
init(int ano, int mês, int dia, inclusive também, você define
onDateChangedListener evento) um evento toda vez que uma
data for modificada
(onDateChangedListener).
Neste método você atualiza a
data passando como
updateDate(int ano, int mês, int dia)
parâmetros o ano, o mês e o
dia.
Esse método retorna o ano da
int getYear()
data.
Esse método retorna o mês do
ano, sabendo se que, para o
primeiro mês (janeiro) ele
int getMonth()
retorna 0, para o segundo mês
(fevereiro) retorna 1 e assim
por diante.
Esse método retorna o dia do
int getDayOfMonth()
mês.

- Eventos

Método que define o evento Evento Métodos


relacionados ao
evento
onDateChanged(View
Init onDateChangedListener v, int ano, int mês
, int dia)
Esse evento é disparado toda vez que a data for alterada, disparando o método
onDateChanged.

Widget TimePicker

- Propriedades

Método Descrição
Neste método você define o valor da
setCurrentHour(int hora)
hora sabendo se que , uma hora.
Neste método você define o valor do
setCurrentMinute(int minuto)
minuto entre 0-59.

int getCurrentMinute() Esse método retorna o minuto corrente.

313
int getCurrentHour() Esse método retorna a hora corrente.

- Eventos

Método que define o Métodos relacionados


Evento
evento ao evento
onTimeChanged(TimePicker
setOnTimeChangedListener OnTimeChangedListener
tp, int hora, int minuto
)
Esse evento é disparado toda vez que a hora for alterada, disparando o método
onTimeChanged.

Widget RatingBar

- Propriedades

Propriedade Em XML Em Java


Style style

Nesta propriedade definimos o estilo do nosso componente

Propriedade Em XML Em Java


setNumStars(int
numStarts android:numStars
numStars)

Nesta propriedade definimos número de estrelas que vão aparece no componente.

Propriedade Em XML Em Java


setRating(float
rating android:rating
rating)

Nesta propriedade definimos o valor da classificação (rating).


- Eventos

Método que define o Evento Métodos


evento relacionados ao
evento
onRatingChanged(Rati
setOnRatingBarChangeLis RatingBar.OnRatingBarChangeLi ngBar ratingBar,
tener stener float rating,
boolean fromUser)

Esse evento é disparado toda vez que é definimos ou alteramos um valor de classificação.

314
Propriedades comuns a todos os componentes

Propriedade Em XML Em Java

id android:id

Nessa propriedade , definimos o nome do nosso componente.

Propriedade Em XML Em Java

layout:width android:layout_width

Nessa propriedade, você define a largura do componente a ser exibido. Normalmente essa
propriedade assume dois valores : “match_parent” (preenche toda a largura restante do
dispositivo) e “wrap_content” (a largura do componente será definida de acordo com o seu
conteúdo) . Também podem especificar valores números com suas respectivas escalas, ex:
“160px”,”50sp” e etc.

Propriedade Em XML Em Java

layout:height android:layout_heigth

Nessa propriedade, você define a altura do componente a ser exibido. Normalmente essa
propriedade assume dois valores : “match_parent” (preenche toda a altura restante do
dispositivo) e “wrap_content” (a altura do componente será definida de acordo com o seu
conteúdo) . Também podem especificar valores números com suas respectivas escalas, ex:
“160px”,”50sp” e etc.

Propriedade Em XML Em Java


setVisibility(int
visibility android:visibility
modo_visibilidade)
Essa propriedade serve para definir se o componente estará visível ou não. Ela assume os
seguintes valores : “visible”,”invisible” e “gone”.

Widget ViewFlipper

- Propriedades

Propriedade Em XML Em Java


setAutoStart(boolean
autoStart android:autoStart
auto)

Nesta propriedade definimos se a animação de transição irá ser executada automaticamente

315
Propriedade Em XML Em Java
setFlipInterval(int
flipInterval android:flipInterval
milissegundos)

Nesta propriedade definimos o intervalo em milissegundos da transição entre os elementos.

Propriedade Em XML Em Java


setInAnimation
inAnimation android:inAnimation (Context c, int
resourceId)

Nesta propriedade definimos o efeito de transição de entrada dos elementos, que fica guardado
normalmente em um arquivo XML.

Propriedade Em XML Em Java


setOutAnimation
outAnimation android:outAnimation (Context c, int
resourceId)

Nesta propriedade definimos o efeito de transição de saída dos elementos, que fica guardado
normalmente em um arquivo XML.

316
Conclusão a respeito do
material

Nesta apostila aprendemos a desenvolver aplicações para a plataforma


Android voltado para diversas finalidades à nível básico. Vimos um pouco
sobre a plataforma Android, como ela surgiu e tudo mais. Aprendemos a
baixar, instalar e configurar o Android Studio, aprendemos a construir uma
aplicação Android básica (começando pelo “Hello World”) e depois
conhecemos os componentes (widgets) que constituem uma aplicação Android
para a construção de aplicações mais interessantes. Vimos também como
trabalhar com mais de uma tela em uma aplicação Android tendo como
exemplo prático um sistema de cadastro. Conhecemos as estruturas de layout
que podemos utilizar para orgazinar os componentes na tela, também
aprendemos a realizar efeitos de transição de telas, usar menus e submenus
em uma aplicação, compreendemos melhor o funcionamento da classe
AlertDialog.Builder e também de outras classes baseadas em caixas de
diálogo, e por útlimo aprendemos como publicar as aplicações no Google Play.

Espero que esse material lhe tenha sido útil.

Abraços

317