Toda aplicação Android é constituída por widgets, que são componentes
gráficos que constituem uma aplicação Android. A partir de agora iremos
conhecer os widgets básicos que constituem a 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.
A widget TextView
A widget TextView 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.
A widget EditText
A widget EditText funciona como se fosse caixa onde podemos digitar
nela dados do teclado.
A widget Button
A widget Button nada mais é do que um Botão de comando , que quando
clicado, dispara uma ação, um evento.
Desenvolvendo uma aplicação que soma números
Com os componentes até agora vistos, já é possível desenvolvermos uma
aplicação. Vamos criar agora uma aplicação que faça uso de um desses
widgets. Crie um novo projeto Android com os seguintes dados:
Project Name: SomaNumeros
Package Name: br.com.android
Create Activity: AppSoma
Application Name: Soma Números
Min SDK Version: 7
Criado o projeto, vamos no arquivo “main.xml” desse projeto e como havia
mencionado, vamos agora fazer uso do utilitário que ira nos ajudar a construir a
nossa aplicação da forma rápida. Pelo nome do projeto, podemos ver que essa
aplicação é uma aplicação de calculo. Essa aplicação vai ler dois números
inteiros e no final, irá mostrar a soma deles, simples.
Vamos no arquivo “main.xml” desse projeto e vamos fazer as seguintes
modificações. Observe que logo de início, ele mostra a frase “Hello
World,AppSoma!” na widget TextView,
Bom, clique na frase para selecioná-la pois, iremos modificar seu
conteúdo. Se você observar abaixo existe uma guia chamada “Properties”, que
indica a propriedade de um componente devidamente em edição,
Se você notou, quando clicamos no componente mostrou uma série de
valores na propriedade, isso indica os atributos daquele componente.
Agora vamos na guia “Properties” encontrar uma propriedade chamada
“Text”, que indica o conteúdo assumido pelo componente TextView, que no
caso é a frase “Hello World,AppHello!”. Depois de encontrar a propriedade
Text, substitua o valor corrente pela frase “Digite o primeiro número” e depois
disso, de ENTER.
Ótimo, agora vamos inserir a widget EditText, que funciona como um
campo para preenchermos com valores número ou alfanuméricos. Como
vamos adicionar esse componente? Se você observar na figura acima, existe
uma seção chamada “Views”, é nela onde ficam os componentes que
constituem uma aplicação Android.
Primeiramente, encontre o componente (widget) EditText, depois de
encontra-lo, simplesmente você vai clicar sobre ele e arrastar até a tela do
dispositivo, para adiciona-lo.
Bom, agora vamos modificar duas propriedades desse componente.
Encontre a propriedade “id” do componente EditText e nela você vai
inserir o valor “@+id/numero1”. Essa propriedade serve para darmos um nome
ao componente, caso ele seja trabalhado no código Java.
O nome de um widget deve estar nesse formato:
“@+<nome>/<nome>”
Se observamos, o valor desse atributo é : “@+id/numero1”. É como se “id”
representasse um grupo e “numero1” representasse o nome do componente.
Você irá entender essa notação mais a frente.
Depois disso, vamos na propriedade “Layout width”, que define a largura
de um componente e iremos definir o valor “fill_parent”, que indica que o
componente irá ocupar toda a largura do dispositivo.
Para finalizar, vamos agora modificar a propriedade “Text“, deixando seu
conteúdo em branco. O resultado você confere na figura abaixo:
Agora você vai inserir, NA SEQUÊNCIA, os componentes TextView e
EditText.
Na segunda TextView, vamos inserir na propriedade Text a frase “Digite o
segundo número”.
Já na segunda EditText, vamos repetir os mesmos procedimentos que
fizemos na primeira EditText, sabendo-se que a diferença vai estar na
propriedade “id” que assumirá o valor “@+id/numero2”. Somente essa é a
diferença, o resto é tudo igual.
Agora vamos inserir um componente chamado Button na nossa aplicação.
Depois de inserido, modifique as propriedades abaixo com os seus respectivos
valores:
Button
Propriedade Valor
Layout width fill_parent
Id @+id/btsomar
Text Somar
Apostila de Android – Programando passo a passo 3ª Edição
Depois de feito todas as alterações, o layout da aplicação deve estar de
acordo com a figura abaixo:
Beleza, agora vamos abrir o código do arquivo “AppSoma.java”, para
acessar via código Java os componentes que adicionamos via XML. Siga os
passos aqui descritos para você ver como esse processo é feito. Após a linha
import android.os.Bundle;
Digite:
import android.widget.*;
import android.view.*;
import android.app.*;
Antes da linha:
@Override
Digite:
EditText ednumero1,ednumero2;
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
Apostila de Android – Programando passo a passo 3ª Edição
respectivo em classe Java, logo, se possui um widget Button, para acessá-lo
devo fazer uso da classe Button e assim vai.
Agora, após a linha:
setContentView(R.layout.main);
Digite as seguintes linhas de código:
ednumero1 = (EditText) findViewById(R.id.numero1);
ednumero2 = (EditText) findViewById(R.id.numero2);
Button btsomar = (Button) findViewById(R.id.btsomar);
Agora vou explicar as linhas acima. 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”.
Ah, se lembra o nome da primeira EditText que está no código XML? Ela
se chama “@+id/numero1”.
Vamos entender, observe que para fazer referência ao EditText pelo
método findViewById eu passei o parâmetro R.campo.num1.
Já na segunda linha, para fazer a referência à segunda EditText, cujo
nome é “@+id/numero2”, pelo método findViewById, passei o parâmetro
R.id.numero2.
Como você pode ver, estou fazendo uso da classe R, que funciona como
interface entre o código Java e o arquivo XML.
O procedimento é o mesmo para o Button.
Agora iremos adicionar um evento Click, no nosso Button, pois quando eu
clicar no botão, ele deverá mostrar a soma dos números. Então, logo após a
linha:
Button btsomar = (Button) findViewById(R.id.btsomar);
Digite:
btsomar.setOnClickListener(new View.OnClickListener(){
public void onClick(View arg0) {
Apostila de Android – Programando passo a passo 3ª Edição
double num1 =
Double.parseDouble(ednumero1.getText().toString());
double num2 =
Double.parseDouble(ednumero2.getText().toString());
double res = num1 + num2;
AlertDialog.Builder dialogo = new
AlertDialog.Builder(AppSoma.this);
dialogo.setTitle("Aviso");
dialogo.setMessage("Soma:" + res);
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
});
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.
(Aplicação que soma números)
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 Click. O método setOnClickLisneter
serve para definir um evento de Click a um componente. Como parâmetro,
criamos uma instância de OnClickListener e dentro dessa instância existe o
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
em num1. 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 mesma.
O código abaixo:
AlertDialog.Builder dialogo = new AlertDialog.Builder(AppSoma.this);
dialogo.setTitle("Aviso");
dialogo.setMessage("Soma:" + res);
dialogo.setNeutralButton("OK", null);
dialogo.show();
É responsável por mostrar a soma na tela , através da classe
AlertDialog.Builder, responsável por criar caixas de diálogo e exibi-las.
Beleza! Com esse conhecimento obtido até agora, você já tem
capacidade para fazer uma aplicação básica em Android.
A widget CheckBox
A widget CheckBox funciona como um componente que pode ser
marcado e desmarcado, e que possui também um rótulo.
Desenvolvendo uma aplicação simples de compras
Agora vamos fazer uma outra aplicação Android que vai fazer uso da
widget CheckBox, que acabamos de conhecer acima. Nossa aplicação consiste
em um simples sistemas de compras onde possuo 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.
Apostila de Android – Programando passo a passo 3ª Edição
Bom, vamos criar um novo projeto chamado SistemaDeCompras. Siga os
dados do projeto abaixo:
Project Name: SistemaDeCompras
Package Name : br.com.android
Create Activity: AppCompra
Application Name: Sistema de Compras
Min SDK Version: 7
Vamos no arquivo “main.xml” desse projeto para carregarmos o utilitário.
Depois de carregado, modifique o valor da propriedade Text da TextView com
a frase “Digite o seu produto”. Feito isso, adicione os seguintes componentes,
na seqüência:
CheckBox
Propriedade Valor
Text Arroz (R$ 2,69)
Id @+id/chkarroz
CheckBox
Propriedade Valor
Text Leite (R$ 5,00)
Id @+id/chkleite
CheckBox
Propriedade Valor
Text Carne (R$ 9,70)
Id @+id/chkcarne
CheckBox
Propriedade Valor
Text Feijão (R$ 2,30)
Id @+id/chkfeijao
Button
Propriedade Valor
Text Total das compras
Id @+id/btotal
Layout_width fill_parent
Agora vamos modificar o arquivo “AppCompra.java“. O código desse
arquivo será como o código que é exibido abaixo:
package br.com.android;
import android.app.AlertDialog;
import android.os.Bundle;
import android.widget.*;
import android.view.*;
import android.app.*;
public class AppCompra extends Activity {
CheckBox chkarroz,chkleite,chkcarne,chkfeijao;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
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(){
Apostila de Android – Programando passo a passo 3ª Edição
public void onClick(View arg0) {
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(AppCompra.this);
dialogo.setTitle("Aviso"); //Defino o título
dialogo.setMessage("Valor total da compra :" +
String.valueOf(total)); //colocando a mensagem que vai ter dentro do
Dialog
dialogo.setNeutralButton("OK", null); //adicionando o
botão de OK
dialogo.show(); //mostrando o Dialog
}
});
}
}
Descrevendo o código do evento onClick : Dentro do evento 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 com o valor da variável total. No
final mostro valor total das compras na tela.
(Aplicação simples de compras)
A widget RadioButton
A widget RadioButton é um componente muito utilizado em opções de
múltipla escolha, onde somente uma única opção pode ser selecionada.
Desenvolvendo uma aplicação de cálculo de salário
(ComRadioButton)
Bom, agora vamos fazer uma outra aplicação. Essa aplicação que vamos
desenvolver agora consiste em um sistema que vai ler o salário de um
funcionário e vai permitir que você escolha o seu percentual de aumento que
pode ser de 40% , 45% e 50% e no final o sistema irá mostrar o salário
reajustado com o novo aumento.
Bom, vamos lá! Crie um novo projeto Android com os seguintes dados:
Project Name: CalculoDeSalario
Package Name : br.com.android
Create Activity: AppSalario
Application Name: Cálculo do salário
Min SDK Version: 7
Nessa primeira versão da aplicação, como havia falado, vamos fazer uso
da widget RadioButton.
Carregado o arquivo “main.xml”, modifique a propriedade Text da
TextView com a frase “Digite seu salário (R$)”. Em seguida adicione os
seguintes componentes, na seqüência :
EditText
Propriedade Valor
Text
Id @+id/edsalario
Layout_width fill_parent
TextView
Propriedade Valor
Text Qual é o seu percentual ?
Bom, agora vamos adicionar um componente , ou melhor, uma estrutura,
que será responsável por agrupar as RadioButtons dentro dela.O nome dessa
estrutura se chama “RadioGroup” e ela se encontra dentro da seção “Layouts”,
Para adicionar este componente no dispositivo simplesmente clique e
arraste ele até a tela do dispositivo. Se observar, não mostra nenhum
componente selecionado no dispositivo mas, se você observar a direita existe
uma seção chamada “Outline”, que todos os componentes situados na tela do
dispositivo, visíveis ou não, conforme você confere na figura abaixo:
Se você observar na figura acima, mesmo não mostrando nenhum
componente selecionado no dispositivo, o componente corrente em edição é o
RadioGroup, pelo fato de ele estar vazio, sem nenhuma RadioButton.
Com o RadioGroup selecionado, modifique as propriedades abaixo:
Propriedade Valor
Orientation vertical
Id @+id/rgopcoes
Agora, vamos inserir as RadioButtons dentro dele. Como faremos isso?
Na seção “Outline”, clique com o botão direito do sobre componente
RadioGroup “rgopcoes” e surgirá um menu, selecione a opção “Add”, conforme
mostra a figura abaixo:
Após selecionar a opção “Add’, será aberta uma caixa de dialogo com
uma lista completa de componentes para você poder adicionar sobre a
RadioGroup. No momento, só iremos adicionar RadioButtons nele logo,
selecione o componente RadioButton, conforme mostra a figura abaixo:
Depois disso é só clicar em “OK” para que o componente seja inserido na
RadioGroup. Com o RadioButton selecionado, modifique as seguintes
propriedades abaixo:
Propriedade Valor
Text 40%
Id @+id/rb40
Agora vamos adicionar mais duas RadioButtons dentro da nossa
RadioGroup “rgopcoes”, para isso repita os mesmos procedimentos acima.
Depois de adicionados as RadioButtons, modifique as propriedades deles,
conforme abaixo:
RadioButton1
Propriedade Valor
Text 45%
Id @+id/rb45
RadioButton2
Propriedade Valor
Text 50%
Id @+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.
Depois de colocar o Button, modifique as propriedades abaixo:
Propriedade Valor
Text Calcular novo salário
Id @+id/btcalcular
Layout_width fill_parent
No arquivo “AppSalario.java”, coloque o código abaixo:
package br.com.android;
import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
import android.view.*;
import android.app.*;
public class AppSalario extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btcalcular = (Button) findViewById(R.id.btcalcular);
btcalcular.setOnClickListener(new View.OnClickListener(){
public void onClick(View arg0) {
double salario, novo_sal;
EditText edsalario = (EditText)
findViewById(R.id.edsalario);
salario =
Double.parseDouble(edsalario.getText().toString());
RadioGroup rg = (RadioGroup)
findViewById(R.id.rgopcoes);
int op = rg.getCheckedRadioButtonId();
if(op==R.id.rb40)
novo_sal = salario + (salario * 0.4);
else
if(op==R.id.rb45)
novo_sal = salario + (salario *
0.45);
else
novo_sal = salario + (salario *
0.5);
AlertDialog.Builder dialog = new
AlertDialog.Builder(AppSalario.this);
dialog.setTitle("Novo salário");
dialog.setMessage("Seu novo salário é : R$" +
String.valueOf(novo_sal));
dialog.setNeutralButton("OK", null);
dialog.show();
}
});
}
}
Vamos à explicação de alguns códigos interessantes. Dentro do evento
Click, 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 for, realize 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.
A widget Spinner
A widget Spinner é um componente do tipo caixa de combinação
(“ComboBox”) onde nele é armazenado vários itens a serem selecionados.
Para que um componente possa ser selecionado, é preciso clicarmos na seta ,
para que os itens possam ser mostrados e , por conseqüência, serem
selecionados.
5.10) Desenvolvendo uma aplicação de cálculo de salário (Com
Spinner)
Bom, agora vamos criar a nossa segunda versão do aplicativo acima,
usando agora o componente Spinner. Crie um novo projeto Android com os
seguintes dados:
Project Name: CalculoDeSalarioSpinner
Apostila de Android – Programando passo a passo 3ª Edição
Package Name : br.com.android
Create Activity: AppSalario
Application Name: Cálculo do salário
Min SDK Version: 7
Nessa segunda versão da aplicação, vamos fazer uso da widget Spinner.
Carregue o arquivo “main.xml” e faça os mesmos procedimentos do programa
anterior, só que ao invés de adicionar a RadioGroup com os RadioButtons,
você vai inserir somente um componente Spinner. Segue abaixo as
propriedades que você precisa modificar:
Propriedade Valor
Id @+id/spnopcoes
Layout_width fill_parent
Seguindo os passos, a aplicação deve estar de acordo com a figura
abaixo:
Agora no arquivo “AppSalario.java”, coloque o seguinte código:
package br.com.android;
import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
import android.view.*;
import android.app.*;
public class AppSalario extends Activity {
private static final String[] percentual = {"De 40%","De
45%","De 50%"};
ArrayAdapter<String> aPercentual;
Spinner spnsal;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btmostrar = (Button) findViewById(R.id.btcalcular);
aPercentual = new
ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,
percentual);
spnsal = (Spinner) findViewById(R.id.spnopcoes);
spnsal.setAdapter(aPercentual);
btmostrar.setOnClickListener(new View.OnClickListener(){
public void onClick(View arg0) {
double salario=0, novo_sal = 0;
EditText edsalario = (EditText) findViewById(R.id.edsalario);
salario = Double.parseDouble(edsalario.getText().toString());
switch(spnsal.getSelectedItemPosition()) {
case 0: novo_sal = salario + (salario * 0.4); break;
case 1: novo_sal = salario + (salario * 0.45); break;
case 2: novo_sal = salario + (salario * 0.5); break;}
AlertDialog.Builder dialogo = new
AlertDialog.Builder(AppSalario.this);
dialogo.setTitle("Novo salário");
dialogo.setMessage("Seu novo salário é : R$" +
String.valueOf(novo_sal));
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. Observe que foi necessário declarar um “array”
de “String” chamado percentual, conforme mostra o código abaixo:
private static final String[] percentual = {"De 40%","De 45%","De
50%"};
Este “array” possui três elementos, correspondentes ao percentual do
aumento do salário. Também foi necessário declarar um objeto do tipo
ArrayAdapter chamado aPercentual. Esse objeto serve para fazer referencia ao
“array” percentual. Dentro do método OnCreate, existe uma linha de código
abaixo:
aPercentual = new
ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,
percentual);
Que cria uma instância da classe ArrayAdapter e atribuo essa instância ao
objeto aPercentual, onde carrego nele o “array” de Strings percentual. Logo
depois, vem a instrução:
spnsal.setAdapter(aPercentual);
Onde carrego no objeto do tipo Spinner uma lista de opções de
percentual.
Vamos agora dentro do evento OnClick do objeto Button. Dentro existe o
código mostrado abaixo:
switch(spnsal.getSelectedItemPosition()) {
case 0: novo_sal = salario + (salario * 0.4); break;
case 1: novo_sal = salario + (salario * 0.45); break;
case 2: novo_sal = 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.
Observe que o objeto spnsal, 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 calculo de salário usando o Spinner)
A widget ListView
A Widget ListView é um componente que possui vários itens a serem
selecionados, similar ao componente Spinner. A única diferença entre o
ListView e o Spinner é que no componente ListView, os itens já são mostrados
sem nenhuma necessidade de se clicar em alguma parte dele para que os
mesmos possam ser mostrados.
5.4) Desenvolvendo uma aplicação de lista telefônica
Agora vamos fazer uma nova aplicação em Android. Essa aplicação
consiste em uma lista telefônica já pronta com contatos. Quando selecionamos
um contato, ele mostra na tela uma mensagem com o nome selecionado. A
nossa aplicação vai fazer uso do widget chamado ListView, que exiba uma lista
contendo valores que podem ser selecionados.
Bom, vamos criar um novo projeto. Siga os dados abaixo:
Project Name: ListaTelefonica
Apostila de Android – Programando passo a passo 3ª Edição
Package Name : br.com.android
Create Activity: AppLista
Application Name: Lista de contatos
Min SDK Version: 7
Vamos no layout do nosso arquivo main.xml e vamos modificar o
conteúdo na TextView, com a frase : “Escolha um contato”. Depois disso,
vamos inserir um ListView (que se encontra na guia “Layouts”) e depois
modificar suas propriedades, conforme abaixo:
Propriedade Valor
Id @+id/lstcontatos
Layout_width fill_parent
A aplicação depois de feito todos os passos acima, deve estar de acordo
com a figura abaixo:
Pelo fato do ListView ser uma estrutura de layout não um componente,
ele , como aconteceu com o RadioGroup, está vazio e no dispositivo não
mostra ele selecionado.
No arquivo AppList.java, coloque o seguinte código:
package br.com.android;
Apostila de Android – Programando passo a passo 3ª Edição
import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.widget.*;
import android.widget.AdapterView.OnItemClickListener;
import android.view.*;
public class AppLista extends Activity {
public ListView lista;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,
contatos);
lista = (ListView) findViewById(R.id.lstcontatos);
lista.setAdapter(adapter);
lista.setOnItemClickListener(new OnItemClickListener(){
public void onItemClick(AdapterView arg0, View arg1,
int arg2,
long arg3) {
if(lista.getSelectedItem()!=null){
AlertDialog.Builder dialogo = new
AlertDialog.Builder(AppLista.this);
dialogo.setTitle("Contato selecionado");
dialogo.setMessage(lista.getSelectedItem().toString());
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
}
});
}
static final String[] contatos = new String[] {
"Alline","Lucas","Rafael","Gabriela","Silvana"
};
}
Apostila de Android – Programando passo a passo 3ª Edição
Vamos analisar alguns códigos acima. A linha:
static final String[] contatos = new String[] {
"Alline","Lucas","Rafael","Gabriela","Silvana"
};
Cria uma constante chamada contatos, onde nela coloco alguns nomes.
Essa constante vai ser utilizada pela nossa lista. Para que eu possa carregar
dos dados em uma ListView, preciso fazer uso da classe ArrayAdapter, como
mostra a instrução abaixo:
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,android.R.layout. simple_list_item_1,
contatos);
A instrução mostrada acima cria uma instância da classe ArrayAdapter
chamada adapter onde carrego nela o vetor de Strings da constante contatos.
A instrução:
lista.setAdapter(adapter);
Carrega os valores para a ListView, que está contido o objeto adapter.
Como havia falado, quando se clica em um item, o sistema mostraria uma
mensagem do item selecionado. Isso é conseguido fazendo uso da interface
OnItemClickListener, como mostra a instrução abaixo:
lista.setOnItemClickListener(new OnItemClickListener(){
public void onItemClick(AdapterView arg0, View arg1, int
arg2,long arg3) {
if(lista.getSelectedItem()!=null)
AlertDialog.Builder dialogo = new
AlertDialog.Builder(AppLista.this);
dialogo.setTitle("Contato selecionado");
dialogo.setMessage(lista.getSelectedItem().toString());
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
});
Toda vez que clicarmos em um item da lista, o método onItemClick será
disparado e será executado o comando abaixo:
if(lista.getSelectedItem()!=null){
AlertDialog.Builder dialogo = new
AlertDialog.Builder(AppLista.this);
dialogo.setTitle("Contato selecionado");
Apostila de Android – Programando passo a passo 3ª Edição
dialogo.setMessage(lista.getSelectedItem().toString());
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
Que exibe o nome do item selecionado, se ele estiver selecionado. A
obtenção do item clicado e feita chamando o método getSelectedItem() .
Porém, como ele retorna um tipo Object, preciso converter para String o item
clicado, através do método toString.
Vamos executar a aplicação. O resultado você vê na figura abaixo:
(Aplicação de lista de contatos)
A widget Imageview
A widget ImageView é um componente que permite que visualizemos
imagens dentro dele. As imagens suportadas por esse componente são
imagens no formato JPEG, GIF e PNG.
Desenvolvendo uma aplicação que visualiza imagens (Com
ImageView)
Agora vamos desenvolver uma aplicação que visualiza imagens, usando o
componente ImageView.
Agora crie um novo projeto conforme os dados abaixo:
Project Name: VisualizadorDeImagens
Package Name : br.com.android
Create Activity Name: AppImagem
Application Name: Visualizador de Imagens
Min SDK Version: 7
Antes de iniciarmos a codificação do programa, quero que você coloque
duas imagens JPEG (com a extensão .jpg) que acompanham este material e
que se encontram da pasta “IMAGEVIEW” , dentro da pasta “res/drawablemdpi”.
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”). Clique no botão browser para
selecionar o diretório onde se encontram as imagens, depois de selecionado,
marque os dois arquivos (imagens) para que eles sejam importados para a
pasta “res/drawable-mdpi” . Veja a figura abaixo:
(Importando imagens para aplicação)
Depois disso, é só clicar em “Finish”.
Agora no layout do arquivo “main.xml”, apague o componente TextView
que se encontra na tela do dispositivo. Se você acha que para deletar um
componente do layout do dispositivo é simplesmente selecionando ele e
pressionar DELETE ? Se enganou. Para apagar o componente selecione e
Apostila de Android – Programando passo a passo 3ª Edição
clique com o botão direito do mouse sobre ele e escolha a opção
“Remove”.
Agora siga os passos abaixo para construirmos a nossa aplicação.
Vá na seção “OutLine” e clique com o botão direito sobre o LinearLayout e
selecione a opção “Add”, conforme figura abaixo:
Agora vamos adicionar um outro “LinearLayout” dentro dele. O resultado
você confere na seção Outline,
Agora nessa estrutura “LinearLayout’ que inserimos, vamos modificar a
seguinte propriedade abaixo:
Propriedade Valor
Orientation horizontal
Agora dentro da estrutura “LinearLayout” que configuramos acima, vamos
inserir os seguintes componentes, na seqüência (use o mesmo procedimento
que fiz para inserir a segunda estrutura “LinearLayout”):
ImageView
Propriedade Valor
Id @+id/imagem
Src @drawable/foto1
Bom antes de prosseguir, quero explicar a propriedade “Src”. Nessa
propriedade definimos a imagem corrente que irá aparecer na tela que é
especificada pela notação “@drawable/foto1”, irei explicar essa notação.
Se você notou, quando importamos as duas imagens que seriam
utilizadas pelo nosso programa, essas imagens ficaram dentro do diretório
“drawable-mdpi” certo ? Porém, quando especificamos pela propriedade “Src” o
nome do diretório das imagens sempre será @drawable. Outro detalhe:
Quando especificamos o nome do arquivo de imagem, o nome do arquivo não
pode ter a extensão dele, isso é regra.
TextView
Propriedade Valor
Id @+id/txtinfo
Text Foto 1
Agora vamos colocar na seqüência dois buttons, só que esses dois
componentes vão estar dentro da primeira estrutura LinearLayout, ou seja , da
estrutura principal. Segue abaixo as propriedades que precisam ser
modificadas:
Button1
Propriedade Valor
Id @+id/btimagem1
Text Exibir foto 1
Layout_width fill_parent
Button2
Propriedade Valor
Id @+id/btimagem2
Text Exibir foto 2
Layout_width fill_parent
Depois de seguir todos os passos descritos acima, a aplicação tem que
estar de acordo com a figura abaixo:
Apostila de Android – Programando passo a passo 3ª Edição
Agora no arquivo AppImage.java coloque o código abaixo:
package br.com.android;
import android.app.Activity;
import android.os.Bundle;
import android.view.*;
import android.widget.*;
public class AppImagem extends Activity {
ImageView imagem;
TextView txt;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btfoto1 = (Button) findViewById(R.id.btimagem1);
Button btfoto2 = (Button) findViewById(R.id.btimagem2);
imagem = (ImageView) findViewById(R.id.imagem);
txt = (TextView) findViewById(R.id.txtinfo);
btfoto1.setOnClickListener(new View.OnClickListener(){
public void onClick(View arg0) {
imagem.setImageResource(R.drawable.foto1);
txt.setText("Foto 1");
}
});
Apostila de Android – Programando passo a passo 3ª Edição
btfoto2.setOnClickListener(new View.OnClickListener(){
public void onClick(View arg0) {
imagem.setImageResource(R.drawable.foto2);
txt.setText("Foto 2");
}
});
}
}
Agora vamos analisar alguns trechos de códigos. Vamos no evento Click
referente a abertura da primeira imagem. O código:
imagem.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:
txt.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 a
abertura da segunda imagem.
Vamos executar a nossa aplicação. O resultado você vê nas imagens
abaixo:
A widget Gallery
Na aplicação anterior, fizemos uso do widget ImageView. Note que
usamos a mesma widget para visualizar duas imagens distintas. Agora nesta
segunda aplicação vamos fazer uso da widget Gallery. Essa widget funciona
como um grupo do ImageViews onde cada foto pode ser visualizada
simplesmente arrastando o mouse ou clicando nas setas direitas ou esquerda
do SmartPhone . Veja na figura abaixo uma aplicação que faz uso dessa
estrutura:
Apostila de Android – Programando passo a passo 3ª Edição
5.15) Desenvolvendo uma aplicação que visualiza imagens (Com
Gallery)
Bom, vamos a nossa aplicação. Crie um novo projeto de acordo com os
dados abaixo:
Project Name: GaleriaDeImagens
Package Name : br.com.android
Create Activity: AppGallery
Application Name: Galeria de Imagens
Min SDK Version: 7
Depois de criado o projeto, coloque na pasta de imagens do android
(res/drawable-mdpi), três imagens que se encontram dentro da pasta
“GALLERY”, que acompanham este material. O nome dos arquivos são
“imagem1.jpg”, ”imagem2.jpg” e “imagem3.jpg”.
Agora vamos criar uma classe chamada “ImageAdapter”, que será uma
classe iremos utilizar em nossa aplicação e essencial para o funcionamento do
componente Gallery. Siga os passos abaixo:
Vá no menu File/New/Class, conforme mostra a figura abaixo:
Agora, preencha os dados abaixo:
Source folder : GaleriaDeImagens/src
Package: br.com.android
Name: ImageAdapter
Seguindo os passos acima, os dados devem estar de acordo com a figura
abaixo:
Se estiver tudo OK, é só pressionar o botão “Finish”, para que a classe
possa ser criada e logo em seguida coloque o código abaixo:
package br.com.android;
import android.content.Context;
import android.view.*;
import android.widget.*;
public class ImageAdapter extends BaseAdapter {
private Context myContext;
/* Neste array são colocadas as imagens a serem exidas
no componente Gallery .*/
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; }
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 main.xml e modifique o conteúdo da TextView
com a frase: “Visualização de Imagens” e em seguida, insira no dispositivo o
componente Gallery. Modifique as propriedades do componente Gallery
conforme é mostrado abaixo:
Propriedade Valor
Id @+id/gallery
Layout_width fill_parent
Feito isso, vamos no arquivo “AppGallery.java” , e vamos modifica-lo com
o seguinte código abaixo:
package br.com.android;
import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
public class AppGallery extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
((Gallery) findViewById(R.id.gallery))
.setAdapter(new ImageAdapter(this));
}
}
Agora vamos executar a nossa aplicação.
Agora vamos tornar essa aplicação mais interessante. Vamos colocar
nessa aplicação um ImageView, que irá armazena a imagem seleciona no
componente Gallery. Bom, carregue novamente o arquivo main.xml e em
seguida, coloque os seguintes componentes, na seqüência:
TextView
Propriedade Valor
Text Imagem selecionada
ImageView
Propriedade Valor
Id @+id/imagem
Layout_width fill_parent
Agora no arquivo “AppGallery.java” vamos substituir o código recente
pelo novo código abaixo:
package br.com.android;
import android.app.Activity;
import android.os.Bundle;
import android.view.*;
import android.widget.*;
public class AppGallery extends Activity {
Gallery g;
ImageView imagem;
private int[] myImageIds = {
R.drawable.imagem1,
R.drawable.imagem2,
R.drawable.imagem3,
};
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
g = (Gallery) findViewById(R.id.gallery);
g.setAdapter(new ImageAdapter(this));
imagem = (ImageView) findViewById(R.id.imagem);
g.setOnItemClickListener(new
AdapterView.OnItemClickListener(){
Apostila de Android – Programando passo a passo 3ª Edição
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 faz referência ao
componente ImageView no arquivo XML, como mostra o código abaixo:
ImageView imagem;
Também na aplicação adicionamos o array que contém todas as
referências das imagens contidas no projeto, conforme mostra o código abaixo:
private int[] myImageIds = {
R.drawable.imagem1,
R.drawable.imagem2,
R.drawable.imagem3,
};
Dentro do método onCreate foi feito uma referência ao componente
ImageView contido no XML e definimos o evento OnItemClickListener , do
componente Gallery. Vamos analisar seu código abaixo:
imagem.setImageResource(myImageIds[arg2]);
Toast.makeText(getBaseContext(),
"Figura " + (arg2 + 1) + " selecionada",
Toast.LENGTH_SHORT).show();
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 fazendo 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.
(Aplicação da imagens otimizada)
A widget ProgressBar
Agora será mostrado uma widget do Android que consiste em uma
ProgressBar (Barra de progresso). Ela é muito utilizada quando queremos
indicar algum andamento em processo. Por exemplo, quando ocorre a
instalação de um programa ou quando se faz um download de um arquivo
normalmente é mostrado aquela barra de porcentagem que indica em
porcentagem, o andamento daquele processo. Aquilo é uma barra de
progresso.
A widget Spinner é um componente do tipo caixa de combinação
(“ComboBox”) onde nele é armazenado vários itens a serem selecionados.
Para que um componente possa ser selecionado, é preciso clicarmos na seta ,
para que os itens possam ser mostrados e , por conseqüência, serem
selecionados.
5.10) Desenvolvendo uma aplicação de cálculo de salário (Com
Spinner)
Bom, agora vamos criar a nossa segunda versão do aplicativo acima,
usando agora o componente Spinner. Crie um novo projeto Android com os
seguintes dados:
Project Name: CalculoDeSalarioSpinner
Apostila de Android – Programando passo a passo 3ª Edição
Package Name : br.com.android
Create Activity: AppSalario
Application Name: Cálculo do salário
Min SDK Version: 7
Nessa segunda versão da aplicação, vamos fazer uso da widget Spinner.
Carregue o arquivo “main.xml” e faça os mesmos procedimentos do programa
anterior, só que ao invés de adicionar a RadioGroup com os RadioButtons,
você vai inserir somente um componente Spinner. Segue abaixo as
propriedades que você precisa modificar:
Propriedade Valor
Id @+id/spnopcoes
Layout_width fill_parent
Seguindo os passos, a aplicação deve estar de acordo com a figura
abaixo:
Agora no arquivo “AppSalario.java”, coloque o seguinte código:
package br.com.android;
import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
import android.view.*;
import android.app.*;
public class AppSalario extends Activity {
private static final String[] percentual = {"De 40%","De
45%","De 50%"};
ArrayAdapter<String> aPercentual;
Spinner spnsal;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btmostrar = (Button) findViewById(R.id.btcalcular);
aPercentual = new
ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,
percentual);
spnsal = (Spinner) findViewById(R.id.spnopcoes);
spnsal.setAdapter(aPercentual);
btmostrar.setOnClickListener(new View.OnClickListener(){
public void onClick(View arg0) {
double salario=0, novo_sal = 0;
EditText edsalario = (EditText) findViewById(R.id.edsalario);
salario = Double.parseDouble(edsalario.getText().toString());
switch(spnsal.getSelectedItemPosition()) {
case 0: novo_sal = salario + (salario * 0.4); break;
case 1: novo_sal = salario + (salario * 0.45); break;
case 2: novo_sal = salario + (salario * 0.5); break;}
AlertDialog.Builder dialogo = new
AlertDialog.Builder(AppSalario.this);
dialogo.setTitle("Novo salário");
dialogo.setMessage("Seu novo salário é : R$" +
String.valueOf(novo_sal));
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. Observe que foi necessário declarar um “array”
de “String” chamado percentual, conforme mostra o código abaixo:
private static final String[] percentual = {"De 40%","De 45%","De
50%"};
Este “array” possui três elementos, correspondentes ao percentual do
aumento do salário. Também foi necessário declarar um objeto do tipo
ArrayAdapter chamado aPercentual. Esse objeto serve para fazer referencia ao
“array” percentual. Dentro do método OnCreate, existe uma linha de código
abaixo:
aPercentual = new
ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,
percentual);
Que cria uma instância da classe ArrayAdapter e atribuo essa instância ao
objeto aPercentual, onde carrego nele o “array” de Strings percentual. Logo
depois, vem a instrução:
spnsal.setAdapter(aPercentual);
Onde carrego no objeto do tipo Spinner uma lista de opções de
percentual.
Vamos agora dentro do evento OnClick do objeto Button. Dentro existe o
código mostrado abaixo:
switch(spnsal.getSelectedItemPosition()) {
case 0: novo_sal = salario + (salario * 0.4); break;
case 1: novo_sal = salario + (salario * 0.45); break;
case 2: novo_sal = 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.
Observe que o objeto spnsal, 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 calculo de salário usando o Spinner)
A widget ListView
A Widget ListView é um componente que possui vários itens a serem
selecionados, similar ao componente Spinner. A única diferença entre o
ListView e o Spinner é que no componente ListView, os itens já são mostrados
sem nenhuma necessidade de se clicar em alguma parte dele para que os
mesmos possam ser mostrados.
5.4) Desenvolvendo uma aplicação de lista telefônica
Agora vamos fazer uma nova aplicação em Android. Essa aplicação
consiste em uma lista telefônica já pronta com contatos. Quando selecionamos
um contato, ele mostra na tela uma mensagem com o nome selecionado. A
nossa aplicação vai fazer uso do widget chamado ListView, que exiba uma lista
contendo valores que podem ser selecionados.
Bom, vamos criar um novo projeto. Siga os dados abaixo:
Project Name: ListaTelefonica
Apostila de Android – Programando passo a passo 3ª Edição
Package Name : br.com.android
Create Activity: AppLista
Application Name: Lista de contatos
Min SDK Version: 7
Vamos no layout do nosso arquivo main.xml e vamos modificar o
conteúdo na TextView, com a frase : “Escolha um contato”. Depois disso,
vamos inserir um ListView (que se encontra na guia “Layouts”) e depois
modificar suas propriedades, conforme abaixo:
Propriedade Valor
Id @+id/lstcontatos
Layout_width fill_parent
A aplicação depois de feito todos os passos acima, deve estar de acordo
com a figura abaixo:
Pelo fato do ListView ser uma estrutura de layout não um componente,
ele , como aconteceu com o RadioGroup, está vazio e no dispositivo não
mostra ele selecionado.
No arquivo AppList.java, coloque o seguinte código:
package br.com.android;
Apostila de Android – Programando passo a passo 3ª Edição
import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.widget.*;
import android.widget.AdapterView.OnItemClickListener;
import android.view.*;
public class AppLista extends Activity {
public ListView lista;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,
contatos);
lista = (ListView) findViewById(R.id.lstcontatos);
lista.setAdapter(adapter);
lista.setOnItemClickListener(new OnItemClickListener(){
public void onItemClick(AdapterView arg0, View arg1,
int arg2,
long arg3) {
if(lista.getSelectedItem()!=null){
AlertDialog.Builder dialogo = new
AlertDialog.Builder(AppLista.this);
dialogo.setTitle("Contato selecionado");
dialogo.setMessage(lista.getSelectedItem().toString());
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
}
});
}
static final String[] contatos = new String[] {
"Alline","Lucas","Rafael","Gabriela","Silvana"
};
}
Apostila de Android – Programando passo a passo 3ª Edição
Vamos analisar alguns códigos acima. A linha:
static final String[] contatos = new String[] {
"Alline","Lucas","Rafael","Gabriela","Silvana"
};
Cria uma constante chamada contatos, onde nela coloco alguns nomes.
Essa constante vai ser utilizada pela nossa lista. Para que eu possa carregar
dos dados em uma ListView, preciso fazer uso da classe ArrayAdapter, como
mostra a instrução abaixo:
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,android.R.layout. simple_list_item_1,
contatos);
A instrução mostrada acima cria uma instância da classe ArrayAdapter
chamada adapter onde carrego nela o vetor de Strings da constante contatos.
A instrução:
lista.setAdapter(adapter);
Carrega os valores para a ListView, que está contido o objeto adapter.
Como havia falado, quando se clica em um item, o sistema mostraria uma
mensagem do item selecionado. Isso é conseguido fazendo uso da interface
OnItemClickListener, como mostra a instrução abaixo:
lista.setOnItemClickListener(new OnItemClickListener(){
public void onItemClick(AdapterView arg0, View arg1, int
arg2,long arg3) {
if(lista.getSelectedItem()!=null)
AlertDialog.Builder dialogo = new
AlertDialog.Builder(AppLista.this);
dialogo.setTitle("Contato selecionado");
dialogo.setMessage(lista.getSelectedItem().toString());
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
});
Toda vez que clicarmos em um item da lista, o método onItemClick será
disparado e será executado o comando abaixo:
if(lista.getSelectedItem()!=null){
AlertDialog.Builder dialogo = new
AlertDialog.Builder(AppLista.this);
dialogo.setTitle("Contato selecionado");
Apostila de Android – Programando passo a passo 3ª Edição
dialogo.setMessage(lista.getSelectedItem().toString());
dialogo.setNeutralButton("OK", null);
dialogo.show();
}
Que exibe o nome do item selecionado, se ele estiver selecionado. A
obtenção do item clicado e feita chamando o método getSelectedItem() .
Porém, como ele retorna um tipo Object, preciso converter para String o item
clicado, através do método toString.
Vamos executar a aplicação. O resultado você vê na figura abaixo:
(Aplicação de lista de contatos)
A widget Imageview
A widget ImageView é um componente que permite que visualizemos
imagens dentro dele. As imagens suportadas por esse componente são
imagens no formato JPEG, GIF e PNG.
Desenvolvendo uma aplicação que visualiza imagens (Com
ImageView)
Agora vamos desenvolver uma aplicação que visualiza imagens, usando o
componente ImageView.
Agora crie um novo projeto conforme os dados abaixo:
Project Name: VisualizadorDeImagens
Package Name : br.com.android
Create Activity Name: AppImagem
Application Name: Visualizador de Imagens
Min SDK Version: 7
Antes de iniciarmos a codificação do programa, quero que você coloque
duas imagens JPEG (com a extensão .jpg) que acompanham este material e
que se encontram da pasta “IMAGEVIEW” , dentro da pasta “res/drawablemdpi”.
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”). Clique no botão browser para
selecionar o diretório onde se encontram as imagens, depois de selecionado,
marque os dois arquivos (imagens) para que eles sejam importados para a
pasta “res/drawable-mdpi” . Veja a figura abaixo:
(Importando imagens para aplicação)
Depois disso, é só clicar em “Finish”.
Agora no layout do arquivo “main.xml”, apague o componente TextView
que se encontra na tela do dispositivo. Se você acha que para deletar um
componente do layout do dispositivo é simplesmente selecionando ele e
pressionar DELETE ? Se enganou. Para apagar o componente selecione e
Apostila de Android – Programando passo a passo 3ª Edição
clique com o botão direito do mouse sobre ele e escolha a opção
“Remove”.
Agora siga os passos abaixo para construirmos a nossa aplicação.
Vá na seção “OutLine” e clique com o botão direito sobre o LinearLayout e
selecione a opção “Add”, conforme figura abaixo:
Agora vamos adicionar um outro “LinearLayout” dentro dele. O resultado
você confere na seção Outline,
Agora nessa estrutura “LinearLayout’ que inserimos, vamos modificar a
seguinte propriedade abaixo:
Propriedade Valor
Orientation horizontal
Agora dentro da estrutura “LinearLayout” que configuramos acima, vamos
inserir os seguintes componentes, na seqüência (use o mesmo procedimento
que fiz para inserir a segunda estrutura “LinearLayout”):
ImageView
Propriedade Valor
Id @+id/imagem
Src @drawable/foto1
Bom antes de prosseguir, quero explicar a propriedade “Src”. Nessa
propriedade definimos a imagem corrente que irá aparecer na tela que é
especificada pela notação “@drawable/foto1”, irei explicar essa notação.
Se você notou, quando importamos as duas imagens que seriam
utilizadas pelo nosso programa, essas imagens ficaram dentro do diretório
“drawable-mdpi” certo ? Porém, quando especificamos pela propriedade “Src” o
nome do diretório das imagens sempre será @drawable. Outro detalhe:
Quando especificamos o nome do arquivo de imagem, o nome do arquivo não
pode ter a extensão dele, isso é regra.
TextView
Propriedade Valor
Id @+id/txtinfo
Text Foto 1
Agora vamos colocar na seqüência dois buttons, só que esses dois
componentes vão estar dentro da primeira estrutura LinearLayout, ou seja , da
estrutura principal. Segue abaixo as propriedades que precisam ser
modificadas:
Button1
Propriedade Valor
Id @+id/btimagem1
Text Exibir foto 1
Layout_width fill_parent
Button2
Propriedade Valor
Id @+id/btimagem2
Text Exibir foto 2
Layout_width fill_parent
Depois de seguir todos os passos descritos acima, a aplicação tem que
estar de acordo com a figura abaixo:
Apostila de Android – Programando passo a passo 3ª Edição
Agora no arquivo AppImage.java coloque o código abaixo:
package br.com.android;
import android.app.Activity;
import android.os.Bundle;
import android.view.*;
import android.widget.*;
public class AppImagem extends Activity {
ImageView imagem;
TextView txt;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btfoto1 = (Button) findViewById(R.id.btimagem1);
Button btfoto2 = (Button) findViewById(R.id.btimagem2);
imagem = (ImageView) findViewById(R.id.imagem);
txt = (TextView) findViewById(R.id.txtinfo);
btfoto1.setOnClickListener(new View.OnClickListener(){
public void onClick(View arg0) {
imagem.setImageResource(R.drawable.foto1);
txt.setText("Foto 1");
}
});
Apostila de Android – Programando passo a passo 3ª Edição
btfoto2.setOnClickListener(new View.OnClickListener(){
public void onClick(View arg0) {
imagem.setImageResource(R.drawable.foto2);
txt.setText("Foto 2");
}
});
}
}
Agora vamos analisar alguns trechos de códigos. Vamos no evento Click
referente a abertura da primeira imagem. O código:
imagem.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:
txt.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 a
abertura da segunda imagem.
Vamos executar a nossa aplicação. O resultado você vê nas imagens
abaixo:
A widget Gallery
Na aplicação anterior, fizemos uso do widget ImageView. Note que
usamos a mesma widget para visualizar duas imagens distintas. Agora nesta
segunda aplicação vamos fazer uso da widget Gallery. Essa widget funciona
como um grupo do ImageViews onde cada foto pode ser visualizada
simplesmente arrastando o mouse ou clicando nas setas direitas ou esquerda
do SmartPhone . Veja na figura abaixo uma aplicação que faz uso dessa
estrutura:
Apostila de Android – Programando passo a passo 3ª Edição
5.15) Desenvolvendo uma aplicação que visualiza imagens (Com
Gallery)
Bom, vamos a nossa aplicação. Crie um novo projeto de acordo com os
dados abaixo:
Project Name: GaleriaDeImagens
Package Name : br.com.android
Create Activity: AppGallery
Application Name: Galeria de Imagens
Min SDK Version: 7
Depois de criado o projeto, coloque na pasta de imagens do android
(res/drawable-mdpi), três imagens que se encontram dentro da pasta
“GALLERY”, que acompanham este material. O nome dos arquivos são
“imagem1.jpg”, ”imagem2.jpg” e “imagem3.jpg”.
Agora vamos criar uma classe chamada “ImageAdapter”, que será uma
classe iremos utilizar em nossa aplicação e essencial para o funcionamento do
componente Gallery. Siga os passos abaixo:
Vá no menu File/New/Class, conforme mostra a figura abaixo:
Agora, preencha os dados abaixo:
Source folder : GaleriaDeImagens/src
Package: br.com.android
Name: ImageAdapter
Seguindo os passos acima, os dados devem estar de acordo com a figura
abaixo:
Se estiver tudo OK, é só pressionar o botão “Finish”, para que a classe
possa ser criada e logo em seguida coloque o código abaixo:
package br.com.android;
import android.content.Context;
import android.view.*;
import android.widget.*;
public class ImageAdapter extends BaseAdapter {
private Context myContext;
/* Neste array são colocadas as imagens a serem exidas
no componente Gallery .*/
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; }
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 main.xml e modifique o conteúdo da TextView
com a frase: “Visualização de Imagens” e em seguida, insira no dispositivo o
componente Gallery. Modifique as propriedades do componente Gallery
conforme é mostrado abaixo:
Propriedade Valor
Id @+id/gallery
Layout_width fill_parent
Feito isso, vamos no arquivo “AppGallery.java” , e vamos modifica-lo com
o seguinte código abaixo:
package br.com.android;
import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
public class AppGallery extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
((Gallery) findViewById(R.id.gallery))
.setAdapter(new ImageAdapter(this));
}
}
Agora vamos executar a nossa aplicação.
Agora vamos tornar essa aplicação mais interessante. Vamos colocar
nessa aplicação um ImageView, que irá armazena a imagem seleciona no
componente Gallery. Bom, carregue novamente o arquivo main.xml e em
seguida, coloque os seguintes componentes, na seqüência:
TextView
Propriedade Valor
Text Imagem selecionada
ImageView
Propriedade Valor
Id @+id/imagem
Layout_width fill_parent
Agora no arquivo “AppGallery.java” vamos substituir o código recente
pelo novo código abaixo:
package br.com.android;
import android.app.Activity;
import android.os.Bundle;
import android.view.*;
import android.widget.*;
public class AppGallery extends Activity {
Gallery g;
ImageView imagem;
private int[] myImageIds = {
R.drawable.imagem1,
R.drawable.imagem2,
R.drawable.imagem3,
};
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
g = (Gallery) findViewById(R.id.gallery);
g.setAdapter(new ImageAdapter(this));
imagem = (ImageView) findViewById(R.id.imagem);
g.setOnItemClickListener(new
AdapterView.OnItemClickListener(){
Apostila de Android – Programando passo a passo 3ª Edição
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 faz referência ao
componente ImageView no arquivo XML, como mostra o código abaixo:
ImageView imagem;
Também na aplicação adicionamos o array que contém todas as
referências das imagens contidas no projeto, conforme mostra o código abaixo:
private int[] myImageIds = {
R.drawable.imagem1,
R.drawable.imagem2,
R.drawable.imagem3,
};
Dentro do método onCreate foi feito uma referência ao componente
ImageView contido no XML e definimos o evento OnItemClickListener , do
componente Gallery. Vamos analisar seu código abaixo:
imagem.setImageResource(myImageIds[arg2]);
Toast.makeText(getBaseContext(),
"Figura " + (arg2 + 1) + " selecionada",
Toast.LENGTH_SHORT).show();
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 fazendo 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.
(Aplicação da imagens otimizada)
A widget ProgressBar
Agora será mostrado uma widget do Android que consiste em uma
ProgressBar (Barra de progresso). Ela é muito utilizada quando queremos
indicar algum andamento em processo. Por exemplo, quando ocorre a
instalação de um programa ou quando se faz um download de um arquivo
normalmente é mostrado aquela barra de porcentagem que indica em
porcentagem, o andamento daquele processo. Aquilo é uma barra de
progresso.
Nenhum comentário:
Postar um comentário