Como desenvolver um aplicativo para Android

Celulares e tablets estão cada vez mais poderosos e em alguns momentos chegam a substituir computadores e notebooks no uso diário. A grande vantagem dos celulares ou tablets é que podem estar sempre com a gente, tornando possível o uso de e-mail, chats, youtube, jogos e diversos outros aplicativos a qualquer momento do dia, seja em momentos de real necessidade ou naquela aula incrivelmente tediosa. E porque não tornar-se capaz de utilizar esses aparelhos em todo seu potencial? A única maneira de fazer isso é aprendendo a programar seu dispositivo móvel e criar aquele aplicativo que você precisa, mas não encontrou nenhum que atendesse realmente às suas expectativas. Chega de falatório, nesse post vamos apresentar uma introdução à criação de aplicativos para dispositivos Android.

Primeiro, veremos como criar um projeto de aplicativo. Depois, como criar o layout da interface gráfica do aplicativo. Ao final, vamos aprender a controlar os elementos da interface gráfica e a fazer algo útil usando Java, que é a linguagem de programação que o Android utiliza.

1. Criação de um projeto de aplicativo no Eclipse;
2. Executando o aplicativo gerado no Eclipse;
3. Desenvolvendo a interface gráfica do aplicativo;
4. Desenvolvendo a lógica do aplicativo

.

1. Criação de um projeto de aplicativo no Eclipse

Existem algums programas especificamente criados para auxiliar na criação de aplicativos Android. O único programa com o qual tenho uma certa experiência é o Eclipse com SDK Android, o antigo software oficial para programação no robôzinho do Google.

Revisão 1.0.

Bem, quando escrevi este tutorial, o Eclipse ainda era o software recomendado pelo Google. Mas isso mudou. O novo software para construção de aplicativos é o Android Studio, disponível no site oficial de desenvolvimento para Android: Android Studio. Este tutorial foi escrito com base na configuração do ADT (Android Development Tools), que utiliza Eclipse + Android SDK. Embora seja possível seguir o tutorial utilizando o novo Android Studio, caso você tenha interesse em utilizar a mesma configuração usada no tutorial, disponibilizamos para download os antigos pacotes contendo ADT nos seguintes links para Windows, Linux e Mac. Então, usaremos o Eclipse para criar nosso primeiro aplicativo. Se você baixou o pacote ADT Bundle, saiba que ele vem com o Eclipse e o SDK Android já previamente configurados. Não é necessária instalação. Basta baixar o pacote, salvar no local desejado, descompactar e executar o programa, que se encontra dentro da pasta eclipse.

 

 

O Eclipse começará a carregar. Mas antes ele vai perguntar qual pasta você quer que seja seu workspace, ou seja, a pasta onde deverão ser salvos os seus projetos. Clique em Browse para escolher a pasta, clique em Ok para continuar.

Quando o Eclipse carregar pela primeira vez, vai mostrar uma janela de boas vindas, coisa e tal. Se desejar, pode seguir os links e descobrir o que eles te apresentam. Aqui, vamos ao que interessa…

Para criar um novo projeto de aplicativo, vá em File – > New – > Android Application Project.

Vai aparecer uma janela onde você poderá definir o nome do seu aplicativo, o nome do projeto e o pacote Java onde serão armazenados os arquivos de código do aplicativo, as classes em Java. Perceba que errei o nome do pacote aqui: escrevi “supercalculador” onde queria ter escrito “supercalculadora”. Ao terminar de escolher, clique em Next.

 

Agora, algumas configurações básicas do projeto. O Eclipse basicamente pergunta se você deseja que alguns arquivos sejam gerados automaticamente. Se você deixar as configurações selecionadas da mesma maneira que a figura, o Eclipse irá abrir uma janela para que você possa criar o ícone do seu aplicativo e também o ajudará a definir sua primeira Activity, que é uma classe em Java especialmente construída para manusear a interface gráfica de aplicativos Android. Também salvará os seus arquivos dentro de uma pasta com o nome do seu projeto no workspace definido inicialmente. Next.

 

