Desenvolvendo aplicativos para Android II

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

@Override

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:

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:

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:

OBS: Provavelmente durante a execução da aplicação ao entrar com umnú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. 

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

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:

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:

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

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

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:

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:

Depois de escrever o código acima, salve o arquivo e em seguida teste a aplicação. Veja o resultado na figura seguinte:

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

Seguido os passos acima,agora adicione os seguintes componentes na sequência:

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

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

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

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 executar nossa aplicação? O resultado você confere na figura seguinte:

Agora iremos criar um novo aplicativo que vai consistir num 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, 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 

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

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

EditText (Number Decimal)

TextView

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

Bom, agora vamos adicionar um componente, ou melhor, uma estrutura que será responsável por agrupar as RadioButtons dentro dela, que se chama RadioGroup.O RadioGroup já 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:

Com o RadioGroup selecionado, modifique as propriedades abaixo:

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:

Agora modifique as propriedades das RadioButons de acordo com as indicações abaixo:

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.

Depois de colocar o Button, modifique as propriedades abaixo:

Depois de inserir todos os componentes citados, o layout da aplicação deve ficar de acordo com a figura abaixo:

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:

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:

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

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 dos outros reajustes. Agora vamos executar a nossa aplicação. O resultado você vê na figura seguinte:

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:

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.

Agora vamos visualizar a estrutura XML do arquivo que forma a tela da aplicação acima:

Agora vamos no arquivo “ListaContatosActivity.java” para colocar o seguinte código abaixo (lembre-se antes de salvar o arquivo “activity_lista_contatos.xml”):

Como havia falado 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:

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:

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

Após clicar em “Next” será exibida a caixa de diálogo como demonstra a figura abaixo:

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:

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.

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:

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:

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:

Agora iremos alterar a propriedade do componente ImageView conforme abaixo:

Agora vamos adicionar um componente TextView que ficará ao lado da imagem. Altere suas propriedades conforme a tabela abaixo:

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

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:

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

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

Agora vamos analisar alguns trechos de códigos. Vamos no evento Click referente a abertura da primeira imagem. O código:

imgfoto.setImageResource(R.drawable.foto1);

É responsável por abrir a imagem “foto1.jpg” e exibi-la no componente. Observe que foi passado o parâmetro “R.drawable.foto1” onde “drawable” corresponde a pasta e “foto1” corresponde ao arquivo “foto1.jpg”. Logo após vem o código:

txtinformacao.setText("Foto 1");

Cuja finalidade é mudar o título da TextView , de acordo com a String passada como parâmetro.
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: