6ª Edição (VENDA E DISTRIBUIÇÃO PROIBIDA) De : Luciano Alves da Silva (lucianopascal@yahoo.com.br)

Transcrição

1 6ª Edição (VENDA E DISTRIBUIÇÃO PROIBIDA) De : Luciano Alves da Silva (lucianopascal@yahoo.com.br) ApostilaDeAndroid Rio de Janeiro - Outubro 2013

2 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 na primeira página). 2

3 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 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 Guia para Desenvolvedores. Desenvolvendo Jogos com a Ferramenta RPG Maker VX Guia do Usuário. 3

4 Apresentação OAndroid é 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 da Google (Android) usando a IDE Android Developer Tools (Eclipse Juno + Android SDK). 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

5 Índice analítico Capitulo 1 Visão geral sobre o Google Android ) Introdução ) Estrutura Geral da plataforma Google Android ) A arquitetura do Android ) Aplicações ) Android Runtime ) Linux Kernel ) Para qual versão do Android devemos desenvolver as aplicações? Capitulo 2 Instalando e Configurando o Android Developer Tools ) Efetuando o download e configurando o ADT Capitulo 3 Começando a programar no Google Android Conhecendo a estrutura geral de um projeto Android O diretório src (source) O diretório res (resources) Os diretórios drawable-hdpi, drawable-mdpi, drawable-ldpi e drawablexhpdi O diretório layout O diretório values Visão geral da ferramenta de desenvolvimento Executando a nossa aplicação Capitulo 4 Conhecendo as widgets do Android ) A paleta de componentes e suas widgets ) A seção Form Widgets ) A seção Text Fields ) A seção Layouts ) A seção Images & Media ) A seção Time & Date ) A seção Transitions ) A seção Advanced ) A seção Custom & Library Views Capitulo 5 Construindo nossas aplicações no Android ) Desenvolvendo uma Calculadora Básica Aplicação da calculadora em execução ) Desenvolvendo uma aplicação simples de compras ) Desenvolvendo uma aplicação de cálculo de salário ) Desenvolvendo uma aplicação de cálculo de salário (Segunda versão) ) Desenvolvendo uma aplicação de lista de contatos ) Desenvolvendo uma aplicação que visualiza imagens (com ImageView) ) Desenvolvendo uma aplicação que visualiza imagens (com Gallery)

6 5.8) Desenvolvendo uma aplicação que demonstra o uso do ProgressBar ) Desenvolvendo uma aplicação que demonstra o uso componente DatePicker ) Desenvolvendo uma aplicação que demonstra o uso componente TimerPicker ) Desenvolvendo uma aplicação de sistema de classificação ) Desenvolvendo um componente personalizado Capitulo 6 Trabalhando com mais de uma tela em uma aplicação ) Desenvolvendo uma aplicação de cadastro Capitulo 7 Conhecendo os tipos de estruturas de layout do Android ) LinearLayout ) TableLayout ) RelativeLayout ) AbsoluteLayout Capitulo 8 Trabalhando com efeitos de transição Capitulo 9 Trabalhando com menus em uma aplicação Capitulo 10 Conhecendo as caixas de diálogo da plataforma Android ) A classe AlertDialog ) A classe DatePickerDialog ) A classe TimePickerDialog ) A classe ProgressDialog ) Criando uma caixa de diálogo personalizada Capitulo 11 Publicando as aplicações Android no Google Play Capitulo 12 Propriedades e eventos dos componentes trabalhados Widget TextView Widget EditText Widget Button Widget ToogleButton Widget CheckBox/RadioButton Widget Spinner / ListView Widget ImageView Widget Gallery Widget ProgressBar Widget DatePicker Widget TimePicker Widget RatingBar Widget ViewFlipper Conclusão a respeito do material

7 Capitulo 1 Visão geral sobre o Google Android 1.1) Introdução Conforme 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 Inicialmente o sistema Android foi desenvolvido pelo Google e atualmente essa plataforma é mantida pela OHA (Open Handset Alliance. Visite o link : 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 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: 7

8 SmartPhone Samsung Galaxy S3 Tablet Samgung Galaxy Note 8

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, performance e um plugin para o Eclipse (ADT) ; 9

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 ; - 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: - 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. 10

11 - 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 ) 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 ) 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. 11

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 ) 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 setembro de 2013, onde nele podemos observar que as versões do Android mais utilizadas são o Jelly Bean (versão ), Gingerbread (versão 2.3) e Ice Cream Sandwich (versão 4.0). 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, e durante a produção dessa apostila a versão 4.4 (KitKat) do Android havia acabado de ser lançada. 12

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 ) 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 ) 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. 13

14 Capitulo 2 Instalando e Configurando o Android Developer Tools Para a elaboração desse material eu fiz o uso do Android Developer Tools (que consiste no Eclipse 4.2 para Windows configurado com o Android SDK). Qualquer versão (de preferência superior) da ferramenta citada acima serve. Para que toda essa aplicação funcione é necessário que você tenha instalado, antes de tudo, a Máquina Virtual Java (de preferência a versão 6 ou posterior). Bom, mãos a obra. Para saber se você possui uma Maquina virtual Java entre no prompt de comando de digite a seguinte linha: java version Se mostrar algo parecido como demonstra a figura seguinte: Maquina Virtual Java instalada no computador Significa que você possui uma máquina virtual Java instalada no seu computador, caso contrário, instale o JRE. Você pode fazer o download do Java pelo link abaixo: 14

15 2.1) Efetuando o download e configurando o ADT Conforme havia falado, a ferramenta que iremos utilizar aqui para a construção das nossas aplicações é o ADT (Android Developer Tools), que consiste no Eclipse configurado com o Android SDK. A linguagem que utilizaremos para criar as aplicações será a linguagem Java, na qual a ferramenta dá suporte. Para realizarmos do download desta ferramenta basta visitarmos o seguinte link abaixo: Feito isso será carregado a página de download, conforme demonstra a figura abaixo: Página de download do Android Developer Tools Para efetuarmos do download do Android Developer Tools basta clicarmos no botão Download the SDK. Feito isso será aberta uma tela de contrato de termos e condições, onde nela você vai confirmar os termos de contrato e selecionar a versão sistema operacional (32 bits ou 64 bits). Depois de escolher o sistema operacional, basta clicar no botão Download the SDK ADT Bundle for Windows para efetuar o download da ferramenta. A instalação da ferramenta é bastante simples (como no Eclipse), bastando descompactar o arquivo em um diretório desejado. O diretório de instalação do ADT para esse caso será o diretório raiz C:\. Ao descompactar o arquivo da aplicação, certifique-se de que foi gerado o diretório C:\ adt-bundle-windows- 15

16 x86 (ou C:\ adt-bundle-windows-x86_64, caso o sistema escolhido seja de 64 bits) e que o mesmo apresenta o conteúdo demonstrado na figura abaixo: Conteúdo do diretório adt-bundle-windows-x86 A ferramenta de desenvolvimento se encontra dentro do diretório eclipse, basta isso basta acessar o diretório eclipse. Feito isso, você verá o seguinte conteúdo: Conteúdo do diretório eclipse 16

17 Para executarmos o Android Developer Tools basta clicar no ícone (de cor roxa ) escrito eclipse. Quando a ferramenta é executada pela primeira vez, será solicitado um diretório de Workspace (diretório de trabalho), que é o local no qual o Eclipse vai gerar os projetos, conforme você confere na figura seguinte: Diretório do Workspace Escolha o diretório desejado para seu Workspace e, caso você deseje que ela seja definitivo, marque a opção Use this as the default and do not ask again. Depois disso clique em OK. Feito isso, o ambiente de programação Eclipse será carregado, conforme demonstra a figura seguinte: Ambiente de programação Eclipse (ADT) 17

18 Agora vamos fechar a guia Android IDE para encerrarmos a tela de Welcome! e em seguida vamos configurar um dispositivo virtual (conhecido no Android como AVD ou Android Virtual Device ) que usaremos para testar e executar as nossas aplicações (jogos). Para definimos um AVD basta irmos no menu Windows / Android Virtual Device Manager, como mostra a figura abaixo: Android Virtual Device Manager Feito isso, será aberta a seguinte tela abaixo: Caixa de diálogo Android Virtual Device Manager 18

19 Para criarmos um dispositivo virtual clique no botão New, e em seguida será aberta uma tela conforme mostra a figura seguinte: Caixa de diálogo - Create new AVD No Android Developer Tools já existe uma plataforma que já acompanha a ferramenta (no meu caso é o Jelly Bean, versão 4.2), logo, vamos utilizar ela. Inicialmente, vamos configurar o básico pra executarmos a nossa aplicação. Em AVD Name você define o nome do AVD, vamos chamá-lo de Emulador. Em Device escolhemos o tipo de dispositivo e a sua resolução. Atualmente encontramos diversos dispositivos Android com os mais diversos tamanhos (resoluções) diferentes. A resolução que será utilizada para a construção dos nossos jogos será uma resolução 3.2 HVGA (que é normalmente uma resolução padrão de Smartphone). Para o dispositivo vamos escolher a opção 3.12 HVGA slider (ADP1) (320 x 480 : mdpi). Automaticamente quando selecionamos o tipo de dispositivo (Device), é definida a plataforma que será utilizada (a seção Target ). Como havia falado, essa versão acompanha a plataforma Jelly Bean 4.2, logo, a plataforma escolhida será a Jelly Bean (Androd 4.2 API Level 17). Veja como ficou as configurações na figura abaixo: 19

20 Caixa de diálogo - Create new AVD Para criarmos nosso AVD, clique no botão OK e pronto. O resultado você confere na figura seguinte: 20

21 Caixa de diálogo Android Virtual Device Manager Bom, nosso ambiente de desenvolvimento está devidamente configurado. No próximo capítulo vamos aprender passo a passo como criar um projeto Android para desenvolvimento de aplicações. 21

22 Capitulo 3 Começando a programar no Google Android Depois 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. Para criarmos um novo projeto Android, basta irmos no menu File / New / Other (ou simplesmente pressione Ctrl+N), conforme demonstra a figura abaixo: Criando um novo projeto Feito isso, será aberta a seguinte caixa de diálogo, conforme mostra a próxima figura: 22

23 Criando um novo projeto Android no Eclipse Na caixa de diálogo acima informarmos o nome da nossa aplicação (Application Name), o nome do projeto (Project Name) e o nome do pacote (Package name). No campo Application Name digitaremos como nome da nossa aplicação HelloAndroid (sem as aspas, é claro). Observe que quando é preenchido o campo, os campos restantes são preenchidos automaticamente, a medida que a gente digita o nome da aplicação. E para finalizar, em Minimum Required SDK (onde definimos a partir de qual sistema operacional a aplicação poderá executar) vamos escolher a opção API 14: Android 4.0 (Ice Cream Sandwich). Veja o resultado. 23

24 Criando um novo projeto Android no Eclipse Embora os campos Project Name e Package Name tenham sido preenchidos automaticamente, nada impede que você altere o conteúdo delas. A ferramenta realiza essa operação para facilitar o seu trabalho. Observação: Quando digitamos um nome de pacote (Package Name), devemos nos certificar que no mesmo deve haver, pelo menos, um ponto. (como delimitador). Veja alguns exemplos de nome de pacote abaixo: - meu.programa - minha.aplicacao.android Depois de preencher as informações acima necessárias, clique no botão Next para continuarmos. Feito isso será exibida a seguinte tela abaixo: 24

25 Configuração de projeto Na tela acima realizamos as configurações gerais do projeto (que por padrão já estão pré-definidas). Não iremos alterar nenhuma configuração acima, simplesmente vamos avançar para a próxima tela clicando no botão Next. Na próxima tela temos uma seção onde podemos definir um ícone que vai representar a nossa aplicação, conforme demonstra a figura abaixo: 25

26 Definindo um ícone para aplicação Nesta seção definimos qual ícone vai representar a nossa aplicação. Podemos escolher entre imagens, clipart e texto. Escolha o ícone desejado para a sua aplicação e depois disso, clique em Next. Feito isso será aberta a seguinte tela abaixo: Criando uma nova Activity 26

27 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 (BlankActivity), conforme é demonstrado na figura acima, e em seguida clique em Next. Feito isso será exibida a seguinte seção seguinte: Informações da Activity Na seção acima definimos o nome da nossa atividade (Activity) assim como o nome do arquivo XML que vai representar a tela da nossa aplicação (Layout Name). Por padrão, o nome da Activity é MainActivity, e o nome do arquivo de layout é activity_main. Vamos alterar o nome da nossa atividade para HelloActivity. O resultado você confere na figura abaixo: 27

28 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: 28

29 Projeto criado Conhecendo a estrutura geral de um projeto Android 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 29

30 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. Explicarem mais em detalhes no próximo capítulo. Se visualizarmos o lado esquerdo, existe uma seção chamada Package Explorer, onde nela existe uma pasta chamada HelloAndroid (que é o nosso projeto), constituído por vários subdiretórios, que por sua vez, possui seus respectivos arquivos, conforme demonstra a figura seguinte: Package Explorer 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 src (source) Vamos começar conhecendo primeiramente o diretório src (source). Dentro desse diretório temos todos os arquivos de extensão.java que fazem parte de uma aplicação Android. Se nós expandirmos essa pasta encontraremos dentro dela um arquivo de extensão.java (HelloActivity.java, que é a nossa atividade (Activity) situado dentro do pacote com.example.helloandroid ). Clique duas vezes nesse arquivo para visualizarmos seu conteúdo, conforme mostra a figura abaixo: 30

31 Visão geral de uma aplicação Android (HelloActivity.java) O arquivo aberto acima (HelloActivity.java) possui o seguinte conteúdo: package com.example.helloandroid; import android.os.bundle; import android.app.activity; import android.view.menu; import android.view.menuitem; import android.support.v4.app.navutils; public class HelloActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.activity_hello, menu); return true; 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 { : 31

32 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. Os diretórios drawable-hdpi, drawable-mdpi, drawable-ldpi e drawable-xhpdi. A partir da versão 1.6 da plataforma Android foram adicionados dentro da pasta res (resources) três diretórios responsáveis pelo gerenciamento de imagens: drawable-ldpi, drawable-mdpi, drawable-hdpi. Nas versões do Android 2.2 em diante, podemos encontrar dentro da pasta do projeto (além dos diretórios citados), também o diretório drawable-xhdpi. Todos esses diretórios possuem a mesma finalidade : armazenar imagens que serão utilizadas por uma aplicação em Android. Agora, qual a diferença que existe entre esses diretórios? Cada um desses diretórios será utilizado de acordo com a resolução do dispositivo Android em uso, ou seja, qual modelo de emulador/dispositivo que você estiver usando. Quando a gente configura nosso emulador podemos ver na seção Skin que temos disponível várias resoluções : HVGA, QVGA, WVGA e etc. Por exemplo, uma resolução QVGA (320x240) possui uma densidade baixa (low density ldpi), logo, se você criar uma aplicação para dispositivos desse tipo de configuração, o diretório que você utilizará para guardar suas imagens será o drawable-ldpi. Uma resolução HVGA (320x480) possui densidade média (medium density ldpi), logo, se você criar uma aplicação para dispositivos desse tipo de configuração, o diretório que você utilizará para guardar suas imagens será o drawable-mdpi. Uma resolução WVGA (800x480, resolução de um Tablet por exemplo) possui densidade alta (high density hdpi), logo, se você criar uma aplicação para 32

33 dispositivos desse tipo de configuração, o diretório que você utilizará para guardar suas imagens será o drawable-hdpi. Para as nossas aplicações que iremos desenvolver daqui por diante, vamos trabalhar com a resolução HVGA (como definimos na configuração do emulador). Isso significa que todas as imagens que vamos utilizar em uma aplicação serão adicionadas dentro do diretório drawable-mdpi. 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 quem conhece a combinação HTML + JavaScript, no Android é similar, é a combinação de XML + Java. 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. 33

34 - styles.xml : Esse arquivo guarda constantes relacionadas à estilos que podemos utilizar em nossa aplicação. Visão geral da ferramenta de desenvolvimento Acabamos de entender e conhecer acima toda a estrutura de diretórios de um projeto Android. Agora vamos dar uma visão geral na nossa ferramenta de desenvolvimento (IDE) para a plataforma Android. (1) (6) (2) (4) (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 : Form Widgets, Text Fields, Layouts, Composites, Images & Media, Time e Date, Transitions, Advanced e Custom & Library Views (Componentes personalizados, normalmente criados pelo usuário). Na indicação (2) temos a tela do nosso dispositivo onde 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. 34

35 Na indicação (4) temos uma seção chamada Outline. 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 ( Graphical Layout, onde temos a visualização da tela da aplicação) e o modo XML ( actitivy_hello.xml, onde visualizamos o 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 Form 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 no centro da tela). Como fazer para executarmos a nossa aplicação? Para executarmos a nossa aplicação basta clicar com o botão direito sobre a pasta do projeto que criamos Hello World, que em seguida será exibido um menu com várias opções, você vai selecionar a opção Run As e logo após a opção Android Application. Confira na figura seguinte: 35

36 Executando a nossa aplicação Feito isso o projeto será compilado e em instantes será aberto um emulador, onde a nossa aplicação compilada será executada. Veja na figura abaixo: 36 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 512 MB 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.

37 Passado o tempo que citei acima, será mostrada a nossa aplicação (e possivelmente algumas mensagens, caso apareçam, é só cancelá-las). Quando o emulador chegar nessa tela seguinte: Emulador do Android em Execução Clique no botão redondo com o titulo MENU (ou arraste o símbolo do cadeado para a direita com o mouse) para desbloquear a tela. A aplicação continuará a processar até ser carregada com sucesso, conforme mostra a figura abaixo: 37

38 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 Eclipse 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! Possivelmente durante a execução do seu emulador, poderá surgir a seguinte caixa de diálogo seguinte: 38

39 Caixa de diálogo Logcat Monitor O Logcat Monitor é um recurso bastante útil do SDK onde você pode monitorar todos os eventos que ocorrem durante a execução do emulador, é bastante útil quando queremos descobrir ou monitorar comportamentos (ou eventos) de uma determinada aplicação ou serviço. Podemos escolher por optar (Yes) ou não (No) visualizar todos os eventos que ocorrem durante a execução do emulador. Deixaremos a opção padrão marcada (Yes) e vamos clicar em OK. Feito isso podemos observar que se abriu uma guia conforme é exibida na figura seguinte: Logcat em exibição 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: 39

40 Componente selecionado Se observarmos no lado direito, temos as propriedades do componente selecionado, conforme demonstra a figura seguinte: Propriedades do componente selecionado (TextView) 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 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. 40

41 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 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. Vamos clicar na constante hello_world para visualizarmos seu conteúdo, conforme a figura seguinte: Conteúdo da constante hello_world 41

42 Aqui nesse arquivo podemos criar as nossas próprias constantes. Vamos criar uma aqui como exemplo. Clique no botão Add e em seguida será aberta uma caixa de diálogo, conforme demonstra a figura seguinte: Seleção do tipo de elemento e ser criado Aqui podemos escolher qual tipo de elemento será criado, que neste caso será uma String (uma constante do tipo String ). Para criarmos uma String basta seleciona o item String (com a letra S na frente, conforme você pode ver na figura acima). Depois de selecionado a opção, basta clicar em OK. Feito isso será criado uma nova String em branco, conforme você confere na figura seguinte: Nova String criada com sucesso Para criarmos a nossa constante String basta preencher os campos em branco. No campo Name vamos digitar o nome da nossa constante, que vamos chamar aqui de frase. No campo Value vamos adicionar a frase que 42

43 a constante vai assumir, como por exemplo : Estou aprendendo Android. Veja como ficou a na figura seguinte: Constante com seus dados preenchidos Agora vamos salvar o nosso arquivo para que as alterações feitas no mesmo tenham efeito. Para salvar o arquivo basta ir no menu File e em seguida Save (ou simplesmente pressione as teclas Ctrl+S ). 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 do nosso componente TextView selecionado e vamos substituir o Veja como ficou o resultado na figura abaixo: 43

44 Conteúdo do texto alterado Depois de alterar o conteúdo da TextView vamos salvar as alterações feitas para que elas tenham efeito. Agora vamos executar novamente a aplicação, podemos fazer isso realizando o mesmo procedimento já explicado acima ou simplesmente clicando na setinha que se encontra ao lado direito do ícone, conforme demonstra a figura abaixo, e em seguida clicando no nome da aplicação a ser executada. Veja em seguida: Executando a aplicação Confira o resultado da modificação na figura seguinte: 44

45 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 estar em qualquer lugar da tela (podemos arrastar e soltar em qualquer parte de tela, teoricamente falando ). Veja uma demonstração abaixo: Componente sendo arrastado na tela 45

46 Nas versões anteriores do Android SDK a versão padrão da estrutura de layout 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 alterar a estrutura padrão de layout da tela do dispositivo, passando do RelativeLayout para o LinearLayout. Para isso vamos na seção Outline e clique com o botão direito onde está escrito RelativeLayout e selecione em seguida Change Layout, conforme demonstra a figura abaixo: Alterando a estrutura de layout padrão Feito isso, será aberta a seguinte caixa de diálogo abaixo: Change Layout Normalmene por padrão a opção selecionada é GridLayout, vamos alterar essa opção para LinearLayout (Vertical).Essa estrutura distribui os componentes de forma que eles fiquem um embaixo do outro. Depois de 46

47 escolher a opção acima, basta clicar em OK para realizar a mudança. Veja o resultado na figura seguinte: Estrutura de layout alterada (LinearLayout) Agora na paleta de componentes vamos arrastar e soltar na tela do dispositivo o componente TextView (que se encontra na seção Form Widgets, com o título TextView ). Ele será colocado abaixo do outro componente (TextView) já situado na tela do dispositivo. Veja o resultado na figura seguinte: Componente inserido na tela 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: 47

48 Conteúdo (texto) do componente alterado Talvez você esteja se perguntando o que significa esse sinalzinho de exclamação ao lado do texto que digitamos. Essa é uma indicação de que você não está usando constantes para exibir o conteúdo (conforme havia falado não é obrigatório o seu uso, mas, em alguns situações, é recomendável). Vamos salvar as alterações feitas no arquivo e em seguida executar a aplicação para conferir o resultado, como demonstra a figura seguinte: Aplicação em execução 48

49 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 active_hello.xml, situado ao lado da guia Graphical Layout. Veja o seu código abaixo: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".helloactivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/frase" /> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="através deste material" /> </LinearLayout> E ai, está entendo aos poucos como se faz aplicações Android? Com certeza que sim! Como podemos ver nessa versão do Android, 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. 49

50 Capitulo 4 Conhecendo as widgets do Android Toda 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: 50

51 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 ) A seção Form 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 (normal, large, médium e small). Veja os ícones desse componente na imagem seguinte: Í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 51

52 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: Ícones do componente ProgressBar ( normal e large) 52

53 Ícone do componente ProgressBar (horizontal) 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 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 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: 53

54 Í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) Esse modelo de caixa de texto permite a digitação de . Veja o ícone de componente abaixo: Ícone do componente Phone: Esse modelo de caixa de texto permite a digitação de telefones. Veja o ícone de componente abaixo: Ícone do componente Phone 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 54

55 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: Ícone do componente TableLayout 55

56 4.1.4) A seção Composite 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 4.1.5) A seção Images & Media Nesta seção estão os componentes que trabalham, de alguma forma, com imagens e vídeo. Vejamos agora quais são esses componentes: 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: 56 Ícone do componente Gallery

57 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.6) A seção Time & Date Nesta seção estão disponíveis os componentes que trabalham com data e hora. Vejamos os componentes abaixo: 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 57

58 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 4.1.7) A seção Transitions Nesta guia estão componentes e estruturas que podemos trabalhar com animações e efeitos de transição. 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 4.1.8) A seção Advanced Nesta guia estão situados alguns componentes avançados. Vejamos aqui: AbsoluteLayout: O AbsoluteLayout nada mais é do que uma estrutura que permite que os componentes (widgets) adicionados nele fiquem em uma posição absoluta qualquer da tela, conforme o programador desejar. Ele já é um componente obsoleto ( deprecated, conforme a descrição do componente diz), presente desde as primeiras versões da plataforma Android. Atualmente ele é substituído pelo RelativeLayout, mas, não deixa de ser um componente que ainda pode ser utilizado. Veja seu ícone em seguida: 58

59 Ícone do componente AbsoluteLayout 4.1.9) A seção Custom & Library Views Esta guia por padrão não possui nenhum componente, então para que esta guia serve? Ela serve para exibir os componentes customizados normalmente criados pelo programador. Mais a frente veremos como criar um componente personalizado nosso, e também como visualizá-lo nesta guia. 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. 59

60 Capitulo 5 Construindo nossas aplicações no Android Vamos 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 em Android (conforme já foi mostrado mas, mostro novamente aqui) vamos no menu File / New / Android Aplication Project. Confira na figura seguinte: Android Application Project (pelo menu) Seguido um dos passos descritos acima, irá se abrir a caixa de diálogo abaixo: 60

61 Criando o projeto Calculadora Agora vamos preencher os campos, conforme abaixo: Application Name : Calculadora Project Name : Calculadora Package Name : com.example.calculadora Mininum Required SDK : API 14 Android 4.0 (Ice Cream Sandwich) Confira como ficou na figura seguinte: 61

62 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 tela escolhemos o ícone para a nossa aplicação (conforme demonstra a imagem seguinte). Fique a vontade para escolher seu ícone (Dica : escolha ícones que tenham de uma certa forma, relação com a aplicação em desenvolvimento). 62

63 Criando o projeto Calculadora Definindo um ícone Depois de definir seu ícone vamos para a próxima etapa, onde vamos escolher qual tipo de Activity iremos criar (por padrão, o BlackActivity), conforme demonstra a próxima imagem: Criando o projeto Calculadora Definindo a Activity 63