Hora de definir o ícone do aplicativo. Existem três opções: uma figura salva em seu computador, um clipart do conjunto de ícones já fornecidos pelo Eclipse ou um ícone de texto. Você pode explorar à vontade as opções agora, definir cores, plano de fundo, escolher a foto do seu cachorro… Aqui, escolhi uma imagem aleatória de calculadora que encontrei na busca de imagens do Google. Ao final, Next.

 

 

 

Agora vamos definir como quremos que o aplicativo apareça quando iniciar. Será que deve aparecer em tela cheia (Fullscreen Activity)? Ou deixamos com que seja visível aquela barrinha de status do celular (Blank Activity)? Ou talvez queiramos uma interface com barra lateral (Master/Detail Flow). Para prosseguir, escolhi Blank Activity mesmo.

 

 

Enfim, a última tela de configuração do projeto. Agora você poderá escolher o nome da Activity inicial do aplicativo. Como eu disse, Activity é uma classe em Java capaz de manipular a interface gráfica do seu aplicativo Android. Dentro do código da Activity, um método será utilizado para carregar o layout de uma interface gráfica a partir de um arquivo XML, ligado à Activity. O arquivo XML contem as definições do layout da interface gráfica, ou seja, lá serão definidos caixas de texto, botões, imagens, vídeos, além de suas posições na tela e outras configurações de layout. Essa última tela permite que você nomeie sua Activity e o arquivo de layout. Para simplificar, nomearemos com um nome parecido com o do projeto. É claro, você poderia escolher qualquer outro nome, por exemplo, ornitorrinco.

 Finish him.

 

 

Se tudo tiver ocorrido bem até agora. Você terá o código de sua primeira Activity já configurado com os valores padrões. Também, na outra aba, haverá a sua primeira interface gráfica. Já vem até escrito “Hello world!” para poupar o trabalho.

 

 

.

2. Executando o aplicativo gerado no Eclipse

Para testar o aplicativo diretamente no seu dispositivo Android, primeiro você deve fazer algumas configurações no seu dispositivo. Isso ocorre porque o Android impõe restrições sobre os aplicativos que podem ser instalados no seu dispositivo, além de administrar o que passa pela conexão USB. Vá na seção de configurações do seu celular ou tablet. Procure a seção de Opções do Desenvolvedor (Developer options) e deixe marcada a opção USB debugging. Depois disso, conecte o Android ao computador usando o cabo USB.

Para fazer o upload e instalação do aplicativo no seu dispositivo, vá no Package Explorer do Eclipse e clique com o botão direito no projeto criado. No menu que surge, procure Run as -> Android Application. Agora espere um pouco enquanto o Eclipse busca o seu dispositivo. A tela a seguir vai aparecer. Basta selecionar o seu dispositivo e clicar em Ok.

Até agora, o Eclipse fez praticamente tudo. Chegou a hora de fazer alguma coisa útil.

.

3. Desenvolvendo a interface gráfica do aplicativo

Existem duas maneiras de criar a interface gráfica do seu aplicativo. A primeira maneira é simplesmente arrastando os componentes da interface (caixas de texto, botões, imagens, barras de carregamento) para dentro da tela. A segunda é escrevendo diretamente no arquivo XML correspondente à sua Activity. Ao final, o que realmente vai valer é o que está escrito no arquivo XML. A maneira gráfica de editar a interface apenas faz com que o Eclipse escreva automaticamente as alterações realizadas no arquivo XML. Para ver o arquivo, basta clica na aba “activity_super_calculadora.xml”, localizada na parte inferior esquerda da tela.

 

 

