1

Construindo Layouts Avançados: Desenvolvendo uma

Calculadora em Android

Imagem:

Descrição da Imagem: Layouts com mais de um componente por linha, eventos

de click nos botões, criação de menus e manipulação de eventos nos menus.
Esteja preparado, iremos desenvolver nosso segundo aplicativo neste capítulo.
 2

Linha de Apoio ou Lead: Esteja atento a este capítulo, iremos aprender a

desenvolver aplicativos onde a interface gráfica possua mais de um
componente por linha, criar e manipular eventos de menus, criar métodos para
as quatro operações básicas e chamar nos locais corretos. Aproveite e tire
todas as dúvidas, com esses conhecimentos você será capaz de desenvolver
praticamente qualquer interface gráfica em XML.

Neste capítulo iremos desenvolver nosso segundo aplicativo,

aprenderemos a desenvolver menus no Android e manipular os eventos de
click nos menus, trabalhar com interfaces gráficas mais elaboradas, onde
teremos mais de um componente por linha, trabalhar com métodos separados
e chamá-los nos lugares corretos, aprimorar a lógica, os conceitos de Android,
ir se familiarizando com a estrutura e diretórios do Android Studio. Aproveite e
desenvolva o aplicativo conforme for lendo este capítulo, em caso de dúvida,
pergunte, pois, ao entender os conceitos e conteúdos apresentados neste
capítulo você será capaz de desenvolver praticamente qualquer interface
gráfica em XML utilizando a plataforma Android.

4.1 Desenvolvendo a Interface Gráfica Utilizando a Linguagem

XML

Para iniciar, criaremos um projeto novo, vá em File, depois em New e

por fim em New Project, irá abrir uma janela conforme mostrada na figura 4.1.
Coloque o nome do aplicativo para Calculadora e deixe para salvar no diretório
padrão chamado AndroidStudioProjects, caso queira dar outro nome para o
aplicativo, outro domínio ou salvar em outro local, fique à vontade para alterar
esses dados.
 3

Figura 4.1: Definição do nome, domínio e local onde o aplicativo será salvo.

Ao clicar em Next, outra janela será aberta para selecionar a API e a

versão mínima do sistema operacional Android que o aplicativo deve suportar,
selecione a API 14 e o Android 4.0 como versões mínimas a serem suportadas.
Ao clicar em Next, a janela para escolha de uma Activity será mostrada,
selecione o modelo de Activity chamada “Empty Activity”.

Ao clicar em Next, abrirá uma janela conforme mostrada na figura 4.2,

nela é preciso determinar o nome da classe Java para a Activity e o nome do
arquivo XML para a interface gráfica da Activity, colocamos o nome
Calculadora para a classe Java e activity_calculadora para o arquivo XML.
Caso queira colocar outro nome para a classe Java ou para o arquivo XML,
fique à vontade para colocar o nome que desejar.
 4

Figura 4.2: Nome da classe e do arquivo XML da activity do aplicativo.

Clique em Finish e o projeto no Android Studio será criado.

Por padrão, se o usuário está com o smartphone na vertical, a Activity é

mostrada na vertical, se o smartphone está na horizontal, a Activity é mostrada
na horizontal, se você não quiser que seu aplicativo vire a orientação conforme
o usuário virar o smartphone, e quiser que o aplicativo fique fixo na posição
vertical configure no arquivo AndroidManifest a orientação portrait, se quiser
que a tela fique fixo na horizontal, no arquivo AndroidManifest, configure a
orientação landscape para a Activity.

Para acessar o arquivo AndroidManifest, acesse o diretório manifests,

conforme pode ser visto na figura 4.3.
 5

Figura 4.3: Localização dentro do projeto do arquivo AndroidManifest.

Dentro do arquivo AndroidManifest, dentro da declaração da activity,

conforme pode ser visto na figura 4.4, na linha 13 foi configurado para que a
activity fique sempre na orientação portrait, para isso foi inserido a linha
android:screenOrientation=“portrait”.