64 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 Confira como ficou na figura seguinte: 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. A primeira coisa que iremos fazer a alterar a estrutura de layout (trocar de RelativeLayout para LinearLayout, conforme já mostrado no Capítulo 3) que vai comportar nossos componentes. Depois de alterar a estrutura de layout vamos selecionar o componente TextView na tela (cuja frase está escrito Hello World ) e vamos alterar as seguintes propriedades, como segue: 64

65 TextView Propriedade Text Valor Digite o primeiro número Veja o resultado: Tela da aplicação em desenvolvimento Agora arraste e solte um componente Plain Text (EditText) abaixo do título, e em seguida, vamos atribuir um nome de componente para ele (por padrão, ele coloca edittext1 ), clicando com o botão direito do mouse sobre ele e em seguida, selecione Edit ID. Confira na imagem abaixo: Alterando o nome do componente Feito isso, vai ser aberto uma caixa de diálogo conforme mostra a imagem seguinte: 65

66 Caixa para alteração do nome do componente Conforme falei, o nome do componente é edittext1. Agora vamos mudar o nome desse componente para ednumero1 (sem aspas, é claro). Feito isso vamos clicar em OK para confirmar a alteração. 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 Text Valor Digite o segundo número Logo após, arraste e solte um componente Plain Text (EditText) abaixo do componente acima inserido, e altere seu nome (ID) para ednumero2 (conforme já foi mostrado). Veja o resultado: Tela da aplicação em desenvolvimento 66

67 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 Text Width Valor Somar fill_parent Depois disso vamos atribuir um nome (ID) para o componente, que vai se chamar btsomar. Veja o resultado abaixo: 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). Agora salve o arquivo activity_calculadora.xml, para confirmar todas as alterações feitas, antes de trabalharmos com a parte da programação Java (que vai fazer uso dos componentes da tela da aplicação via código). Depois de salvar o arquivo XML vamos abrir o arquivo CalculadoraActivity.java (situado no pacote com.example.calculadora, que fica dentro do diretório src ). Veja a imagem seguinte: 67

68 Arquivo CalculadoraActivity.java 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 android.os.bunble; 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: 68

69 Visualizando todos os pacotes 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 da Digite: EditText ednumero1,ednumero2; Button btsomar; 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); 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); Agora vou explicar as linhas de comando acima que adicionamos. A linha: 69

70 ednumero1 = (EditText) findviewbyid(r.id.numero1); 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. 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 (situado dentro do diretório gen, presente no pacote com.example.calculadora ) 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, 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: btsomar.setonclicklistener(new View.OnClickListener() 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 soma"); dialogo.setmessage("a soma é " + soma); dialogo.setneutralbutton("ok", null); dialogo.show(); 70

71 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 (como mostra a figura acima), 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()); 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 71

72 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); 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: 72

73 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 Id Text Width Valor btsubtrair Subtrair fill_parent Button Propriedade Id Text Width Valor btmultiplicar Multiplicar fill_parent Button Propriedade Id Text Width Valor btdividir Dividir fill_parent Depois de finalizado o que foi se pedido acima, veja como ficou a tela da nossa aplicação: 73

74 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: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="digite o primeiro número" tools:context=".calculadoraactivity" /> <EditText android:id="@+id/ednumero1" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" > <requestfocus /> </EditText> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="digite o segundo número" /> 74

75 <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="somar" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="subtrair" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="multiplicar" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="dividir" /> </LinearLayout> 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 negrito: : 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 abaixo: btsubtrair = (Button) findviewbyid(r.id.btsubtrair); btmultiplicar=(button)findviewbyid(r.id.btmultiplicar); btdividir = (Button) findviewbyid(r.id.btdividir); btsubtrair.setonclicklistener(new View.OnClickListener() { 75

76 @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); dialogo.show(); btmultiplicar.setonclicklistener(new View. OnClickListener() 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() public void onclick(view arg0) { 76

77 ); 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); 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 77

78 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: Application Name: SistemaDeCompras Project Name: SistemaDeCompras Package Name : com.example.sistemadecompras Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: ComprasActivity Layout Name : activity_compras Depois de carregado e criado o projeto, vamos alterar a estrutura de layout padrão (RelativeLayout) para LinearLayout. Em seguida, modifique o componente TextView situado na tela, de acordo com a tabela abaixo: TextView Propriedade Text Valor Escolha seu produto Feito o que se foi pedido, adicione os seguintes componentes na sequência: 78

79 CheckBox Propriedade Valor Text Arroz (R$ 2,69) Id Chkarroz CheckBox Propriedade Valor Text Leite (R$ 5,00) Id Chkleite CheckBox Propriedade Valor Text Carne (R$ 9,70) Id Chkcarne CheckBox Propriedade Valor Text Feijão (R$ 2,30) Id Chkfeijao Button Propriedade Text Id Width Valor Total das compras Bttotal fill_parent Ao final, o layout da nossa aplicação deve estar de acordo com a figura seguinte: 79

80 Layout da tela da aplicação Vamos ver agora a estrutura XML da tela desta aplicação: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="escolha seu produto" tools:context=".comprasactivity" /> <CheckBox android:id="@+id/chkarroz" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="arroz (R$ 2,69)" /> <CheckBox android:id="@+id/chkleite" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="leite (R$ 5,00)" /> <CheckBox android:id="@+id/chkcarne" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="carne (R$ 9,70)" /> 80

81 <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="feijão (R$ 2,30)" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="total das compras" /> </LinearLayout> Agora vamos modificar o arquivo ComprasActivity.java. O código completo desse arquivo será como o código que é exibido abaixo: package com.example.sistemadecompras; import android.os.bundle; import android.app.activity; import android.view.menu; import android.widget.*; import android.view.*; import android.app.*; public class ComprasActivity extends Activity { CheckBox chkarroz, chkleite, chkcarne, chkfeijao; Button 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() public void onclick(view arg0) { 81

82 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; 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(); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu. activity_compras, menu); return true; 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: 82

83 Aplicação simples de compras em execução 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: CalculoDeSalario Project Name: CalculoDeSalario Package Name : com.example.calculodesalario Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: SalarioActivity Layout Name : activity_salario 83

84 Depois de carregado e criado o projeto, vamos alterar a estrutura de layout padrão (RelativeLayout) para LinearLayout. Em seguida, modifique o componente TextView situado na tela, de acordo com a tabela abaixo: TextView Propriedade Text Valor Digite seu salário Em seguida, adicione os seguintes componentes na sequência: EditText (Number Decimal) Propriedade Text Id Width Valor Edsalario fill_parent 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). O RadioGroup já 84

85 oferece por padrão três RadioButtons, que é quantidade necessária para a nossa aplicação. Clique a arraste o componente abaixo do ultimo widget adicionado. O resultado você confere na figura abaixo: Estrutura RadioGroup inserida Com o RadioGroup selecionado, modifique as propriedades abaixo: RadioGroup Propriedade Width Id Valor fill_parent Rgopcoes Observe que dentro do RadioGroup existem três elementos, cada um deles do tipo RadioButton e identificados por um nome. Se você observar no Eclipse, à direita da tela da aplicação, existe uma seção chamada Outline, onde nela posso visualizar toda a estrutura dos componentes que estão na minha aplicação. Confira na figura abaixo: 85

86 Guia Outline Agora modifique as propriedades das RadioButons de acordo com as indicações abaixo: radio0 radio1 radio2 Propriedade Valor Text 40% Id rb40 Propriedade Valor Text 45% Id rb45 Propriedade Valor Text 50% Id rb50 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. 86

87 Depois de colocar o Button, modifique as propriedades abaixo: Propriedade Text Id Width Valor Calcular novo salário Btcalcular fill_parent Depois de inserir todos os componentes citados, o layout da aplicação deve ficar de acordo com a figura abaixo: 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:id="@+id/rgopcoes" android:layout_width="fill_parent" android:layout_height="wrap_content" > <RadioButton android:id="@+id/rb40" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="40%" /> <RadioButton android:id="@+id/rb45" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="45%" /> 87

88 <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="50%" /> </RadioGroup> 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: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="digite seu salário" tools:context=".salarioactivity" /> <EditText android:id="@+id/edittext1" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:inputtype="numberdecimal" > <requestfocus /> </EditText> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="qual seu percentual?" /> <RadioGroup android:id="@+id/rgopcoes" android:layout_width="fill_parent" android:layout_height="wrap_content" > <RadioButton android:id="@+id/rb40" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="40%" /> 88

89 <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="45%" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="50%" /> </RadioGroup> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="calcular novo salário" /> </LinearLayout> No arquivo SalarioActivity.java vamos colocar o seguinte código abaixo: package com.example.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 public 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() { 89

90 @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 = rg.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) 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 90

91 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: CalculoDeSalario2 Project Name: CalculoDeSalario2 Package Name : com.example.calculodesalario2 Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: SalarioActivity Layout Name : activity_salario 91

92 Depois de carregado e criado o projeto, vamos alterar a estrutura de layout padrão (RelativeLayout) para LinearLayout. Em seguida, modifique o componente TextView situado na tela, de acordo com a tabela abaixo: TextView Propriedade Text Valor Digite seu salário Em seguida, adicione os seguintes componentes na sequência: EditText (Number Decimal) Propriedade Text Id Width Valor edsalario fill_parent TextView Propriedade Valor Text Qual é o seu percentual? Spinner Propriedade Id Valor spnopcoes Seguindo os passos acima ate aqui, a aplicação deve estar de acordo com o da figura seguinte: 92

93 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 string onde dentro desse array estará presente elementos (itens) que serão visualizados no componente. Depois de aberto o arquivo strings.xml vamos clicar no botão Add, e será aberto a seguinte tela: 93

94 Criando um novo elemento O que iremos criar aqui agora será um objeto do tipo String Array. Para isso, basta selecionar esta opção e em seguida clicar em OK. Feito isso será criado o objeto, e em seguida surgirá um campo chamado Name onde nele vamos dar um nome para o nosso objeto. Vamos chamá-lo de opcoes_salario (sem aspas, é claro). Veja como fica na figura seguinte: Criando o objeto opcoes_salario Agora na seção Resources Elements (como mostra a figura acima) vamos clicar no objeto que acabamos de criar e em seguida clicaremos no botão Add para adicionarmos os itens que irão constituir esse objeto. Clicando no botão Add vai ser aberto a seguinte caixa de diálogo abaixo: 94

95 Criando um item para o objeto (String Array) Para criarmos um item para o nosso objeto basta selecionarmos a opção Item e em seguida clicar em OK. Feito isso será criado o elemento, e em seguida surgirá um campo chamado Value onde nele digitaremos o valor que aquele item vai assumir, que neste caso será uma frase (string) escrita 40%. Veja como ficou na figura seguinte: Item criado para o objeto opcoes_salario Agora vamos criar mais dois itens para o objeto opcoes_salario, cujos valores (frases) são 45% e 50% (na sequência). Veja como ficou na figura seguinte: Todos os itens criados para o objeto opcoes_salario 95

96 Depois de criado todos os itens para o objeto vamos salvar o arquivo strings.xml (indo no menu File e em seguida Save ou Ctrl+S). 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 Veja como ficou na figura seguinte: Carregando o objeto dentro da propriedade Entries Agora para finalizar, vamos adicionar o componente Button e em seguida modificar as propriedades como segue: Button Propriedade Text Id Width Valor Calcular novo salário btcalcular fill_parent Feito isso a aplicação deve estar de acordo como mostra a figura seguinte: 96

97 Layout da tela da aplicação Agora vamos salvar o arquivo activity_salario.xml para que as alterações sejam confirmadas e todas as suas referências possam ser utilizadas pelo código da aplicação Java por meio da interface R.java. Vamos conferir agora o código em XML do nosso arquivo salvo: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="digite seu salário" tools:context=".salarioactivity" /> <EditText android:id="@+id/edsalario" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" > <requestfocus /> </EditText> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="qual seu percentual?" /> 97

98 <Spinner android:layout_width="match_parent" android:layout_height="wrap_content" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="calcular novo salário" /> </LinearLayout> Agora vamos no arquivo SalarioActivity.java para adicionarmos o código conforme é mostrado abaixo: package com.example.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 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_salario); edsalario = (EditText) findviewbyid (R.id.edsalario); spnopcoes = (Spinner) findviewbyid(r.id.spnopcoes); btcalcular=(button) findviewbyid(r.id.btcalcular); btcalcular.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { double salario = Double.parseDouble (edsalario.gettext().tostring()); double novo_salario = 0; 98

99 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: 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. 99

100 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: 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. 100

101 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; 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%"); 101

102 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. 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 Developer Tools, conforme os dados abaixo: Application Name: ListaDeContatos Project Name: ListaDeContatos Package Name : com.example.listadecontatos Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: ListaContatosActivity Layout Name : activity_lista_contatos Vamos trocar a estrutura de layout padrão para o LinearLayout, e no componente TextView, 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 Composite ). Seguindo o que foi se pedido, a tela da aplicação ficará de acordo com a seguinte figura: 102