Nesse arquivo, vemos a definição de um elemento de texto TextView, aquele onde está escrito “Hello world!”. Vamos fazer algumas alterações aqui. Veja que o layout padrão que o Eclipse utiliza no início é o RelativeLayout. Isso faz com que as posições dos componentes da interface sejam definidas baseadas nas posições de outros componentes. Isso é meio chato no começo porque quando movemos um dos elementos, as posições dos outros também mudam e de forma mais ou menos imprevisível se você é apenas humano. Então vamos trocar por um TableLayout. Assim, o layout fica semelhante a uma matriz, onde podemos definir linhas e alocar os elementos em suas colunas. Simplesmente troque as palavras RelativeLayout por TableLayout, no começo e no fim do arquivo.

Agora vamos pensar um pouco. O que precisamos ter em uma calculadora? Temos que ter botões para que possamos inserir os valores. Temos que ter um local para ver o que estamos digitando. Temos que ter um local para ver o resultado da operação. Então façamos isso.

Primeiro vejamos a situação dos botões. Precisaremos dos 10 botões numéricos, mais 4 botões para as operações fundamentais (caso ningueḿ conheça: soma, subtração, multiplicação, divisão), 1 botão para mostrar o resultado da operação e 1 botão para limpar o que digitamos. Assim, serão 16 botões ao todo. Podemos organizá-los em uma matriz 4×4. Então teremos 4 linhas e 4 colunas, com os botões distribuídos assim como na figura:

 

 

Vamos adicionar a primeira linha de botões. Para isso, vá na paleta de componentes, selecione a aba layouts e a opção TableRow. Arraste a TableRow para dentro da tela, abaixo do componente de texto “Hello world!” (vamos aproveitá-lo mais tarde).

Agora, para adicionar um botão à linha, volte à paleta de componentes, selecione a aba Form Widgets. Aqui temos dois tipos de botões, o Button e o Small. Selecione a opção Button e arraste para dentro da linha TableRow que você acabou de criar. Com isso, teremos o primeiro botão. Repita esse processo até preencher a linha com quatro botões.

 

 

Não se preocupe se alguns botões parecerem que vão ficar for a da tela. Se isso acontecer, será resolvido depois. Achou fácil? Então repita o processo de criar uma nova linha e adicionar quatro botões a ela até que você tenha quatro linhas com quatro botões cada.

 

 

Finalmente, agora temos todos os botões que precisamos. Pena que todos possuem o mesmo nome e não podemos diferenciar qual faz o que. Para resolver isso, vamos alterar o texto de cada um dos botões. Voltemos ao arquivo XML da interface gráfica. Você verá que agora ele está cheio. Estarão definidas as quatro linhas e todos os botões. Todos arrumados em blocos contendo suas configurações. Para alterar o texto do botão, vá no bloco que o define e altere o valor de android:text. Troque “Button” pelo valor que desejar e veja o resultado. Para continuar com o projeto da Super Calculadora, teremos que renomear todos os botões. Boa sorte. Aqui, o Eclipse coloca umas marcações amarelas de aviso. Isso ocorre porque a maneira mais correta de inserir textos nos aplicativos é declará-los em um arquivo especial strings.xml antes de usá-los. No entanto, como já teremos bastante trabalho, não farei isso por enquanto. Não se preocupe em alterar o nome dos botões diretamente por enquanto, isso não vai transformar seu Android em um tijolo.

 

 

 

Se alguns botões não apareciam antes, você verá agora que todos eles aparecem na tela. Isso ocorre devido à configuração padrão dos botões, que define que o tamanho do botão deve ser apenas o suficiente para englobar o seu conteúdo de texto. Isso é definido na opções android:layout_width e android:layout_height dos botões, devido à opção “wrap_content”. Essa configuração pode ser alterada, mas não vamos mexer nisso agora.

Já que inserimos os botões na interface gráfica, agora vamos inserir os componentes de texto onde poderemos ver o que digitamos e o resultado da operação.

 

 

