Aula 07 Projeto App Soma

Prévia do material em texto

Página 1 
 
 
 
Análise e Desenvolvimento de Sistemas 
Programação para Dispositivos Móveis 
Prof. Milton Escóssia 
 
Aula-07_Projeto App Soma 
 
Criando uma app Android para somar 2 números. 
 
Usando Widgets 
Toda aplicação Android é constituída por telas que contém widgets por onde o usuário da 
aplicação pode interagir. Estes são componentes gráficos que constituem uma aplicação Android. 
Abaixo têm-se alguns widgets básicos da plataforma android para o desenvolvimento das 
aplicações: 
TextView: funciona como se fosse uma Label ("rotulo") utilizado para mostrar alguma 
informação, mensagem e etc. 
EditText: funciona como se fosse caixa de entrada de dados onde pode-se digitar dados 
do teclado. 
Button: é do que um Botão de comando, que quando clicado dispara uma ação, um 
evento. 
 
Desenvolvendo a app que soma números 
Com os componentes apresentados até aqui é possível desenvolver uma aplicação simples 
composta pelos widgets apresentados acima. 
 
Parte 1 – Criando a estrutura do projeto AppSoma 
Execute a aplicação Android Studio. 
Crie um novo projeto Android : 
Na tela inicial acesse a opção 
 
 
 
 
 
Página 2 
 
 
 
 
ou no menu principal do Android Studio 
 
 
Isso fará com que o Android Studio execute o wizard, composto por 4 telas, para criação do 
projeto. 
Na primeira tela (Figura 1) preencha com os seguintes dados: 
 