Figura 4.4: Código do arquivo AndroidManifest.

 6

Agora iremos configurar os textos presentes na interface gráfica do

aplicativo, para isso precisamos acessar o arquivo de strings dentro do
aplicativo, vá no diretório res, dentro do diretório res, acesse o diretório values
e na sequência verá o arquivo strings.xml como pode ser visto na figura 4.5.

Figura 4.5: Localização dentro do projeto do arquivo de strings.

Lembrando que para cada string que é mostrada na tela é preciso criar
um nome para esse texto, o nome que está em string name é o nome que é
referenciado no código, aquilo que está na sequência, entre as tags, é o texto
que é mostrado na interface gráfica da Activity quando o nome da string é
referenciado no código.

Figura 4.6: Código do arquivo de strings.

 7

Agora iremos criar o código do menu do aplicativo, para isso crie o

diretório menu dentro de res. Após, dentro do diretório menu crie o arquivo
calculadora.xml, conforme pode ser visto na figura 4.7.

Figura 4.7: Definição do nome do arquivo xml para criar o menu do aplicativo.

Para cada item de menu configure um nome para o item (id), a ordem
que o item irá ser mostrado no menu (orderInCategory) e o texto que será
mostrado no item de menu (title). Confira o código do menu na figura 4.8.
 8

Figura 4.8: Código do menu do aplicativo.

Agora iremos montar a interface gráfica da activity, para encontrar o

arquivo XML para programarmos a interface gráfica entre no diretório res, após
entre no diretório layout, lá estará o arquivo XML da activity, conforme pode ser
visto na figura 4.9.

Figura 4.9: Localização do arquivo xml para elaborar a interface gráfica.

 9

Para implementarmos a interface gráfica, iniciaremos criando um

LinearLayout, dentro do LinearLayout é realizado a configuração básica da
interface gráfica. É preciso configurar para que a tela ocupe toda a largura e a
altura do smartphone (layout_width e layout_height com match_parent). É
preciso configurar seis divisões, seis linhas no LinearLayout, para isso utilize a
propriedade layout_weight para 6, a orientação (orientation) da tela para
vertical, é preciso também inserir uma margem inferior, esquerda, direita e topo
(paddingBottom, paddingLeft, paddingRight e paddingTop, respectivamente),
foi inserido uma margem de 16dp.

Dentro do LinearLayout é programado cada uma das seis linhas da

interface gráfica. Na primeira linha é preciso inserir um TextView para instruir o
usuário a digitar o valor 1 e um EditText, que é um campo de texto para o
usuário digitar um valor, como são dois componentes presentes em uma linha,
nós precisamos de um outro LinearLayout para inserir dentro o TextView e o
EditText. Esse é a grande mágica para fazermos o layout da calculadora, criar
um LinearLayout que está relacionado a tela inteira, dentro do LinearLayout
geral, é preciso programar cada linha da tela, se na linha tiver mais de um
componente, é preciso inserir um LinearLayout e dentro desse LinearLayout
inserir os componentes, se na linha tiver apenas um componente, pode ser
inserido o componente direto, sem a necessidade de criar um novo
LinearLayout.

No LinearLayout é preciso configurar para que a linha ocupe todo a

largura (layout_width para match_parent) e a altura para somente o necessário
(layout_height para wrap_content), ocupa uma das divisões, uma das linhas
das seis (layout_weight para 1) e orientação (orientation) para horizontal, pois
iremos inserir dois elementos um do lado do outro, portanto, sentido horizontal.

Dentro do LinearLayout iremos inserir o componente TextView. Para o

TextView é preciso inserir um id, que é um nome para o TextView, iremos
chamar de txtValor1, na largura e na altura iremos configurar para ocupar
somente o espaço necessário (layout_width e layout_height para
wrap_content), o texto (text) estará no arquivo de strings com o nome de
 10