Vamos aproveitar que o Eclipse já criou um TextView. Usaremos esse TextView para ver a operação que estamos digitando. Vamos ao arquivo XML novamente para substituir o texto “Hello world!” por “Operação”. Depois, na parte do código, faremos com que a operação vá aparecendo conforme clicamos nos botões.

Agora é hora de adicionar um segundo TextView. Este será usado para mostrar o resultado da operação digitada. Vá na paleta de componentes, na aba Form Widgets e arraste um TextView para a região abaixo do primeiro TextView, mas acima dos botões. Depois disso, vamos trocar o texto inicial desse novo componente para “Resultado”. Isso pode ser feito no arquivo XML da interface gráfica, da mesma forma que para o texto “Operação”.

 

 

Agora vai um forte conselho em programação: Sempre nomeie os objetos, componentens, variáveis, qualquer coisa, com nomes significativos, ou seja, nomeie de tal forma que você lembre o que aquilo faz só lendo seu nome. Isso é muito útil para evitar confusão e agilizar na hora de escrever o código.

Por que estou dizendo isso? Você viu que quando adicionamos componentes à interface gráfica, o Eclipse cria a descrição desses componentes no arquivo XML, certo? Acontece que os identificadores criados pelo Eclipse são TextView1, TextView2, Button1, Button2, Button3, e assim por diante… Nada muito divertido ter que lembrar o que faz esse negócio Button3. E durante a escrita do código, será necessário usar esses identificadores e não confundir os botões. Então, o que faremos é identificar cada elemento de texto e cada botão. Para isso, vamos substituir o valor de android:id para cada um dos elementos, de acordo com a função deles no aplicativo. Por exemplo, TextView1 será “text_operacao”, TextView2 será “text_resultado”, Button4 será “button_soma”. Lembrando que você pode nomear da forma que quiser. Estou nomeando assim porque acho mais fácil de lembrar depois. Obs: esses identificadores não aparecerão na interface gráfica, mas serão usados dentro do código da Activity para que possamos controlar a interface.

Pronto! Com isso terminamos de adicionar todos os componentes necessários à interface gráfica da nossa Super Calculadora. Chegou a hora de programar em Java.

.

4. Desenvolvendo a lógica do aplicativo

Abra o arquivo SuperCalculadora.java, referente à Activity que criamos no início. Nesse arquivo, vamos escrever funções para controlar os elementos de texto e realizar ações quando um botão for clicado. Mas antes observe a linha 12 do arquivo.

setContentView(R.layout.activity_super_calculadora);

Essa linha define que o Android deve carregar o arquivo XML que acabamos de editar sempre que o aplicativo for iniciado. Isso implica que o layout que criamos será utilizado no aplicativo. Caso você queira trocar a interface gráfica utilizada, basta escrever outro arquivo XML e trocar o nome do layout que o método setContentView() carrega. Mas vamos utilizar aquele que estávamos criando. Deu tanto trabalho…

Para programar um aplicativo no Android é necessário entender um pouco de Java, uma linguagem de programação orientada a objeto. Caso nunca tenha ouvido falar em Java ou não saiba o que é orientação a objeto, sugiro algumas páginas que fornecem uma introdução legal à linguagem Java:

Tutorial de Java: Material introdutório sobre a linguagem Java feito por dois professores da Universidade Federal de São Carlos (UFSCar).

Java Progressivo: Site que fornece muitos tutoriais que utilizam Java. Aqui é possível iniciar do zero e progredir até Java mais avançado, como manipulação de arquivos e programação de interfaces gráficas.

Java – Tutorials Point: Uma coleção muito rica de tutoriais sobre Java que vai do básico (objetos, classes, estruturas condicionais, loops) até Java avançado (conexões em rede, envio automático de email, etc). Ok, esse site é em inglês.