103 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 Id Entries Valor Agora vamos visualizar a estrutura XML do arquivo que forma a tela da aplicação acima: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > 103

104 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="escolha um contato:" tools:context=".listacontatosactivity" /> <ListView android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> </LinearLayout> Agora vamos no arquivo ListaContatosActivity.java para colocar o seguinte código abaixo (lembre-se antes de salvar o arquivo activity_lista_contatos.xml ): package com.example.listadecontatos; import android.os.bundle; import android.widget.*; import android.view.*; import android.app.*; public class ListaContatosActivity extends Activity { ListView 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() 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(); ); 104

105 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() 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 abaixo: 105

106 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: VisualizadorDeImagens Project Name: VisualizadorDeImagens Package Name : com.example.visualizadordeimagens Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: VisualizadorImagensActivity Layout Name : activity_visualizador_imagens Depois de criado o projeto vamos trocar a estrutura de layout para o LinearLayout em seguida apague o componente TextView da tela. 106

107 Antes de iniciarmos a codificação do programa, quero que você coloque duas imagens JPEG (com a extensão.jpg), dentro da pasta res/drawable-mdpi (para esse projeto usei duas imagens chamadas foto1.jpg e foto2.jpg ). Irei mostrar aqui duas formas de se realizar essa tarefa. Começarei pela primeira forma, que considero a mais tradicional de todas. Para importar um arquivo, clique com o botão direito do mouse sobre a pasta res/drawable-mdpi e selecione Import, depois selecione File System (Que se encontra dentro da pasta General, conforme mostra a figura abaixo) e em seguida clique em Next. Selecionando a opção File System Após clicar em Next será exibida a caixa de diálogo como demonstra a figura abaixo: 107

108 Caixa de diálogo File System Clique no botão Browse... para selecionar o diretório onde se encontram as imagens. Feito isso, marque os dois arquivos (imagens) para que eles sejam importados para a pasta res/drawable-mdpi. Veja a figura abaixo: Importando as imagens para o projeto 108

109 Depois disso, é só clicar em Finish para importar as imagens para o projeto. A segunda forma, que diria que é a mais fácil de todas, é você ir até o diretório onde se encontram as imagens, para que você em seguida possa selecionálas, e logo após copiá-las (o famoso Ctrl+C ). Feito isso vá até o projeto que criamos para selecionarmos o diretório drawable-mpdi para colarmos as imagens dentro da pasta (simples não?). 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: Estrutura LinearLayout inserida Agora dentro da estrutura LinearLayout que adicionamos acima, vamos inserir o componente ImageView (que se encontra na guia Images & Media ). Quando colocamos o componente no local desejado da tela, é exibido a seguinte caixa de diálogo: 109

110 Caixa de diálogo Resource Chooser Nesta caixa de diálogo escolhemos a imagem que o nosso componente vai assumir inicialmente. Iremos escolher a imagem chamada foto1 (conforme é demonstrado acima). Depois de escolher a imagem clique em OK. Veja o resultado em seguida: Resultado da operação Agora vamos alterar a propriedade do componente ImageView conforme abaixo: 110

111 ImageView Propriedade Id Valor 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 Seguindo os passos acima, o resultado do layout deve ficar de acordo com a figura abaixo: Layout da aplicação 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 Width fill_parent 111

112 Button Propriedade Valor Id Btfoto2 Text Exibir foto 2 Width fill_parent Depois de seguir todos os passos descritos acima, a aplicação tem que estar de acordo com a figura abaixo: Layout da aplicação Agora vamos no arquivo VisualizadorImagensActivity.java para colocarmos o código em seguida (lembre-se de salvar o arquivo activity_visualizador_imagens.xml antes de escrever o código): package com.example.visualizadordeimages; 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; 112