valor1, a cor do texto (textColor) para preta e o tamanho do texto (textSize)

para 30sp.

Ainda dentro do LinearLayout da primeira linha da interface gráfica é

preciso inserir o EditText. Para o EditText é preciso definir um nome para o
componente (id), definimos o nome de edtValor1, definimos a largura para todo
o espaço, neste caso, todo o espaço que sobrou (layout_width para
match_parent), a altura, para o espaço que for necessário (layout_height para
wrap_content), para habilitar o tipo de teclado correto para o tipo de dados que
deve ser digitado foi utilizado a propriedade inputType para numberDecimal, ou
seja, o campo EditText aceitará números reais, foi configurado a cor do texto
(textColor) para preta e o tamanho do texto (textSize) para 30sp.

Nas demais linhas da interface gráfica segue a mesma ideia. Na

segunda linha é preciso inserir um LinearLayout e dentro do LinearLayout
inserir o TextView e o EditText para o valor 2. Na terceira linha da interface
gráfica é preciso inserir um LinearLayout e dentro dele o botão btnSoma e o
botão btnSubtracao. Na quarta linha é inserido um LinearLayout e dentro dele o
botão btnMultiplicacao e o botão btnDivisao. Na quinta linha não necessitamos
de um LinearLayout pois na quinta linha é preciso inserir apenas um
componente, o txtResultado, para mostrar o resultado do cálculo. Na sexta
linha é preciso inserir o botão btnLimpar.

Nas figuras 4.10 e 4.11 é apresentado o código completo da interface

gráfica.
 11

Figura 4.10: Primeira parte do código XML da interface gráfica do aplicativo.

 12

Figura 4.11: Segunda parte do código XML da interface gráfica do aplicativo.

 13

A interface gráfica do aplicativo está pronta, porém, o aplicativo ainda

não está pronto, se testarmos agora, ao clicar nos botões nenhuma ação irá
ocorrer, agora iremos manipular os eventos de click nos botões e nos itens de
menu na classe Java, que manipula a activity.

4.2 Manipulando os Eventos de Click dos Botões e dos Itens de

Menu

O primeiro passo é declarar todas as variáveis necessárias. É preciso

declarar os objetos edtValor1 e edtValor2 da classe EditText, para conseguir
obter aquilo que o usuário digitou na interface gráfica, para fazer o cálculo. É
preciso declarar um objeto txtResultado da classe TextView para mostrar o
resultado do cálculo na Activity. É preciso declarar os objetos btnSoma,
btnSubtracao, btnMultiplicacao, btnDivisao e btnLimpar da classe Button para
poder manipular os eventos de click nos botões. Além de ser necessário as
variáveis valor1, valor2 e resultado para fazer o cálculo, conforme pode ser
visto na figura 4.12.

Figura 4.12: Declaração das variáveis e objetos necessários no código Java da

Activity.

O próximo passo é mapear os objetos Java, ou seja, relacionar um

determinado objeto Java, qual objeto ele representa na interface gráfica do
arquivo XML, como pode ser visto na figura 4.13. Por exemplo, o EditText
edtValor1 é também o componente edtValor1 no arquivo XML da Activity, o
botão btnSoma é também o componente btnSoma no arquivo XML. Para cada
objeto Java é preciso relacionar com o seu componente correspondente no
arquivo XML, caso você se esqueça de fazer em um dos objetos Java o
relacionamento, um erro será gerado.
 14

Figura 4.13: Mapeando os objetos Java e o componente XML relacionado a cada

objeto.

Neste aplicativo como temos os eventos de click no menu e de click nos

botões, para os eventos de click nos botões btnSoma, btnSubtracao,
btnMultiplicacao, btnDivisao e btnLimpar, irá chamar os métodos somar(),
subtrair(), multiplicar(), dividir() e limpar, respectivamente, como pode ser visto
na figura 4.14. Assim, evita repetir o mesmo código nos botões e no menu e
centraliza o código nos métodos de cada operação matemática.
 15