Seguindo em frente. Agora que você já tem pelo menos uma ideia sobre o que são classes, objetos e métodos, poderemos utilizar isso para controlar nossa Super Calculadora. O que teremos de fazer é capturar o momento em que alguém clica em um botão e executar uma ação sempre que ele for clicado. O que faremos é criar um método para cada botão e fazer com que ele execute quando o botão relacionado a ele for clicado. Vamos a um exemplo. O que deve acontecer quando clicarmos o botão “1”? O número 1 deve aparecer no elemento de texto text_operacao, correto? Para fazer isso, vamos adicionar um método ao final da classe SuperCalculadora. Veja a figura a seguir:

 

 

Aqui, definimos um método chamado “clickOne”. A entrada desse método é um objeto da classe View, que apenas usaremos implicitamente. Caso o Eclipse faça uma marcação vermelha, adicione a seguinte linha lá em cima do arquivo SuperCalculadora.java, junto com as outras importações.

import android.view.View;

 

Agora, vá ao arquivo XML do layout e localize o elemento “button_1”. Adicione essa linha ao final da definição do botão, como na figura.

 

android:onClick=“clickOne”

 

 

Isso fará com que seu aplicativo execute o método clickOne() sempre que o botão “button_1” for clicado. Simples, não? Agora vamos definir o código executado quando o botão é clicado.

Sabemos que quando o botão “button_1” for clicado, o elemento de texto “text_operacao” deve ser atualizado e mostrar o número 1. Para controlar um elemento de texto TextView, é necessário criar um objeto da classe TextView e utilizar seus métodos para controlar o elemento de texto. Para isso, veja a figura abaixo.

 

A linha adicionada acima do método onCreate() declara um objeto TextView. O método findViewById() é responsável por encontrar automaticamente o elemento que usamos como entrada. Já as linhas adicionadas dentro do método onCreate() carrega o objeto com um valor relacionado ao elemento de texto “text_operacao” e escreve uma string vazia, ou seja, limpa o texto contido em “text_operacao”. Agora, vá ao método clickOne() e adicione a linha

 

textOperacao.append(“1”);

 

Isso fará com que uma String representando o número 1 seja colocada ao final do texto atual em “text_operacao”. Pronto, agora podemos repetir o mesmo processo para todos os botões que atualizam o elemento de texto “text_operacao”. Isto, é todos os botões, exceto o “C” e o “=”. Vá lá trabalhar e faça com que os botões adicionem seus respectivos textos. Bom trabalho.

Ao final desse trabalho, os códigos do layout XML e da classe SuperCalculadora devem estar mais ou menos assim:

 

 

Faltam os botões de limpar os elementos de texto, “C”, e o de mostrar o resultada da operação “=”. Para limpar o texto, acredito que você já saiba fazer. Basta fazer com que seja escrita uma string vazia usando o método textOperacao.setText(). Então crie o método clickC(), declare no arquivo XML e torne o botão “C” funcional. Faça isso da mesma forma que os outros botões. Se você quiser que o botão “C” limpe também o texto de resultado, crie um objeto textResultado e faça com que ele seja limpo tanto no início do programa, quanto quando o botão “C” for clicado. A ideia é fazer a mesma coisa que fizemos para o texto “text_operacao”. Criar o objeto, instanciá-lo com o método findViewById() e limpar quando for necessário.

 

 

 

Finalmente, falta apenas uma coisa para terminar o modo básico da Super Calculadora. Temos que fazer com que ela calcule! Para isso devemos criar o método clickResult() e fazer com que ele seja executado quando o botão “=” for clicado. Você já saber fazer isso. Vá lá.

 

 

Agora como faremos para exibir o resultado? Essa é a parte mais difícil da calculadora. Isso porque ela deve ler o que está escrito no texto de operação e executar. Em calculadoras mais completas existem parenteses, pontos, diversas operações simultaneas… e fazer com que a calculadora compreenda a operação como um todo e realize os cálculos na sequência correta é algo um pouco mais complicado. Por isso, aqui faremos um versão bem simples de uma calculadora, com apenas uma operação de cada vez. Como o objetivo aqui é aprender a criar um aplicativo para Android, essa simplificação não é problema.