113 @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview (R.layout.activity_visualizador_imagens); 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() public void onclick(view arg0) { ); imgfoto.setimageresource (R.drawable.foto1); txtinformacao.settext("foto 1"); btfoto2.setonclicklistener(new View.OnClickListener() 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: 113

114 txtinformacao.settext("foto 1"); Cuja finalidade é mudar o título da TextView, de acordo com a String passada como parâmetro. 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: 114

115 Application Name: VisualizadorDeImagens2 Project Name: VisualizadorDeImagens2 Package Name : com.example.visualizadordeimagens2 Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: VisualizadorImagensActivity Layout Name : activity_visualizador_imagens Title : Visualizador de Imagens Depois de criado o projeto vamos trocar a estrutura de layout para o LinearLayout, e antes de iniciarmos a codificação do programa, quero que você coloque três imagens JPEG (com a extensão.jpg), dentro da pasta res/drawable-mdpi (para esse projeto usei duas imagens chamadas imagem1.jpg, imagem2.jpg e imagem3.jpg ). Depois de colocar as imagens vamos criar uma classe chamada ImageAdapter (dentro do pacote com.example.visualizadordeimagens2 ), 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 com.example.visualizadordeimagens2 (dentro da pasta src ) Criando uma nova classe Será aberto um formulário no qual você deverá preencher os dados da classe a ser criada. No campo Name você vai digitar o nome da classe a ser criada (neste caso, a classe ImageAdapter). Confira na figura seguinte: 115

116 Criando uma nova classe Se estiver tudo OK é só pressionar o botão Finish para que a classe possa ser criada. Em seguida coloque o código seguinte: package com.example.visualizadordeimagens2; 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; private int[] myimageids = { R.drawable.imagem1, R.drawable.imagem2, R.drawable.imagem3, ; public ImageAdapter(Context c) { this.mycontext = c; public int getcount() { return this.myimageids.length; 116

117 public Object getitem(int position) { return position; public long getitemid(int position) { return position; public View getview(int position, View convertview, ViewGroup parent) { ImageView i = new ImageView(this.myContext); i.setimageresource(this.myimageids[position]); i.setscaletype(imageview.scaletype.fit_xy); i.setlayoutparams(new Gallery.LayoutParams(150, 150)); 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. Agora, carregue o arquivo activity_visualizador_imagens.xml e modifique o conteúdo da TextView de acordo com a tabela abaixo: TextView Propriedade Text Valor Para visualizar todas as imagens, arraste as miniaturas Agora vamos adicionar um componente Gallery e altere as suas propriedades conforme é mostrado em seguida: Gallery Propriedade Id Valor Galeria Vamos conferir agora o código XML da tela na nossa aplicação que fizemos: 117

118 <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="para visualizar todas as imagens, arraste as miniaturas" tools:context=".visualizadorimagensactivity" /> <Gallery android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> Feito isso, abra o arquivo VisualizadorImagensActivity.java e vamos colocar o seguinte código abaixo: package com.example.visualizadordeimagens2; import android.os.bundle; import android.app.activity; import android.widget.gallery; public class VisualizadorImagensActivity extends Activity { Gallery public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_visualizador_imagens); galeria = (Gallery) findviewbyid(r.id.galeria); galeria.setadapter(new ImageAdapter(this)); Agora vamos executar a nossa aplicação. O resultado da execução você confere na figura seguinte: 118

119 Aplicação de galeria de imagens em execução Agora vamos tornar essa aplicação mais interessante. Vamos colocar nessa aplicação um ImageView, que irá armazena a imagem selecionada no componente Gallery. Carregue novamente o arquivo activity_visualizador_imagens.xml e em seguida coloque os seguintes componentes, na sequência: TextView Propriedade Text Valor Imagem selecionada ImageView Propriedade Id Src (Imagem) Valor imagem imagem1.jpg Agora vamos visualizar o código do arquivo XML que representa a da nossa aplicação: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" 119

120 android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="para visualizar todas as imagens, arraste as miniaturas" tools:context=".visualizadorimagensactivity" /> <Gallery android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="imagem selecionada" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> Agora no arquivo VisualizadorImagensActivity.java vamos substituir o código recente pelo novo código abaixo: package com.example.visualizadordeimagens2; import android.os.bundle; import android.app.activity; import android.view.view; import android.widget.*; public class VisualizadorImagensActivity extends Activity { Gallery galeria; ImageView imagem; private int[] myimageids = { R.drawable.imagem1, R.drawable.imagem2, R.drawable.imagem3, ; 120

121 @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_visualizador_imagens); galeria = (Gallery) findviewbyid(r.id.galeria); galeria.setadapter(new ImageAdapter(this)); imagem = (ImageView) findviewbyid(r.id.imagem); galeria.setonitemclicklistener(new public void onitemclick(adapterview<?> arg0, View arg1, int arg2,long arg3) { imagem.setimageresource(myimageids[arg2]); Toast.makeText(getBaseContext(), "Figura " + (arg2 + 1) + " selecionada", Toast.LENGTH_SHORT).show(); ); Quais foram as modificações desse programa? Nesse programa foi adicionado um componente chamado ImageView, que vai armazenar a imagem selecionada dentro do componente Gallery, como mostra o código abaixo: ImageView imagem; Também na aplicação adicionamos um array que contém todas as referências das imagens contidas no projeto, conforme mostra o código seguinte: private int[] myimageids = { R.drawable.imagem1, R.drawable.imagem2, R.drawable.imagem3, ; Vamos analisar agora o código dentro do método onitemclick (disparado toda vez que uma imagem dentro do Gallery é selecionada). imagem.setimageresource(myimageids[arg2]); Toast.makeText(getBaseContext(), "Figura " + (arg2 + 1) + " selecionada", Toast.LENGTH_SHORT).show(); 121

122 A primeira instrução carrega a imagem selecionada no componente Gallery no ImageView, através do método setimageresource, cujo parâmetro é o valor do índice do vetor. A segunda instrução faz uso do método maketext, da classe Toast, cuja finalidade é mostrar uma pequena mensagem na tela em um tempo curto. No primeiro parâmetro desse método sempre passamos o valor getbasecontext(). No segundo parâmetro passamos o conteúdo a ser exibido na tela. No terceiro parâmetro, definimos o tempo de exibição da mensagem na tela (um dos parâmetros é Toast.LENGH_SHORT). Execute a aplicação e confira o resultado você vê na figura abaixo: Aplicação em execução 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: 122

123 Application Name: DemonstracaoProgressBar Project Name: DemonstracaoProgressBar Package Name : com.example.demonstracaoprogressbar Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: ProgressBarActivity Layout Name : activity_progress_bar Depois de criado o projeto vamos trocar a estrutura de layout para o LinearLayout e em seguida altere a propriedade do componente TextView conforme é mostrado em seguida: TextView Propriedade Text Valor ProgressBar (Normal) ProgressBar (Normal) Nenhuma propriedade para alterar desse componente, só adicione. TextView Propriedade Text Valor ProgressBar (Large) ProgressBar (Large) Nenhuma propriedade para alterar desse componente, só adicione. TextView Propriedade Text Valor ProgressBar (Horizontal) ProgressBar (Horizontal) Propriedade Id Width Valor barra_progresso fill_parent 123

124 LinearLayout (Horizontal) Propriedade Gravity Valor center Agora dentro da estrutura adicionada acima (LinearLayout), vamos adicionar os seguintes componentes na sequência: Button Button Propriedade Valor Text + Id btaumentar Propriedade Valor Text - Id btdiminuir Depois de seguir os passos acima, a aplicação deve estar de acordo com a figura seguinte: Layout da tela da aplicação 124

125 Agora vejamos o código XML da tela da nossa aplicação: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" 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)" /> <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="fill_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="+" /> 125

126 <Button 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 com.example.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, 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() public void onclick(view arg0) { barra_progresso. incrementprogressby(10); ); btdiminuir.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { 126

127 ); 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); 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: 127

128 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. Ao lado do botão de + (aumentar) vamos adicionar um novo Button e nele mudaremos as seguintes propriedades: Button Propriedade Text Id Valor Automático btautomatico Veja a cara da tela aplicação na figura seguinte: 128

129 Layout da aplicação Agora vamos voltar para o arquivo ProgressBarActivity.java e iremos agora colocar o seguinte código destacada em negrito: package com.example.demonstracaoprogressbar; import android.os.bundle; import android.app.activity; import android.widget.*; import android.view.*; import android.os.*; public class ProgressBarActivity extends Activity { ProgressBar barra_progresso; Button btaumentar, btdiminuir, btautomatico; Runnable runnableaumentar; Handler public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_progress_bar); barra_progresso = (ProgressBar) findviewbyid (R.id.barra_progresso); 129

130 btaumentar = (Button) findviewbyid (R.id.btaumentar); btdiminuir = (Button) findviewbyid (R.id.btdiminuir); btautomatico = (Button) findviewbyid (R.id. btautomatico); runnableaumentar = new Runnable() public void run() { if(barra_progresso.getprogress()!= barra_progresso.getmax()) { barra_progresso. incrementprogressby(5); handleaumentar. postdelayed(runnableaumentar, 100); ; handleaumentar = new Handler(); btaumentar.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { ); barra_progresso.incrementprogressby(10); btdiminuir.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { barra_progresso.incrementprogressby(-10); ); btautomatico.setonclicklistener(new View.OnClickListener() public void onclick(view v) { handleaumentar.post(runnableaumentar); ); 130

131 Agora irei comentar alguns códigos em negrito 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() 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); 131

132 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: DemonstracaoDatePicker Project Name: DemonstracaoDatePicker Package Name : com.example.demonstracaodatepicker Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: DatePickerActivity Layout Name : activity_date_picker 132

133 Depois de criado o projeto modifique a estrutura de layout da tela para LinearLayout, e em seguida altere as propriedades do TextView conforme abaixo: TextView Propriedade Text Valor Configure a data Agora insira os seguintes componentes na sequência: DatePicker Propriedade Id Width Valor data fill_parent Button Propriedade Id Width Text Valor btmostrardata fill_parent Mostrar data Seguindo os passos acima, a aplicação deve estar de acordo com a figura abaixo: Layout da aplicação 133

134 Vamos ver o código XML da tela da nossa aplicação: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <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="fill_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/btmostrardata" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="mostrar data" /> </LinearLayout> Agora vamos no arquivo DatePickerActivity.java para colocarmos o seguinte código seguinte: package com.example.demonstracaodatepicker; 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 public 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); 134

135 btmostrardata.setonclicklistener(new View.OnClickListener() 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(); ); Vamos executar a nossa aplicação. O resultado você vê na figura seguinte:. Aplicação de calendário em execução 135

136 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: DemonstracaoTimePicker Project Name: DemonstracaoTimePicker Package Name : com.example.demonstracaotimepicker Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: TimePickerActivity Layout Name : activity_time_picker Depois de criado o projeto modifique a estrutura para LinearLayout e em seguida altere as propriedades do TextView conforme é mostrado em seguida: TextView Propriedade Text Valor Configure a hora Agora insira os seguintes componentes na sequência: TimePicker Propriedade Id Width Valor hora fill_parent Button Propriedade Id Width Text Valor btmostrarhora fill_parent Mostrar hora 136

137 Seguindo os passos acima, a aplicação deve estar de acordo com a figura seguinte: Layout da aplicação Agora vamos no arquivo TimePickerActivity.java para digitarmos o seguinte código abaixo: package com.example.demonstracaotimepicker; import android.os.bundle; import android.app.activity; import android.view.view; import android.widget.*; import android.app.*; public class TimePickerActivity extends Activity { TimePicker hora; Button public 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() { 137

138 @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(); ); 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. 138

139 Crie um novo projeto no Eclipse para Android com os seguintes dados abaixo: Application Name: SistemaDeClassificacao Project Name: SistemaDeClassificacao Package Name : com.example.sistemadeclassificacao Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: ClassificacaoActivity Layout Name : activity_classificacao Depois de criado o projeto altere a estrutura da tela para LinearLayout (Vertical) e altere as propriedades do componente TextView conforme você pode conferir abaixo: TextView Propriedade Padding Text Valor (Deixar em branco) Avalie o jogo abaixo: Feito isso adicione uma estrutura LinearLayout (Horizontal) e modifique as seguintes propriedades abaixo: LinearLayout (Horizontal) Propriedade Id Gravity Valor layoutfoto 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, fique a vontade para escolher a foto do jogo que você quiser). Feito isso altere as suas propriedades abaixo: ImageView Propriedade Id Width (layout_width) Height (layout_height) Src Valor Imagem_jogo 200dp 200dp jogo_angry_birds.jpg 139

140 Logo abaixo a estrutura layoutfotos que adicionamos, coloque os seguintes componentes abaixo: TextView Propriedade Text Valor Deixe seu voto RatingBar Propriedade Valor Id rtbvotacao Num Stars 4 TextView Propriedade Id Text Valor txtstatus Status: Seguindo os passos acima, a aplicação deve estar de acordo como mostra a figura seguinte: Layout da tela da aplicação 140

141 Vejamos o código XML da estrutura da tela da aplicação acima: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="avalie o jogo abaixo:" tools:context=".classificacaoactivity" /> <LinearLayout android:id="@+id/layoutfoto" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" > <ImageView android:id="@+id/imageview1" android:layout_width="200dp" android:layout_height="200dp" android:src="@drawable/jogo_angry_birds" /> </LinearLayout> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="deixe seu voto abaixo:" /> <RatingBar android:id="@+id/rtbvotacao" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numstars="4" /> <TextView android:id="@+id/txtstatus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="status:" /> </LinearLayout> Agora vamos no arquivo ClassificacaoActivity.java para digitarmos o seguinte código: 141

142 package com.example.sistemadeclassificacao; import android.os.bundle; import android.app.activity; import android.widget.*; import android.view.*; public class ClassificacaoActivity extends Activity { TextView txtstatus; RatingBar public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_classificacao); txtstatus = (TextView) findviewbyid (R.id.txtstatus); rtbvotacao = (RatingBar) findviewbyid (R.id.rtbvotacao); txtstatus.settext("status: Ruim"); rtbvotacao.setonratingbarchangelistener(new RatingBar.OnRatingBarChangeListener() 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: 142

143 Parâmetro rating (valor) Equivale a quantas 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: 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 143

144 5.12) Desenvolvendo um componente personalizado Conforme havia falado no Capítulo 4, existe uma seção chamada Custom & Library Views onde nela se encontram componentes personalizados (que normalmente são aqueles criados por usuários). Aqui neste tópico iremos aprender um componente personalizado. Para começar vamos criar um novo projeto conforme mostra os dados abaixo: Application Name: ComponentesPersonalizados Project Name: ComponentesPersonalizados Package Name : com.example.componentespersonalizados Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: ComponentesActivity Layout Name : activity_componentes Depois de criado o projeto, vamos alterar a estrutura da tela para LinearLayout (Vertical) e em seguia vamos apagar o componente TextView da tela da aplicação. Para começar este tópico iremos criar aqui agora o nosso primeiro componente personalizado, que será derivado do componente TextView, que vai se chamar MyTextView. Como fazer para criar o nosso primeiro componente? Primeiramente precisa ser esclarecido aqui que todo componente utilizado no Android é na verdade uma classe. Então, para criarmos um novo componente no Android na verdade precisamos criar uma nova classe ( neste caso, uma classe que será derivada da classe TextView). Para criarmos uma classe basta clicar com o botão direito do mouse sobre o nome do pacote (neste caso, o pacote com.example.componentespersonalizados ) e em seguida selecione New / Class para chamar a caixa de diálogo de criação de classe. No campo Name vamos digitar o nome da nossa classe que vai se chamar MyTextView. No campo Superclass vamos digitar o nome da classe na qual esse componente vai derivar as propriedades e eventos (que neste caso será a classe TextView). Digitaremos no campo Superclass o seguinte pacote (seguido pelo nome da classe) : android.widget.textview. Veja como fica na figura seguinte: 144

145 Criando o componente MyTextView Depois de preenchidos os campos, clique no botão Finish para gerar o código. Feito isso o código será gerado e você verá que o Eclipse vai acusar um erro no mesmo, conforme você confere na figura seguinte: Código do componente gerado (mais com um erro) O que é esse erro que está sendo acusado? Esse erro aconteceu pelo fato da classe não apresentar nenhum método construtor (como normalmente toda classe possui). No Android existem construtores padrões presentes em todos os seus componentes, que permite que eles possam ser usados em tempo de projeto (durante a construção da tela da aplicação) ou em tempo de execução (quando o aplicativo já está em execução). 145

146 Vamos colocar agora os construtores que vão permitir que os componentes sejam usados em ambas as situações (em tempo de projeto e em tempo de execução), conforme você pode conferir em seguida: package com.example.componentespersonalizados; import android.content.context; import android.util.attributeset; import android.widget.textview; public class MyTextView extends TextView { public MyTextView(Context context) { //Construtor de tempo de execução super(context); public MyTextView(Context context, AttributeSet attrs) { //Construtor de tempo de projeto super(context, attrs); Nosso componente já está criado, podendo ser agora utilizado em nossos projetos. Ele se encontra disponível na seção Custom & Library Views (basta clicar no botão Refresh para aparecer), conforme você pode conferir em seguida: Componente MyTextView disponível para uso 146

147 Vamos clicar e arrastar o componente na tela e em seguida altere suas propriedades, conforme é mostrado em seguida: MyTextView Propriedade Text Valor Este é o componente MyTextView Feito isso a tela deverá estar de acordo como mostrar a figura seguinte: Componente MyTextView inserido na tela Veja a estrutura do componente no modo XML, conforme destaca o código em negrito: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <com.example.componentespersonalizados.mytextview android:id="@+id/mytextview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="este é o componente MyTextView" /> </LinearLayout> Aprendemos até agora a criar um componente simplesmente derivando de um já existente, mas, se eu quisesse criar um componente um pouco mais complexo (tipo um componente do tipo SpinEdit, compostos por mais de uma widget)? Para isso devemos criar um arquivo XML que vai representar o nosso componente em nosso projeto. Para isso vamos criar um novo arquivo de XML chamado spinedit.xml (que vai utilizar como estrutura de tela padrão o LinearLayout). 147

148 Depois de criado o arquivo de layout XML, vamos colocar o código do nosso componente, conforme é mostrado em seguida : <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <EditText android:id="@+id/ednumber_picker" android:layout_width="80dp" android:layout_height="60dp" android:layout_weight="1" android:inputtype="number" > </EditText> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" > <Button android:id="@+id/btup" android:layout_width="60dp" android:layout_height="30dp" android:text="+" /> <Button android:id="@+id/btdown" android:layout_width="60dp" android:layout_height="30dp" android:text="-" /> </LinearLayout> </LinearLayout> O resultado final da aparência do nosso componente você confere na imagem seguida: 148

149 Aparência do nosso componente (SpinEdit) Agora vamos criar a classe que vai estar associada ao nosso arquivo de layout que representa o nosso componente. O nome da nossa classe vai ser SpinEdit, e ela vai ser uma classe que será derivada do componente LinearLayout, logo, no campo Superclass vamos digitar : android.widget.linearlayout. Depois de preencher os campos e gerar o código da nossa classe (componente), vamos escrever as instruções na classe que vai dar funcionalidade ao nosso componente, conforme você confere em seguida: package com.example.componentespersonalizados; import android.content.context; import android.util.attributeset; import android.view.layoutinflater; import android.view.view; import android.widget.button; import android.widget.edittext; import android.widget.linearlayout; public class SpinEdit extends LinearLayout { EditText ednumber_picker; Button btup, btdown; View.OnClickListener clup, cldown; int value; public SpinEdit(Context context, AttributeSet attrs) { super(context, attrs); LayoutInflater layoutinflater = (LayoutInflater) context.getsystemservice (Context.LAYOUT_INFLATER_SERVICE); layoutinflater.inflate(r.layout.spinedit, this); ednumber_picker = (EditText) findviewbyid(r.id.ednumber_picker); btup = (Button) findviewbyid(r.id.btup); btdown = (Button) findviewbyid(r.id.btdown); 149

150 ednumber_picker.setfocusable(false); ednumber_picker.setclickable(false); value = 0; ednumber_picker.settext(string.valueof(value)); btup.setonclicklistener(new View.OnClickListener() public void onclick(view v) { value++; ednumber_picker.settext (String.valueOf(value)); if(clup!= null) clup.onclick(v); ); btdown.setonclicklistener(new View. OnClickListener() public void onclick(view v) { value--; ednumber_picker.settext (String.valueOf(value)); if(cldown!= null) cldown.onclick(v); ); public void setonupclicklistener(view.onclicklistener l) { clup = l; public void setondownclicklistener(view.onclicklistener l) { cldown = l; public void setvalue(int value) { this.value = value; 150

151 Irei explicar agora alguns trechos de código do componente. Dentro do construtor do nosso componente temos o seguinte trecho de código: LayoutInflater layoutinflater = (LayoutInflater) context.getsystemservice (Context.LAYOUT_INFLATER_SERVICE); layoutinflater.inflate(r.layout.spinedit, this); Que é responsável por carregar o layout (conteúdo) que representa o nosso componente, definido no arquivo XML spinedit.xml. Nesse componente também foram definidos os seguintes métodos: setonupclicklistener: Esse método define um evento que será disparado toda vez que o botão + (Up) for clicado. setondownclicklistener: Esse método define um evento que será disparado toda vez que o botão - (Down) for clicado. setvalue: Permite definir o valor do nosso componente. Depois de colocar o código acima salve o arquivo, e em seguida vamos na guia Custom & Library Views para arrastarmos os seguintes componentes em seguida: MyTextView Propriedade Text Valor O componente abaixo é um SpinEdit SpinEdit Propriedade Id Valor spevalor Feito isso, a aplicação deve estar de acordo como mostra a figura seguinte: 151

152 Layout da tela da aplicação Agora vamos no arquivo ComponentesActivity.java para digitarmos o seguinte código abaixo: package com.example.componentespersonalizados; import android.os.bundle; import android.view.view; import android.app.activity; public class ComponentesActivity extends Activity { SpinEdit public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_componentes); spevalor = (SpinEdit) findviewbyid (R.id.spevalor); spevalor.setonupclicklistener(new View.OnClickListener() public void onclick(view view) { //Colocar aqui o código que será executado //quando o botão Up for clicado ); spevalor.setondownclicklistener(new View.OnClickListener() public void onclick(view view) { //Colocar aqui o código que será //executado quando o botão Down for clicado ); 152

153 Depois de digitar o código acima, vamos testar a nossa aplicação para usarmos o componente que desenvolvemos. Veja uma demonstração na figura seguinte: Aplicação em execução Até aqui aprendemos a utilizar todos os componentes básicos necessários para a construção de uma aplicação em Android. No próximo capítulo, iremos aprender como trabalhar com mais de uma tela em uma aplicação Android usando as estruturas de layout. 153

154 Capitulo 6 Trabalhando com mais de uma tela em uma aplicação Até 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: TrocaDeTelas Project Name: TrocaDeTelas Package Name : com.example.trocadetelas Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: TrocaTelasActivity Layout Name : 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 Text Valor Você está na tela principal Agora adicione um componente Button e modifique as seguintes propriedades: 154

155 Button Propriedade Valor Id bttela2 Layout width fill_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: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="você está na tela principal" tools:context=".trocatelasactivity" /> <Button android:id="@+id/bttela2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="ir para tela 2" /> </LinearLayout> 155

156 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 e em seguida clicar em New e logo após Other, confira na figura abaixo: Criando um arquivo XML Feito isso será aberto uma tela com várias pastas, você irá expandir a pasta Android e em seguida vai selecionar a opção Android Layout XML File, conforme mostra a figura seguinte: 156

157 Android XML Layout File Após selecionar a opção acima clique em Next que em seguida será aberta a tela seguinte: New Android XML Layout File 157

158 Por padrão a estrutura de layout padrão selecionada é LinearLayout (que será a estrutura que iremos usar). Agora no campo File digite tela2 e em seguida clique em Finish para que o arquivo seja gerado. Veja o resultado na figura seguinte: Tela de layout em branco Por padrão quando criamos a tela da aplicação utilizando o LinearLayout, ele cria com a orientação vertical (essa é que vamos utilizar, portanto, não vamos mexer na estrutura). Agora vamos adicionar os seguintes componentes, na sequência: TextView Propriedade Valor Text Você está na tela 2 Button Propriedade Id Width Text Valor bttelaprincipal fill_parent Ir pata tela principal 158

159 Seguindo os passos acima, o layout do arquivo tela2.xml deve estar de acordo com a figura abaixo: Layout da tela 2 Vejamos agora o código XML da tela da nossa aplicação: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="você está na tela 2" /> <Button android:id="@+id/bttelaprincipal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="ir para tela principal" /> </LinearLayout> Agora vamos no arquivo TrocaTelasActivity.java para digitarmos o código abaixo: package com.example.trocadetelas; import android.os.bundle; import android.app.activity; import android.widget.*; import android.view.*; 159

160 public class TrocaTelasActivity extends Activity { Button bttelaprincipal, 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() public void onclick(view v) { CarregarTela2(); ); public void CarregarTela2() { setcontentview(r.layout.tela2); bttelaprincipal = (Button) findviewbyid (R.id.bttelaprincipal); bttelaprincipal.setonclicklistener(new View.OnClickListener() public void onclick(view v) { CarregarTelaPrincipal(); ); 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: 160

161 Aplicação em execução (na tela principal) Aplicação em execução (na segunda tela) 161

162 6.1) Desenvolvendo uma aplicação de cadastro Com o que já aprendemos neste capítulo (e também nós capítulos e tópicos anteriores) já podemos desenvolver uma aplicação mais interessante. Para tornar o aprendizado mais interessante vamos criar uma aplicação de cadastro de pessoas. Nessa aplicação o usuário vai informar os seguintes dados : nome, profissão e idade. 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. Nessa aplicação para armazenar os dados eu faço uso de uma estrutura de dados do tipo lista (duplamente encadeada). Nessa estrutura os dados são armazenados em sequência, e acessados tanto sequencialmente e na sua ordem inversa de cadastro (avançando e retrocedendo pelos registros). Bom, vamos construir a nossa aplicação. Crie um novo projeto com os seguintes dados abaixo: Application Name: AplicacaoDeCadastro Project Name: AplicacaoDeCadastro Package Name : com.example.aplicacaodecadastro Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: AplicacaoCadastroActivity Layout Name : activity_aplicacao_cadastro Dentro da pasta res/drawable-mdpi coloque uma figura que que represente o ícone da nossa aplicação. Para esta aplicação utilizei uma imagem de extensão PNG chamada profile.png. 162

163 Altere a estrutura de layout da sua aplicação para o LinearLayout e em APAGUE o componente TextView. Feito isso adicione os seguintes componentes na sequência: ImageView Propriedade Src (imagem) Valor profile.png TextView Propriedade Text Valor Bem vindo a Aplicação de Cadastro de Pessoas.Este é um pequeno programa de demonstração de cadastro.selecione uma das opções abaixo: Button Propriedade Id Width Text Valor btcadastrarpessoas fill_parent Cadastrar pessoa Button Propriedade Id Width Text Valor btlistarpessoas fill_parent Listar pessoas cadastradas Seguindo os passos acima, a aplicação deve estar de acordo com a figura seguinte: 163

164 Layout da tela principal da aplicação Vejamos agora a estutura XML da tela principal da nossa aplicação: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/imageview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/profile" /> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="bem vindo a Aplicação de Cadastro de Pessoas.Este é um pequeno programa de demonstração de cadastro. Selecione uma das opções abaixo:" /> <Button android:id="@+id/btcadastrarpessoa" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="cadastrar pessoa" /> <Button android:id="@+id/btlistarpessoas" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="listar pessoas cadastradas" /> </LinearLayout> 164

165 Agora vamos criar mais uma tela (arquivo de layout XML) para nossa aplicação. 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 Android XML Layout File, conforme já foi mostrado anteriormente no último exemplo). O nome do nosso arquivo de layout XML vai ser cadastro (a estrutura que vamos utilizar para essa tela será o LinearLayout). Depois de criado o arquivo vamos adicionar os seguintes componentes na sequência: ImageView Propriedade Src (Imagem) Valor profile TextView Propriedade Text Valor Módulo de cadastro.digite seus dados abaixo: TextView Propriedade Text Nome: Valor EditText (Plain Text) Propriedade Id Text Valor ednome (Deixar em branco) TextView Propriedade Text Profissão: Valor EditText (Plain Text) Propriedade Id Width Text Valor edprofissao fill_parent (Deixar em branco) 165

166 TextView Propriedade Text EditText (Plain Text) Propriedade Id Width Text Idade: Valor Valor edidade fill_parent (Deixar em branco) Seguindo os passos acima, a aplicação deve estar de acordo com a figura seguinte: Layout da tela de cadastro Bom, ainda não acabou. Agora vamos adicionar uma estrutura LinearLayout (Horizontal) que será responsável por organizar os botões de forma horizontal logo após a EditText que representa o campo idade. Após adicionar essa estrutura, modifique a seguintes propriedades dela, conforme abaixo: Propriedade Gravity Valor center A propriedade Gravity, similar a propriedade Orientation, determina o alinhamento dos componentes dentro da estrutura, que no caso acima está alinhando os componentes de forma centralizada, ou seja, os componentes vão estar dispostos de forma horizontal (um ao lado do outro) e todos esses componentes estarão organizados de forma centralizada. 166

167 Seguindo o mesmo procedimento acima, vamos adicionar dois componentes do tipo Button dentro dessa estrutura, e vamos mudar as seguintes propriedades citadas abaixo. Button Propriedade Id Text Valor btcadastrar Cadastrar pessoa Button Propriedade Id Text Valor btcancelar Cancelar Seguindo os passos acima, o Layout de nossa aplicação deve estar de acordo com a figura abaixo: Layout da tela de cadastro 167

168 Vamos ver agora a estrutura XML da tela de cadastro da aplicação: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/imageview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/profile" /> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="módulo de cadastro. Digite seus dados abaixo:" /> <TextView android:id="@+id/textview2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="nome:" /> <EditText android:id="@+id/ednome" android:layout_width="match_parent" android:layout_height="wrap_content" > <requestfocus /> </EditText> <TextView android:id="@+id/textview3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="profissão:" /> <EditText android:id="@+id/edprofissao" 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:text="idade:" /> 168

169 <EditText 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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="cadastrar" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="cancelar" /> </LinearLayout> </LinearLayout> Agora vamos criar mais uma tela (arquivo de layout XML) para nossa aplicação. O nome da nossa tela vai se chamar lista_pessoas_cadastradas. Após criar a tela da nossa aplicação, vamos adicionar os seguintes componentes na sequência: ImageView Propriedade Src (Imagem) Valor profile.png TextView Propriedade Text Text size Valor Lista de pessoas cadastradas. 20sp Seguindo os passos acima, o layout da aplicação deve estar de acordo com a figura seguinte: 169

170 Layout da tela de listagem de cadastrados Ainda não acabou. Vamos adicionar após o texto uma nova estrutura de layout do tipo LinearLayout (Horizontal), e em seguida vamos mudar as seguintes propriedades dela, conforme abaixo: LinearLayout Propriedade Id Valor layoutnome Agora dentro da estrutura layoutnome vamos adicionar os seguintes componentes na sequência: TextView Propriedade Text Text color Text size Valor Nome. #0000ff 20sp TextView Propriedade Text Text size Id Valor (Deixar em branco com espaços) 20sp txtnome 170

171 Logo após a estrutura LinearLayout que chamamos de layoutnome, vamos adicionar uma nova estrutura LinearLayout (Horizontal), e em seguida modifique as seguintes propriedades abaixo: Propriedade Id Valor layoutprofissao Agora dentro da estrutura layoutprofissao vamos adicionar os seguintes componentes na sequência: TextView Propriedade Text Text color Text size Valor Profissão. #0000ff 20sp TextView Propriedade Text Text size Id Valor (Deixar em branco com espaços) 20sp txtprofissao Agora vamos adicionar uma nova estrutura LinearLayout (Horizontal) e em seguida modifique as seguintes propriedades abaixo: Propriedade Id Valor layoutidade Agora dentro da estrutura layoutidade vamos adicionar os seguintes componentes na sequência: TextView Propriedade Text Text color Text size Valor Idade. #0000ff 20sp 171

172 TextView Propriedade Text Text color Text size Id Valor (Deixar em branco com espaços) #ffffff 20sp txtidade Agora vamos adicionar uma nova estrutura LinearLayout (Horizontal), como já foi mostrado acima. E depois, modifique as seguintes propriedades abaixo: Propriedade Id Gravity Valor layoutbotoes Center Agora dentro da estrutura layoutbotoes vamos adicionar os seguintes componentes na sequência: Button Propriedade Id Text Valor btvoltar Voltar Button Propriedade Id Text Avançar Agora vamos adicionar um Button logo após a estrutura layoutbotoes que criamos com as seguintes propriedades abaixo: Button Propriedade Id Text Width Valor btmenu_principal Menu principal fill_parent Seguindo todos os passos acima, o layout da aplicação deve estar de acordo com a figura abaixo: 172

173 Layout da tela de lista de pessoas cadastradas Vejamos agora a estrutura em XML da tela de listagem de pessoas cadastradas: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/imageview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/profile" /> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="lista de pessoas cadastradas" android:textsize="20sp" /> <LinearLayout android:id="@+id/layoutnome" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/textview2" android:layout_width="wrap_content" android:layout_height="wrap_content" 173

174 android:text="nome :" android:textcolor="#0000ff" android:textsize="20sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" " android:textsize="20sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="profissão:" android:textcolor="#0000ff" android:textsize="20sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" " android:textsize="20sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="idade:" android:textcolor="#0000ff" android:textsize="20sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=" " android:textsize="20sp" /> </LinearLayout> 174

175 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="voltar" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="avançar" /> </LinearLayout> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="menu principal" /> </LinearLayout> Conforme já havia falado, para esse programa vamos trabalhar com uma estrutura de dados do tipo lista (duplamente encadeada). Para organizarmos de uma forma mais clara o armazenamento dos dados na memória, irei criar uma classe que vai representar o registro das informações na memória. A classe que iremos criar vai se chamar Registro. Essa classe vai estar dentro do mesmo pacote onde se encontra o arquivo AplicacaoCadastroActivity.java (neste caso, o pacote com.example.aplicacaodecadastro ). Depois de criarmos a classe, vamos escrever o seu código conforme é mostrado em seguida: Para criamos uma classe basta clicar com o botão direito sobre o pacote citado acima e em seguida selecionar New/Class. Feito isso vai se abrir aquela caixa de diálogo de criação de classes e no campo Name vamos digitar o nome da classe que vai se chamar Registro (digitar sem aspas, é claro). Feito isso clique no botão Finish para que a classe possa ser criada. Depois de gerada a classe coloque o seguinte código como é demonstrado abaixo: package com.example.aplicacaodecadastro; public class Registro { String nome; String profissao; String idade; Registro prox; Registro ant; 175

176 Agora no arquivo AplicacaoCadastroActivity.java vamos colocar o seguinte código abaixo: package com.example.aplicacaodecadastro; import android.os.bundle; import android.app.activity; import android.app.alertdialog; import android.widget.*; import android.view.*; public class AplicacaoCadastroActivity extends Activity { Button btcadastarpessoa, btlistarpessoas; Button btcadastrar, btcancelar; Button btvoltar, btavancar, btmenu_principal; TextView txtnome,txtprofissao,txtidade; EditText ednome, edprofissao, edidade; Registro pri,ult, reg, aux, anterior; int numero_registros = 0; int public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); CarregarTelaPrincipal(); public void CarregarTelaPrincipal() { setcontentview (R.layout.activity_aplicacao_cadastro); btcadastarpessoa = (Button) findviewbyid (R.id.btcadastrarpessoa); btlistarpessoas = (Button) findviewbyid (R.id.btlistarpessoas); btcadastarpessoa.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { ); CarregarTelaCadastro(); 176

177 btlistarpessoas.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { CarregarTelaListagemPessoas(); ); public void CarregarTelaCadastro() { setcontentview(r.layout.cadastro); ednome = (EditText) findviewbyid(r.id.ednome); edprofissao = (EditText) findviewbyid (R.id.edprofissao); edidade = (EditText) findviewbyid(r.id.edidade); btcadastrar = (Button) findviewbyid (R.id.btcadastrar); btcancelar = (Button) findviewbyid(r.id.btcancelar); btcadastrar.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { anterior = reg; reg = new Registro(); reg.nome = ednome.gettext().tostring(); reg.profissao = edprofissao.gettext().tostring(); reg.idade = edidade.gettext().tostring(); if(pri == null) pri = reg; if(ult == null) ult = reg; else { ult.prox = reg; ult = reg; ult.ant = anterior; numero_registros++; ExibirMensagem("Registro cadastrado com sucesso"); 177

178 CarregarTelaPrincipal(); ); btcancelar.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { CarregarTelaPrincipal(); ); public void CarregarTelaListagemPessoas() { if(numero_registros == 0) { ExibirMensagem("Nenhum registro cadastrado"); CarregarTelaPrincipal(); return; else { setcontentview(r.layout.lista_pessoas_cadastradas); btvoltar = (Button) findviewbyid(r.id.btvoltar); btavancar = (Button) findviewbyid(r.id.btavancar); btmenu_principal = (Button) findviewbyid(r.id.btmenu_principal); txtnome = (TextView) findviewbyid(r.id.txtnome); txtprofissao = (TextView) findviewbyid(r.id.txtprofissao); txtidade = (TextView) findviewbyid(r.id.txtidade); aux = pri; posicao = 1; txtnome.settext(aux.nome); txtprofissao.settext(aux.profissao); txtidade.settext(aux.idade); btvoltar.setonclicklistener(new View.OnClickListener() public void onclick(view v) { if(posicao == 1) return; 178

179 posicao--; aux = aux.ant; txtnome.settext(aux.nome); txtprofissao.settext(aux.profissao); txtidade.settext(aux.idade); ); btavancar.setonclicklistener(new View.OnClickListener() public void onclick(view v) { ); if(posicao == numero_registros) return; posicao++; aux = aux.prox; txtnome.settext(aux.nome); txtprofissao.settext(aux.profissao); txtidade.settext(aux.idade); btmenu_principal.setonclicklistener(new View.OnClickListener() public void onclick(view v) { CarregarTelaPrincipal(); ); public void ExibirMensagem(String mensagem){ AlertDialog.Builder dialogo = new AlertDialog. Builder(AplicacaoCadastroActivity.this); dialogo.settitle("aviso"); dialogo.setmessage(mensagem); dialogo.setneutralbutton("ok", null); dialogo.show(); 179

180 Agora vamos analisar aos poucos os códigos dessa aplicação. Observe que nessa aplicação ou possuo três métodos: o método CarregarTelaPrincipal (responsável por carregar a tela principal), o método CarregarTelaCadastro (responsável por carregar a tela de cadastro) e o método CarregarTelaListagemPessoas (responsável por carregar a tela de listagem dos usuários cadastrados). Vamos analisar alguns trechos importantes de código do método CarregarTelaCadastro. Se você observar nessa aplicação, foram declarados cinco variáveis : pri,ult, reg, aux e anterior ( todas elas do tipo Registro). Irei descrever aqui a finalidade de cada variável: A variável pri serve para apontar para o endereço do primeiro registro armazenado na memória. A variável ult aponta para o endereço do último registro. A variável reg armazena os dados do registro corrente, ou seja, a cada instância de um novo registro, ela irá armazenar a instância corrente. A variável aux funciona como uma variável auxiliar, que será utilizada durante a navegação pelos registros na tela de listagem de usuários cadastrados. A variável anterior guarda sempre o último registro anterior antes da criação de uma nova instância de dados, que será armazenada em reg. Isso significa que antes de reg receber uma nova instância de dados, a variável anterior irá armazenar o endereço de dados guardado atualmente por reg. Vamos analisar a linha de comando dentro do método onclick do botão btcadastrar. A linha: reg = new Registro(); Cria uma nova instância da classe Registro e guarda essa instância na variável reg. As linhas: reg.nome = ednome.gettext().tostring(); reg.profissao = edprofissao.gettext().tostring(); reg.idade = edidade.gettext().tostring(); Gravam os dados dos campos no objeto reg. Já as linhas abaixo: if(pri == null) pri = reg; if(ult == null) ult = reg; else { ult.prox = reg; ult = reg; ult.ant = anterior; 180

181 Fazem todo o processo de armazenamento dos dados. Agora vamos para o método CarregarTelaListagemPessoas. Quando esse método é chamado, é feita uma verificação se há dados cadastrados, se não houver dados cadastrados será exibida uma mensagem indicando essa situação e você será retornado a tela principal. Vou comentar algumas linhas desse método. A instrução: aux=pri; Retorna para a variável aux o endereço do primeiro registro, que está armazenado em pri. Já as linhas: txtnome.settext(aux.nome); txtidade.settext(aux.idade); txtprofissao.settext(aux.profissao); Joga as informações obtidas (nome, idade e profissão) para os campos (todos do tipo TextView), para que elas possam ser exibidas. Vamos agora para o método onclick do botão btvoltar. Esse botão mostra os registros anteriores. Antes de voltar um registro, verifico se eu me encontro no primeiro registro pela condição: if(pos==1) Se a condição for verdadeira, saio do evento, senão, continuo executando as instruções. A linha: aux=aux.ant; Retorna para aux o endereço do registro anterior. Depois disso são executados instruções para que os dados possam ser exibidos. Já no método onclick do botão btavancar, antes de passar para o próximo registro, verifico se já está no último registro pela instrução: if(pos==numero_registros) Se a condição for verdadeira, o evento é encerrado, senão, continuo executando as instruções. A linha: aux=aux.prox; Retorna para aux o endereço do próximo registro. Depois disso são executados instruções para que os dados possam ser exibidos. Bom, vamos executar a nossa aplicação? O resultado você confere nas figuras seguintes: 181

182 Aplicação em execução Tela principal Aplicação em execução Tela de cadastro 182

183 Aplicação em execução Tela de listagem dos cadastrados 183

184 Capitulo 7 Conhecendo os tipos de estruturas de layout do Android Aplataforma Android nos oferece vários tipos de estruturas de layouts que podemos utilizar em nossas aplicações. Até o presente momento, trabalhamos com o LinearLayout (tanto de distribuição horizontal e vertical). 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 Eclipse para Android com os seguintes dados: Application Name: TiposDeLayout Project Name: TiposDeLayout Package Name : com.example.tiposdelayout Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: TiposLayoutActivity Layout Name : activity_linear_layout 7.1) LinearLayout A estrutura LinearLayout (como já utilizamos nos programas desenvolvidos acima) organiza os componentes de forma que eles possam ser distribuídos de forma horizontal e vertical. Por padrão quando criamos um projeto no Android, a estrutura disponível e a RelativeLayout (que explicarei sobre ela daqui a pouco). Como de costume, vamos alterar a estrutura padrão da tela do dispositivo de RelativeLayout para LinearLayout (Vertical). Veja o resultado: 184

185 Estrutura alterada para LinearLayout Vamos alterar as seguintes propriedades do componente TextView : TextView Propriedade Valor Text Texto 1 Agora adicione os seguintes componentes na sequência: TextView Propriedade Valor Text Texto 2 TextView Propriedade Valor Text Texto 3 Vejamos o resultado: 185

186 Componentes distribuídos com o LinearLayout (Vertical) A estrutura LinearLayout que definimos acima faz a distribuição vertical dos componentes. Vejamos como ficam distribuídos os componentes de forma horizontal: Componentes distribuídos com o LinearLayout (Horizontal) 7.2) TableLayout A estrutura TableLayout comporta os componentes nele inseridos como se eles estivessem em uma tabela (Table), organizados em linhas e colunas. 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). Como podemos ver, o arquivo não possui nenhum componente inserido nele. Vamos adicionar três componentes do tipo TextView na tela da nossa aplicação. Observe que ao arrastar os componentes, eles são colocados um embaixo do outro (verticalmente, como na estrutura LinearLayout), conforme mostra a figura seguinte: 186

187 Componentes inseridos na estrutura TableLayout Conforme eu havia falado, os componentes dentro dessa estrutura são ajustados em linhas e colunas e como podemos ver, eles foram colocados um embaixo do outro (linha após linha). Como faço por exemplo para colocar os três primeiros componentes dispostos em colunas e o restante em linhas? Supondo novamente a tela da aplicação sem componentes, vamos arrastar a estrutura TableRow (situada na guia Layouts ) para a tela da nossa aplicação. A estrutura TableRow é responsável por disponibilizar os componentes dentro dela de forma horizontal (em colunas). Agora dentro dessa estrutura vamos arrastar três componentes do tipo TextView, sabendo-se que os três componentes devem estar com o título Texto1, Texto2 e Texto3 (respectivamente). O resultado você confere na figura abaixo: Componentes inseridos na estrutura TableRow Agora vamos inserir mais três componentes do tipo TextView dentro da estrutura TableLayout (ficando cada componente um embaixo do outro). Feito isso vamos inserir os títulos Texto4, Texto5 e Texto6 (respectivamente). O resultado você confere na figura seguinte: 187

188 Componentes inseridos na estrutura TableLayout 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=" android:layout_width="match_parent" android:layout_height="match_parent" > <TableRow android:id="@+id/tablerow1" 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="texto 1" /> <TextView android:id="@+id/textview2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="texto 2" /> 188 <TextView android:id="@+id/textview3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="texto 3" /> </TableRow> <TextView android:id="@+id/textview4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="texto 4" />

189 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="texto 5" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="texto 6" /> </TableLayout> Conforme podemos ver acima, os três primeiros componentes estão inseridos em uma estrutura chamada TableRow, que organiza os componentes em colunas. O restante foi adicionado e estrutura TableLayout, que por sua vez organiza os componentes em linhas (um embaixo do outro). 7.3) RelativeLayout A estrutura RelativeLayout organiza os componentes relativamente sobre outros componentes já inseridos na estrutura. Para entendermos o funcionamento dela, vamos criar um novo arquivo XML chamado relative_layout, que vai ter como estrutura o RelativeLayout. Se observamos nossa tela, está sem componente nenhum. Vamos arrastar um componente TextView e na propriedade Text desse componente vamos digitar a seguinte frase: Digite seu nome. Veja o resultado na figura seguinte: Componente inserido na estrutura RelativeLayout 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 189

190 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. 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 Text Width Valor (Deixar em branco) fill_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: 190

191 Arrastando o componente sobre um local Veja como ficou o resultado na figura seguinte: Componente inserido Agora vamos alterar as propriedades do componente Button conforme a tabela abaixo: Button Propriedade Text Valor Cancelar 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: 191

192 Ajustando o componente na tela Agora vamos alterar as propriedades do componente Button conforme a tabela abaixo: Button Propriedade Text Valor 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: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" > 192

193 <TextView 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:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignparentleft="true" > <requestfocus /> </EditText> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentright="true" android:text="cancelar" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ok" /> </RelativeLayout> 7.4) AbsoluteLayout Na estrutura AbsoluteLayout os componentes são inseridos em uma posição absoluta qualquer da tela, ou seja, não segue uma estrutura organizada. Vamos demonstrar o uso dessa estrutura. Crie um novo arquivo XML chamado absolute_layout cuja estrutura padrão será o AbsoluteLayout. Por padrão quando criamos o arquivo, ele não tem nenhum componente nele inserido. Vamos arrastar um componente TextView na tela da nossa aplicação em qualquer posição que seja. Veja o resultado na figura seguinte: 193

194 Componente inserido na estrutura AbsoluteLayout Quando trabalhamos com esse tipo de estrutura, cada componente possui além das suas propriedades comuns mais duas propriedades relacionadas à coordenadas : X e Y. Veja na figura abaixo: 194 Coordenadas do componente na tela do dispositivo Experimente arrastar e soltar o componente pela tela e você verá que até onde você arrasta, é onde ele fica. Vamos ver o código XML dessa aplicação: <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns: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_x="137dp" android:layout_y="65dp" android:text="textview" /> </AbsoluteLayout> Todos os componentes que estão sobre uma estrutura AbsoluteLayout possuem duas propriedades chamadas android:layout_x e android:layout_y (dentro da estrutura XML), que indicam as posições X e Y de onde o mesmo se encontra na tela do dispositivo.

195 Capitulo 8 Trabalhando com efeitos de transição Neste 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 Transitions da paleta de componentes da ferramenta de desenvolvimento Android Developer Tools. Para começarmos vamos criar um novo projeto com as seguintes informações : Application Name: DemonstracaoViewFlipper Project Name: DemonstracaoViewFlipper Package Name : com.example.demonstracaoviewflipper Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: ViewFlipperActivity Layout Name : activity_view_flipper Depois de criado o projeto, vamos alterar a estrutura da tela para LinearLayout (Vertical) e em seguia vamos alterar os atributos do componente TextView, conforme mostrados a seguir: TextView Propriedade Valor Text Texto 1 Text Size 20sp Text Color #A60000 Agora vamos na seção Transitions 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) 195

196 Feito isso vamos alterar as seguintes propriedades abaixo do componente inserido: ViewFlipper Propriedade Id Width Height Valor viewflipper fill_parent 150sp Vejamos o resultado: Componente ViewFlipper inserido na tela Agora dentro do componente ViewFlipper vamos inserir uma TextView. Em seguida, vamos conferir o resultado: 196

197 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). 197

198 Como eu posso saber se meu componente Button foi realmente inserido? Basta olharmos para a guia Outline da ferramenta, conforme é mostrado a seguir: 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 Outline, conforme podemos conferir a seguir: Componente RadioButton inserido dentro da estrutura Agora vamos executar a nossa aplicação para conferirmos o resultado: 198

199 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 Flip Interval 2000 Auto Start true 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). Vamos executar agora a nossa aplicação para conferirmos os resultados: 199

200 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 anin do nosso projeto. Para aplicarmos esses efeitos, primeiramente, vamos criar uma pasta chamada anim dentro do diretório res do nosso projeto. Em seguida, vamos criar dois arquivos XML, que irão representar os efeitos de transição (dentro da pasta anim ). O primeiro arquivo que vamos criar é o in_left.xml, que vai possuir o seguinte código abaixo: <?xml version= 1.0 encoding= utf-8?> <set xmlns: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> O segundo arquivo irá se chamar out_right.xml, que irá possuir o seguinte código : 200

201 <?xml version= 1.0 encoding= utf-8?> <set xmlns: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 In Animation Out Feito as alterações, execute a aplicação e confira os resultados: 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. 201

202 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= > <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= > <alpha android:fromalpha= 1.0 android:toalpha= 0.0 android:duration= 300 /> </set> Agora vamos alterar os atributos do componente ViewFlipper abaixo: ViewFlipper Propriedade In Animation 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. 202

203 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 Gravity Valor center E dentro da estrutura inserida acima vamos adicionar dois botões, com as informações a seguir: Button Propriedade Id Text Valor btanterior Anterior Button Propriedade Id Text Valor btproximo Proximo Veja o resultado : Layout da tela da aplicação Agora para finalizar, vamos alterar a seguintes propriedades : 203

204 ViewFlipper Propriedade Auto Start Id Valor false viewflipper Agora vamos para o arquivo ViewFlipperActivity.java para digitarmos o seguinte código: package com.example.demonstracaoviewflipper; import android.os.bundle; import android.app.activity; import android.view.menu; import android.view.view; import android.widget.*; public class ViewFlipperActivity extends Activity { Button btanterior, btproximo; ViewFlipper 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() public void onclick(view v) { viewflipper.showprevious(); ); btproximo.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.activity_view_flipper, menu); return true; 204

205 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: 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. 205

206 Vamos criar um novo projeto com as seguintes propriedades abaixo: Application Name: DemonstracaoViewFlipper2 Project Name: DemonstracaoViewFlipper2 Package Name : com.example.demonstracaoviewflipper2 Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: ViewFlipperActivity Layout Name : activity_view_flipper Apos criar o projeto, a primeira coisa que iremos fazer e alterar o tipo de layout atual para o LinearLayout e em seguida vamos apagar o componente TextView presente na tela do dispositivo. Em seguida arraste o componente ViewFlipper para dentra tela, e dentro da estrutura adicionada, insira um componente LinearLayout (Vertical). Dentro da estrutura LinearLayout inserida, vamos adicionar os seguintes componentes na sequência. TextView Propriedade Valor Text Cadastro V1.0 Text Color #ff0000 Text Size 25sp Width fill_parent Gravity center TextView Propriedade Text Valor Escolha a opção abaixo: Button Propriedade Id Text Valor btinserirregistro Inserir Registro 206

207 Vejamos como ficou a tela da nossa aplicação: Tela da aplicação Vejamos agora como está nossa aplicação estruturada, vendo pela guia Outline : Estrutura da aplicação (guia Outline ) Os próximos componentes a serem inseridos não serão visualizados na tela da aplicação, somente na seção Outline, 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), e dentro desse componente vamos adicionar os seguintes elementos: TextView Propriedade Text Valor Informe os dados a seguir: 207

208 TextView Propriedade Text Valor Nome: EditText Propriedade Width Valor fill_partent TextView Propriedade Text Valor Telefone: EditText Propriedade Width Valor fill_partent Vejamos como esta ficando a estrutura da aplicação: Estrutura da aplicação (guia Outline ) 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. Feito isso, altere as seguintes propriedades: LinearLayout Propriedade Gravity Valor center 208

209 Após inserir a estrutura, vamos adicionar os seguintes componentes dentro dela: Button Propriedade Text Valor Cadastrar Button Propriedade Id Text Valor btcancelar Cancelar Vejamos o resultado da estrutura da aplicação: Estrutura da aplicação (guia Outline ) Vejamos agora a cara da nossa aplicação : 209

210 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=" <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=" <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: ViewFlipper Propriedade Id In Animation Out Animation 210

211 Agora vamos ver o código XML de nossa aplicação: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".viewflipperactivity" > <ViewFlipper android:id="@+id/viewflipper" android:layout_width="match_parent" android:layout_height="wrap_content" android:inanimation="@anim/in_left" android:outanimation="@anim/out_right" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textview1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:text="cadastro V1.0" android:textcolor="#ff0000" android:textsize="25sp" /> <TextView android:id="@+id/textview2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="escolha a opção abaixo:" /> <Button android:id="@+id/btinserirregistro" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="inserir Registro" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textview3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="informe os dados a seguir:" /> 211

212 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="nome:" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" > <requestfocus /> </EditText> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="telefone:" /> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="cadastrar" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="cancelar" /> </LinearLayout> </LinearLayout> </ViewFlipper> </LinearLayout> Agora vamos digitar o código do arquivo ViewFlipperActivity.java, conforme é mostrado em seguida: 212

213 package com.example.demonstracaoviewflipper2; 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 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.tinserirregistro); btcancelar = (Button) findviewbyid(r.id.btcancelar); btinserirregistro.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { viewflipper.shownext(); ); btcancelar.setonclicklistener(new View.OnClickListener() public void onclick(view arg0) { viewflipper.showprevious(); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.activity_view_flipper, menu); return true; Depois de escrever o código acima, execute a aplicação e confira os resultados, conforme é exibido na figura seguinte : 213

214 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. 214

215 Capitulo 9 Trabalhando com menus em uma aplicação Em 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 e também no emulador). 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: ExemploComMenus Project Name: ExemploComMenus Package Name : com.example.exemplocommenus Minimum Required SDK : API 14: Android 4.0 (Ice Cream Sandwich) Activity Name: MenusActivity Layout Name : activity_menus Depois de criado o projeto, altere a estrutura da tela para LinearLayout (Vertical) e em seguida mude as propriedades do componente TextView conforme demonstra a tabela seguinte: TextView Propriedade Text Valor Clique no botão menu para ver as opções Seguindo o passo acima a aplicação deve estar de acordo com a figura abaixo: 215

216 Layout da tela de aplicação Vejamos agora a estrutura XML da tela desta aplicação: <LinearLayout xmlns:android=" xmlns:tools=" android:id="@+id/linearlayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="clique no botão menu para ver as opções" tools:context=".menusactivity" /> </LinearLayout> Vejamos agora o código do arquivo MenusActivity.java : package com.example.exemplocommenus; import android.os.bundle; import android.app.activity; import android.view.menu; import android.view.menuitem; import android.support.v4.app.navutils; public class MenusActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.activity_menus, menu); return true; 216

217 Se observarmos o código acima, por padrão, existe um método responsável por carregar um menu do arquivo XML de mesmo nome da tela de layout (o arquivo activity_menus.xml ). O nome desse método é oncreateoptionsmenu e é 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 activity_menus.xml situado dentro do diretório menu para adicionarmos os menus da nossa aplicação. Veja o resultado na figura seguinte: Abrindo o arquivo activity_menus.xml para criação de menus O arquivo de menu aberto através do recurso Android Menu, conforme já foi falado, é também uma estrutura formada por um código em XML. Vejamos a sua estrutura padrão: <menu xmlns:android=" <item android:id="@+id/menu_settings" android:title="@string/menu_settings" android:orderincategory="100" /> </menu> Se executarmos essa aplicação que criamos agora e após seu carregamento pressionássemos o botão menu do emulador, teríamos o seguinte resultado: 217

218 Menu em exibição Se selecionarmos no Android Menu o item menu_settings, veremos as suas propriedades conforme demonstra a figura seguinte: Visualizando as propriedades do item de menu Para demonstrar o uso deste recurso 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. 218

219 Para começar vamos remover esse item, bastando para isso selecioná-lo e em seguida clicando no botão Remove. Para adicionarmos um novo item de menu basta clicarmos no botão Add. Feito isso irá surgir a seguinte caixa de dialogo, conforme mostra a figura seguinte: Caixa de diálogo Create a new element Nesta caixa de diálogo vamos selecionar a opção Item (que representa o item de menu). Feito isso clique em OK e em seguida vamos preencher as propriedades do item conforme demonstra a tabela seguinte: Item Propriedade Id Title Novo Em seguida vamos criar mais dois itens de menu. Para isso vamos clicar novamente no botão Add para chamar aquela caixa de diálogo. Agora se você observar, a caixa de diálogo oferece opções para criar item e sub-item (sub-menu). Vamos por enquanto criar um novo item de menu (selecionando a opção Create a new element at the top level, in Menu), conforme é demonstrado em seguida: 219

220 Caixa de diálogo Create a new element Seguindo os passos demonstrados acima, vamos criar mais dois itens de menu, e para cada um deles vamos alterar as seguintes propriedades conforme demonstra as tabelas seguintes, na sequência: Item Propriedade Id Title Abrir Item Propriedade Id Title Salvar Depois de efetuar as alterações que foram pedidas acima, vamos salvar o arquivo de menu. Agora vamos ver como ficou a estrutura XML do nosso menu: <menu xmlns:android=" <item android:id="@+id/item_novo" android:title="novo" ></item> 220 <item android:id="@+id/item_abrir" android:title="abrir" ></item> <item android:id="@+id/item_salvar" android:title="salvar" ></item> </menu>

221 Agora vamos executar para ver como fica em execução na prática: 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 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 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. 221

222 A propriedade Icon serve para definimos ícone da nossa aplicação. Como os ícones ficam na pasta drawable-mdpi, utilizo a seguinte da imagem> Que é uma notação padrão que o Android utiliza para carregar imagens. 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 para digitarmos o seguinte código de exemplo abaixo: package com.example.exemplocommenus; import android.os.bundle; import android.app.activity; import android.view.menu; import android.view.menuitem; public class MenusActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.activity_menus, menu); return 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); 222

223 Se observarmos o código acima, existe um método chamado onoptionsitemselected, que é disparado toda vez quando um item de menu é selecionado. Vamos ver o código dele 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 activity_menus.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 em um item basta selecioná-lo e em seguida clicar no botão Add e na caixa de diálogo selecione a opção Sub-Menu, conforme é mostrado na figura seguinte: 223

224 Selecionando a opção Sub-Menu Com o item de Sub-menu criado, selecione-o e em seguida clique no botão Add para adicionarmos um item para o nosso Sub-menu. Depois de adicionar este item, modifique as suas propriedades conforme demonstra a tabela seguinte: Item (Sub-menu) Propriedade Id Title Salvar cópia Item (Sub-menu) Propriedade Id Title Salvar como 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: 224