Figura 1: 1ª Tela do wizard para criação de um projeto Android. 
Na primeira tela o wizard solicita o preenchimento dos dados do nome da aplicação (que será o 
mesmo exibido no menu principal do Android no dispositivo, o domínio da aplicação (URL 
invertida usada para especificar o ID da aplicação). O nome do domínio juntamente com o nome 
da aplicação servirão de base para construção do pacote base da aplicação onde os códigos 
JAVA serão encontrados. 
Após preencher os dados da figura 1 pressione o botão “NEXT”. 
O wizard exibirá a segunda tela do wizard (Figura 2). 
 
Página 3 
 
 
 
Figura 2: 2ª Tela do wizard para criação de um projeto Android. 
Essa tela solicitará que você selecione o tipo do dispositivo Android onde sua aplicação será 
executada, bem como qual o nível da API mínima suportada para executar sua aplicação Android. 
Deixe marcado o item: “Phone and Tablet” com a API 18 selecionada, conforme exibido na 
figura 2. Em seguida pressione o botão “NEXT”. 
Na terceira tela, o wizard solicitará que você selecione um template de layout do Android. 
Selecione o template “Empty Activity”, conforme a figura 3 abaixo, e em seguida pressione o 
botão “NEXT”. 
 
Página 4 
 
 
 
Figura 3: 3ª Tela do wizard para criação de um projeto Android. 
 
A quarta e última tela do wizard solicitará o preenchimento dos dados dos arquivos Java (activity) 
e do Layout (xml), conforme a figura 4 abaixo: 
 
 
Página 5 
 
 
Figura 4: 4ª Tela do wizard para criação de um projeto Android. 
 
Ao final pressione o botão “FINISH”. O AndroidStudio irá criar a estrutura do projeto, conforme a 
figura 5 abaixo, para que se possa implementar a solução. 
 
 
Figura 6: Estrutura do projeto AppSoma. 
 
 
Parte 2 – Construído a Interface Gráfico do Usuário (GUI) da AppSoma. 
Após criar o projeto, edite o arquivo de layout "activity_soma.xml". Esse arquivo descreve a 
aparência da tela (UI). 
O Android Studio fornece uma ferramenta para edição do layout da tela, composto por um editor 
gráfico e um editor XML (abas inferiores). 
Esta ferramenta será utilizada na construção da aplicação AppSoma para construção da GUI de 
forma rápida. 
Essa aplicação permitirá receber dois números e ao final irá exibir a soma deles conforme 
sugestão de tela na figura 7 abaixo: 
 
Página 6 
 
 
 
Figura 7: Sugestão de tela da aplicação AppSoma. 
 
Clique 2 vezes sobre o arquivo "activity_soma.xml" do projeto para que abra esse arquivo no 
editor gráfico. 
Ao abrir o editor gráfico, clique na aba inferior chamada “text” para exibir o modo texto do arquivo 
de layout. Substitua o gerenciador de Layout (ConstraintLayout, ou qualquer outro que seja 
exibido) pelo LinearLayout. Inclua a propriedade “orientation” para o valor “vertical”. Por fim 
remova as propriedades não pertencentes ao LinearLayout, conforme a figura 8 abaixo 
 
Página 7 
 
 
 
Figura 8: o arquivo "activity_soma.xml" configurado para LinearLayout. 
 
O layout inicialmente mostra a frase "Hello World !" no widget TextView. 
Clique sobre o texto para selecioná-lo para modificar seu conteúdo. 
A guia "Attribbutes", que indica a propriedade de um componente em edição, irá exibir uma série 
de valores nas propriedade daquele componente. 
Procure uma propriedade chamada "Text". Essa propriedade indica o conteúdo do componente 
TextView, que neste caso é a frase "Hello World !". 
Em seguida substitua o valor corrente pelo texto "Número 1:" e depois pressione a tecla ENTER. 
Como resultado o texto exibido no layout foi modificado para o novo texto. 
 
Após alterar o texto do widget TextView, deve-se inserir um novo widget, um EditText. 
Esse widget funciona como um campo de entrada de dados, utilizado para preenchimento de 
valores numéricos ou alfanuméricos. 
Para adicionar esse componente deve-se acessar a paleta de componentes (disposta à esquerda 
da área de edição), onde ficam os componentes VIEW que constituem uma aplicação Android, 
em seguida na seção "Text Fields" clique sobre o widget EditText do tipo Numérico (figura 9) e 
arraste-o até a área de edição que representa a tela do dispositivo. 
 
Página 8 
 
 
 
Figura 9: Componente EditText do tipo Number, da Paleta de componentes. 
 
Na área de edição da tela, clique sobre o widget EditText adicionado e modifique duas 
propriedades desse componente: 
Encontre a propriedade "id" desse componente EditText e modifique-o inserindo o valor 
"@+id/edNumero1". 
Essa propriedade serve para dar um nome (identificador) ao componente. Todo componente que 
necessita ser manipulado no código Java (Activity) necessita de um ID para ser acessado. 
O nome (identificador) de um widget deve estar nesse formato: "@+id/<nome>" 
O valor apresentado na propriedade ID é : "@+id/edNumero1". 
É como se "id" representasse um grupo e "edNumero1" representasse o nome do componente. 
Depois disso, acesse a propriedade "Layout width". Essa propriedade define a largura de um 
componente. Modifique seu valor para "match_parent". Esse valor indica que o componente irá 
ocupar toda a largura da tela do dispositivo. 
Na sequencia do exercício deve-se inserir mais dois widgets: um TextView e um EditText. 
Na seção "Form Widgets", clique sobre o widget “TextView “ e arraste-o para a área de desenho. 
Este é o segundo TextView e deve-se modificar sua propriedade "Text" para conter o texto: 
"Número 2: ". 
 
Página 9 
 
 
Na seção "Text Fields", clique sobre o widget “EditText” e arraste-o para a área de desenho. Este 
é o segundo EditText e deve-se repetir os mesmos procedimentos realizados no primeiro 
EditText. A diferença estará na propriedade "id" desse widget que assumirá o valor 
"@+id/edNumero2". 
Agora deve-se inserir o widget Button na aplicação. Na paleta de componentes, na seção "Form 
Widgets", clique sobre o Button e o arraste para a tela do dispositivo. Em seguida modifique as 
seguintes propriedades os valores segundo a tabela 1 abaixo: 
Propriedades Valor 
Id @+id/btSomar 
Layout_width match_parent 
Text Somar 
Tabela 1: Tabela de propriedades do botão Somar. 
 
Após finalizar as modificações acima solicitadas no arquivo de layout, salve-o (CTRL + S). 
Isso é necessário paraque a classe R (classe que representa dos recurso do projeto) atualize-se. 
Isso permitirá que ao codificar o comportamento da tela na classe Activity se possa acessar esses 
recursos. 
 
Parte 3 - Codificando o comportamento da AppSoma. 
Edite o arquivo “SomaActivity.java”. Esse arquivo representa uma Activity (classe do Android 
que representa uma tela. Ela deve conter o código de determina o comportamento da tela). 
Através da classe java "SomaActivity", via código Java, pode-se acessar os componentes 
adicionados no arquivo de layout. 
A classe SomaActivity é uma classe JAVA e segue o seguinte padrão estrutural (figura 10): 
 
Figura 10: Estrutura básica de uma classe Java. 
 
Para fazer uso das classes Java do Android será necessário importá-las. Após a linha: 
 Página 
10 
 
 
 
Digite: 
 
Após a declaração da classe e antes da linha que contém “@Override” digite: 
 
Os widgets podem ser declarados no código Java. Se no código XML existir um widget do tipo 
EditText, para acessar esse componente pelo código Java, será necessário fazer uso da classe 
EditText. Cada widget no layout possui o seu respectivo em classe Java. Logo, se existir um 
widget Button, para acessá-lo via código Java deve-se fazer uso da classe Button e assim por 
diante. 
Após a linha: 
 
Digite as seguintes linhas de código: 
 
No código acima, obtém-se a referência ao primeiro EditText através do método findViewById( ) 
com o parâmetro “R.id.edNumero1”. 
Lembre-se que o nome (id) atribuído ao primeiro EditText no layout se chama 
“@+id/edNumero1”. Para se obter a referência ao segundo EditText, cujo nome(id) é 
“@+id/edNumero2”, através do método findViewById( ), passou-se o parâmetro 
“R.id.edNumero2”. 
A referência a esses componentes está sendo realizado através do uso da classe R. Essa classe 
funciona como uma interface entre o código Java e o arquivo de layout (xml). 
Deve-se repetir o procedimento anterior para o widget Button. 
Para que seja possível responder a eventos de toque (tap) será necessário adicionar um evento 
de "Click" ao widget Button da tela. Quando se clicar no botão "Somar" a aplicação deverá exibir 
o resultado da soma dos números informados. 
Logo após a linha: 
 
 Página 
11 
 
 
Digite: 
 
Toda vez que se clicar sobre o botão "Somar", ele irá obter o conteúdo dos componentes 
EditText, em seguida efetuará o cálculo da soma e ao final abrirá uma janela de diálogo para 
exibir o resultado da soma. 
O método setOnClickListener( ) serve para definir um evento de Click a um componente. Como 
parâmetro, deve-se criar uma instância de View.OnClickListener para implementar o método 
chamado "onClick( )". Esse método será disparado toda vez que o botão "Somar" for clicado. 
A linha: 
 
cria uma variável chamada "num1" e atribui a ela o valor que está contido em edNumero1. 
O método parseDouble( ) da classe Double é utilizada aqui pois conteúdo do componente é uma 
String. Observe que é feito a chamada ao método "getText( )" de edNumero1 para retornar seu 
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 essa razão se fez a chamada ao método 
"toString( )" do "getText( )" para que retorne uma string. 
O código abaixo: 
 
 
é responsável por exibir a soma na tela , através da classe AlertDialog.Builder. Essa classe é 
responsável por criar uma caixa de diálogo e exibi-la. 
Salve seu código. Isso irá compilar a aplicação. Antes de executar a aplicação será necessário 
iniciar um dispositivo móvel virtual (emulador) através do AVD Manager. 
 Página 
12 
 
 
Após executar o emulador selecione o projeto AppSoma. 
No menu principal, selecione a opção Run > Run ‘App’ 
 
Ou na barra de atalhos, clique no ícone 
 
Com o conhecimento obtido até agora já se tem a capacidade para criar uma aplicação básica em 
Android.