Figura 4.14: Código Java correspondente ao evento de click nos botões.

Agora iremos implementar os eventos de click no menu, é um pouco

diferente dos eventos de click nos botões, conforme pode ser visto na figura
4.15. O primeiro passo é preciso ter o método onCreateOptionsMenu para
indicar em qual arquivo XML está o código para montar a interface gráfica do
menu. Também é preciso criar o método onOptionsItemSelected, onde deve
ser testado qual item do menu foi clicado e chamar o método correto.
 16

Figura 4.15: Código Java correspondente ao evento de click nos itens de menu.

O próximo passo é criar os métodos para as quatro operações

matemáticas: para somar, subtrair, multiplicar e dividir. Na figura 4.16 é
mostrado o código do método somar(), para os demais métodos das outras
operações matemáticas o código é o mesmo, o único detalhe que deve ser
alterado é o sinal da operação matemática. O código começa fazendo um
tratamento de exceção caso o valor 1 seja inválido, pois pode ser que o usuário
não digite nenhum dado e clique direto em um botão das quatro operações
matemáticas, se não tratarmos essa exceção e o usuário clicar direto em uma
operação matemática, o aplicativo daria um erro e seria abortado. Dentro do try
a variável valor1 recebe a conversão do texto digitado no campo edtValor1
para um valor float. Da mesma forma é preciso tratar a exceção para o valor 2
e converter o texto digitado em float e inserir na variável valor2. Por fim, é
possível fazer o cálculo e mostrar o resultado no campo txtResultado. Foi
utilizado Toast no tratamento de exceção, ele nada mais é do que uma
mensagem que fica por alguns segundos na tela e depois some.
 17

Figura 4.16: Código do método somar().

Para implementar o código do método limpar(), precisamos apagar o

texto presente nos campos edtValor1 e edtValor2, no campo txtResultado
pode ser inserido apenas o texto “Resultado: ” e o foco do cursor deve ser
colocado no campo edtValor1 para que o usuário já possa facilmente digitar um
novo dado no campo edtValor1.

Figura 4.17: Código do método limpar().

O aplicativo está pronto, não se esqueça de testá-lo em seu smartphone

ou no emulador do Android Studio para ver se o aplicativo está funcionando
conforme o esperado.

4.3 Síntese
 18

Neste capítulo desenvolvemos nosso segundo aplicativo para a

plataforma Android, acessamos o arquivo AndroidManifest, criamos e
manipulamos os eventos de click nos itens de menu, desenvolvemos uma
interface gráfica um pouco mais complexa que o aplicativo anterior, com mais
de um componente por linha na interface gráfica, manipulamos eventos de click
nos botões, criamos métodos separados para as operações matemáticas e
chamamos nos locais corretos. Ao entender esses conceitos e conteúdos, você
praticamente conseguirá desenvolver qualquer interface gráfica para a
plataforma Android, portanto, leia, releia, tente desenvolver este aplicativo, tire
todas as suas dúvidas.

Exercícios

1. Como é possível fazer para conseguir inserir mais de um elemento gráfico

na mesma linha em uma activity para um aplicativo na plataforma Android?
Explique com suas palavras.

2. Porque foi utilizado tratamento de exceção no código referente ao evento de

click dos botões das quatro operações básicas no código do aplicativo
desenvolvido no e-book?

3. Pesquise sobre o arquivo com extensão “apk”. O que é? Para que serve?
Explique com suas palavras.

4. Coloque uma imagem de fundo no aplicativo calculadora desenvolvido no e-

book.

5. Altere o código do aplicativo desenvolvido no e-book, faça com que o

aplicativo possua três valores, ao clicar em uma das operações matemáticas
realize a operação com os três valores, por exemplo, some o primeiro valor
com o segundo e some o resultado com o terceiro, caso a operação
matemática para somar tenha sido clicada.