Assim, nossa calculadora realizará apenas operações do tipo “17+209182”, “18×665”, “466/18”.

 

Vamos para a parte do código do método clickResult(). Primeiramente, leremos o texto em “text_operacao” e armazenaremos em uma String. Depois, teremos que separar os componentes da operação. Separaremos o primeiro número, a operação e o segundo número. Para facilita nosso trabalho, vamos alterar um detalhe nos métodos que adicionam os textos “+”, “-”, “x” e “/”. Vamos trocar por “ + ”, “ – ”, “ x ” e “ / ”, respectivamente, ou seja, colocar espaços vazios em volta do texto que aparecerá. Isso nos ajudará a separar os componentes da operação no método clickResult(), pois saberemos que os componentes da operação estarão separados por espaços.

Usamos essa característica para separar os componentes usando o método split(). De posse dos componentes, podemos assinalá-los às variáveis numero1, sinal e numero2.

Ao fim, devemos checar qual operação deve ser realizada. Usamos uma sequência de if para isso. Ou seja, se o sinal for de soma, mostramos no texto do resultado a soma. Se o sinal for de multiplicação, mostramos a multiplicação, e assim por diante.

O código da divisão é o que está mais diferente. Lá, adicionamos um teste para verificar se a divisão entre numero1 e numero2 é inteira ou não. Se for inteira, mostramos o número sem casas decimais. Caso contrário, mostramos o resultado com duas casas de decimais de precisão. Caso deseje alterar o número de casas decimais mostradas, basta trocar o número “2” que está na linha

textResultado.setText( String.format(“%.2f”, (numero1 / numero2)) );

 

Agora só mais um detalhe. Como nossa calculadora ainda é muito fuleragem, devemos impedir que tente resolver operações que ela não sabe. Nesse caso, operações múltiplas como “numero1 + numero2 – numero3”. Assim, vamos adicionar uma condição que vai contar o número de componentes e só vai mostrar o resultado se houver 3 componentes. Caso contrário, mostrará um mensagem de “Operação não reconhecida”.

 

Veja como deve ficar a Super Calculadora se você tiver seguido o mesmo rumo que nós do Dragão:

 

 

Outro detalhe importante é que o layout que criamos foi feito para uma tela de 3.7 polegadas. Isso significa que se instalarmos o aplicativo em um celular com uma tela maior, ficará sobrando muito espaço vazio, mas a funcionalidade continuará a mesma. Os aplicativos feitos e disponibilizados na Google Play geralmente contém vários layouts, um para cada tamanho de tela.

Divirta-se encontrando os bugs da Super Calculadora. Por exemplo, tente digitar um número muito grande. Vai dar crash. Isso ocorre porque os números que as variáveis do tipo double podem armazenar é limitado a 64 bits. Poderíamos resolver isso, impedir que o aplicativo dê crash e mostrar uma mensagem de erro quando esse tipo de coisa acontecer. Aliás, com um pouco de criatividade e paciência poderíamos implementar várias ideias e tornar nossa calculadora realmente super. No entanto, ficaremos por aqui. O objetivo aqui foi apenas mostrar como pode ser fácil e até divertido criar um aplicativo e depois usá-lo sabendo que você mesmo o fez. Caso queira explorar o Eclipse e tentar adicionar mais funcionalidades à Super Calculadora, sinta-se à vontade; o mundo é dos que o exploram. Se esbarrar em alguma mensagem de erro monstruosa no processo, lembre-se que pode entrar em contato conosco; basta pedir ajuda nos comentários ou qualquer outra forma de comunicação. O Dragão vai deixar todo o projeto da SuperCalculadora junto com a montanha de ouro. Você pode fazer o download do projeto ou acessá-lo no Github a partir dos links abaixo.

SuperCalculadora

SuperCalculadora no Github

E você, tem alguma ideia para um aplicativo? Fale com o pessoal do Dragão o/