Android SDK1

como funciona?
Fundamentos
Apostila do Aluno
Copyright Instituto de Artes Interativas

Todos os direitos reservados. Esse material no pode ser copiado, fotocopiado, reproduzido,
traduzido ou convertido em qualquer forma eletrnica ou legvel por meio, em parte ou no todo,
sem a aprovao prvia por escrito do Instituto de Artes Interativas.
Elaborao do Contedo
Jonas Baggio
Elaborao dos Exerccios
Jonas Baggio
Diagramao
Samuel Sano de Moura
Edio n1
Junho /2011
iai? Instituto de Artes Interativas

Rua Amauri, 352 - Itaim Bibi
CEP: 01448-000 - So Paulo, SP, Brasil
(11) 3071-4017 | contato@iai.art.br
http://iai.art.br
Android - Fundamentos
Android: Fundamentos
Sobre o iai?
A histria do iai?
O iai? Instituto de Artes Interativas foi fundada em maro de 2009 com cursos de desenvolvimento
de aplicativos para iOS contando com uma proposta inovadora e atualizada, nestes ltimos 3 anos
tivemos mais de 2000 alunos em nossos cursos.
A produtora j trabalha a 2 anos atendendo a demanda do mercado por aplicativos para
plataformas mveis como o iOS e Android.
Dessa forma, procuramos uma equipe coesa, criativa, e eficiente para desenvolver solues e
inovaes no mundo das artes interativas e educao.
Galeria
Exposio de artes e locao
para eventos corporativos
Escola
Cursos prticos, rpidos
e objetivos
Produtora
Desenvolvimento de
aplicativos mveis
Na rea educacional, O Iai? se destaca na oferta cursos com aprendizagem rpida, presencial e a
distncia, contando com know how em sistemas mveis como iPhone SDK, Android SDK e Windows
phone 7, alm de Lgica de programao, design, interfacesentre outros. Os cursos do iai? so
voltados para profissionais que buscam a capacitao por meio do conhecimento e domnio de
novas ferramentas tecnolgica com cursos prticos e objetivos aonde aprendem produzindo.
A Produtoraatua no mercado no desenvolvimento de projetos em diversos clientes em vrios
mercados. Aplicativos mveis, peas de marketing e publicidade nesses dispositivos,
Como um espao de exposio de novas idias, a Galeria
Nossa fora est nos profissionais qualificados, com professores que tambm atuam do mercado
em diversos projetos, essa forma de garanti alm do conhecimento tcnico, dicas, conceitos e
informaes sobre o mercado.
Como encontrar o iai?

O Iai? conta com vrias formas de se comunicar com o seus clientes e amigos, use a forma mais
fcil e prtica para voc.
iai.art.br
instituto de artes interativas
@iaibrasil
iai? instituto de artes interativas
iai.art.br/clube-iai.html
Outros cursos do iai?
IOS SDK
Programao para o sistema operacional da Apple
ANDROID SDK
Programao para o sistema operacional da Google
Lgica de programao
Conceitos Bsicos de programao
Orientao a objeto e Objective C
Conceitos de desenvolvimento de sistemas e Linguagem de programao base para o IOS.
Orientao a objeto e Java
Conceitos de desenvolvimento de sistemas e Linguagem de programao base para o Android.
Design
O objetivo do curso ensinar a montar um projeto de design utilizando como plataforma um
aplicativo para iPhone.
Interface
O curso focado nas guias da Apple e pretende discutir as melhores formas de interface.
Games
Focamos em estratgias e tcnicas para desenvolvimento de jogos para o Iphone, demonstrando o
funcionamento do Cocos2D.
Windows Phone 7
Venha desenvolver para o mais novo sistema operacional da Micrsoft que promete mexer com
Mercado de tecnologia.
Maiores informaes acesse: WWW. IAI.ART.BR
Indces
Lista de Figuras
Figura 1 Tela de boas vindas do Eclipse.
Figura 2 Instalando o plugin ADT no Eclipse
Figura 3 Definindo diretrio do ADT.
Figura 4 ADT j instalado no Eclipse
Figura 5 Adicionando o SDK do Android
Figura 6 Bibliotecas do Android disponvel no SDK.
Figura 7 Assistente para criar/startar um AVD
Figura 8 Criando um novo emulador
Figura 9 Visualizao do emulador que criamos.
Figura 10 Emulador do Android baseado na verso 2.2
Figura 11 Acessando o JavaDoc.
Figura 12 Documentao de ajuda - JavaDoc
Figura 13 Criando um novo projeto
Figura 14 Definindo as propriedades do projeto
Figura 15 Estrutura de diretrios do projeto
Figura 16 Executando a aplicao
Figura 17 Devices
Figura 18 LogCat
Figura 19 Definindo um filtro no LogCat
Figura 20 Filtro PrimeiroAPP no LogCat
Lista de Figuras
Figura 21 HelloWorld Meu primeiro label
Figura 22 HelloWorld Meu primeiro label -2
Figura 23 HelloWorld Trocando texto do label
Figura 24 HelloWorld Trocando texto do label pela API
Figura 25 Acessando o editor visual do Android
Figura 26 Editor Visual do Android
Figura 27 DroidDraw
Figura 28 Exerccio Novo Boto e novo Label
Figura 29 LinearLayout - Vertical
Figura 30 LinearLayout Horizontal
Figura 31 FrameLayout Imagem tamanho normal
Figura 32 FrameLayout Imagem como fundo
Figura 33 TableLayout - ShrinkColumns
Figura 34 TableLayout - StretchColumns
Figura 35 RelativeLayout
Figura 36 SeekBar - RGB
Figura 37 ToggleButton
Figura 38 CheckBox
Figura 39 VISIBLE e INVISIBLE
Figura 40 VISIBLE e GONE
Lista de Figuras
Figura 41 ImageView API do Android
Figura 42 App Minhas Fotos
Figura 43 Spinner com valores e exibio da opo ecolhida
Figura 44 Exercicio Spinner com imagens
Figura 45 Exemplo de ScroolView
Figura 46 Exemplo de HorizontalScroolView
Figura 47 Exemplo de ProgressBar
Figura 48 Exemplo de ProgressDialog
Figura 49 Alert
Figura 50 Alerta de Confirmao
Figura 51 ListView
Figura 52 ListView com imagens
Figura 53 ListView + LongPress
Figura 54 Editando item do ListView
Figura 55 Trocando de Tela
Figura 56 Definindo uma nova Activity no AndroidManifest.xml
Figura 57 Passagem de paramretro entre telas
Figura 58 Cliclo de vida de uma Activity - Iniciando
Figura 59 Cliclo de vida de uma Activity - Encerrando
Figura 60 GridView de duas colunas
10
Lista de Figuras
Figura 61 Gallery com foco no personagem Toad
Figura 62 TabHost com Activitys
Figura 63 TabHost com provedor de contedo
Figura 64 TabHost com arquivo de layout
11
Sumrio
Captulo 1 Configurando o Ambiente
1.1 Site do Android
16
1.2 Baixando o SDK do Android
16
1.3 Eclipse
16
1.4 Instalando o plugin ADT no Eclipse
17
1.5 Criando um AVD (Android Virtual Device)
22
1.6 Executando o emulador
25
Captulo 2 Introduo ao Java

2.1 JavaDoc
27
2.2 Fundamentos do Java
28
Captulo 3 Primeiro Aplicativo Android

3.1 Criando o primeiro projeto Android
31
3.2 LogCat
36
3.3 HelloWorld
39
3.4 Repetindo o exerccio usando a API
47
3.5 Editor visual
49
3.6 DroidDraw
51
3.7 Tratamento de eventos
52
3.8 Exerccio Novo boto e nova label
54
12
Sumrio
Captulo 4 Formas de Layout
4.1 LinearLayout
56
4.2 FrameLayout
58
4.3 TableLayout
60
4.4 RelativeLayout
64
Captulo 5 Componentes Visuais

5.1 SeekBar
68
5.2 Herana de propriedades
71
5.3 SeekBar e ToggleButton
71
5.4 Exerccio Desabilitando ToggleButton utilizando o

SeekBar
74
5.5 CheckBox
75
5.6 Visible, Invisible e Gone
78
5.7 ImageView
81
5.8 App Minhas Fotos
83
5.9 Exerccio Imagens com alpha
86
5.10 EditText e Teclado Virtual
86
5.11 Exerccio Buscando imagens
90
5.12 Spinner
90
5.13 Exercicio - Trocando imagens com Spinner
94
13
Sumrio
5.14 ScroolView
95
5.15 ProgressBar
99
5.16 ProgressDialog
102
5.17 AlertDialog
105
5.18 Alerta de Confirmao
108
5.19 ListView
112
5.20 ListView com Imagens
117
5.21 ListView com LongPress
121
5.22 Editando dados do ListView
125
Captulo 6 Telas
6.1 StartActivity
130
6.2 StartActivity com Passagem de Parmetros
134
6.3 Exerccio Criando uma terceira tela
135
6.4 Ciclo de vida de uma Activity
135
Captulo 7 Outros Containers

7.1 GridView
145
7.2 Gallery
147
7.3 TabHost
150
14
Captulo
Configurando o Ambiente
1.1 Site do Android

Como principal referncia no desenvolvimento de aplicativos para a
plataforma Android, podemos citar o site (http://developer.android.
com), o site oficial dos desenvolvedores da plataforma.
Nesse site que encontramos o SDK do Android, tutoriais e toda sua
documentao.
1.2 Baixando o SDK do Android

Para desenvolver aplicativos para a plataforma Android, voc vai
precisar do SDK do Android, disponibilizado no site (http://developer.
android.com/sdk/). Vamos baixar a verso mais recente e descompactla em uma pasta de fcil acesso como o C:\.
1.3 Eclipse
Para realizarmos os exemplos dessa apostila, usaremos a IDE de
desenvolvimento Eclipse, disponibilizada para download no site (http://
www.eclipse.org). Aps baix-lo, s descompactar em uma pasta de
sua preferncia.
A figura 1 representa a tela incial do Eclipse.
16
Figura 1. Tela de boas vindas do Eclipse.
1.4 Instalando o plugin ADT no Eclipse

O Eclipse possibilita a instalao de plugins, que funcionam como um
complemento para a IDE, facilitando o desenvolvimento de aplicaes.
Para desenvolver aplicativos para o Android, vamos baixar um plugin
chamado ADT (http://developer.android.com/sdk/eclipse-adt.html),
que possibilita a integrao do nosso ambiente de desenvolvimento
com o emulador do Android, atravs dele podemos iniciar o emulador
diretamente do Eclipse, podemos tambm depurar o cdigo como
qualquer outra aplicao.
Aps descompactar o ADT, precisamos adicion-lo ao Eclipse, para
isso vamos acessar a opo Install New Software..., no menu Help,
apresentado na figura 2.
17
Figura 2. Instalando o plugin ADT no Eclipse
Na figura 3, informamos o diretrio onde descompactamos o ADT, e

prosseguimos sua instalao.
18
Figura 3. Definindo diretrio do ADT.
Aps a instalao o Eclipse exibir uma mensagem solicitando para ser

reiniciado e aplicar as alteraes realizadas.
Na prxima vez que o Eclipse for iniciado, nota-se pela figura 4 que foi
adicionado na barra de ferramentas, um assistente do Android, mas para
utiliz-lo, precisamos informar ao Eclipse onde se encontra o SDK do
Android.
Figura 4. ADT j instalado no Eclipse
19
Abra o menu Window > Preferences e na janela que abre, selecione a

opo Android e informe o diretrio onde o SDK foi descompactado.
Figura 5. Adicionando o SDK do Android
Ao clicarmos em Apply, ser listado todas as bibliotecas disponveis

no SDK, podemos dar um Ok nesta tela. Feito isso, o Eclipse j
esta configurado para fornecer os recursos necessrios para o
desenvolvimento dos nossos aplicativos.
20
Figura 6. Bibliotecas do Android disponvel no SDK.
21
1.5 Criando um AVD (Android Virtual Device)

Agora que o Eclipse j esta configurado, vamos criar um AVD (Android
Virtual Device), que ser chamado nessa apostila de emulador, ele ser
usado para execuo das aplicaes.
Clicamos no novo cone que surgiu na barra de ferramentas do
Eclipse, esse cone o assitente do Android dentro do Eclipse, ele
responsvel por abrir a janela, representada pela figura 7, onde so
listados os emuladores disponveis para execuo.
Figura 7 - Assistente para criar/startar um AVD
22
Como ainda no criamos nenhum, a lista est vazia, como apresentado

na figura 7. Para criarmos nosso primeiro emulador, clicamos em New
e definimos algumas propriedades.
Na figura 8 apresentamos os passos necessrios para criar um novo
emulador. Vamos preencher os campos abaixo para configura-lo:
Figura 8. Criando um novo emulador
23
Name: Nome do emulador

Target: Verso do Android para este emulador. Neste exemplo estamos
criando um emulador com a verso 2.3 do Android.
SD Card: Tamanho para simular o carto de memria.
O restante das opes deixamos os valores default. Podemos clicar em
Create AVD. Agora j podemos ver o emulador que acabamos de criar
na lista de emuladores, como mostra a figura 9.
Figura 9. Visualizao do emulador que criamos.
24
1.6 Executando o emulador

Na mesma janela da figura 9 onde criamos o nosso emulador, podemos
execut-lo, basta selecionar o emulador desejado e clicar no boto
start. Quando iniciamos um emulador pela primeira vez, demora cerca
de 2 minutos para que faa toda a configurao no sistema operacional
e esteja pronto para uso.
Figura 10. Emulador do Android baseado na verso 2.2
25
Captulo
Introduo ao Java
2.1 JavaDoc
O JavaDoc uma referncia de consulta para os desenvolvedores. Nele
encontra-se a documentao da linguagem, que vai desde um overview
do ambiente de desenvolvimento at a especificao dos recursos da
linguagem.
No Eclipse, pode-se acessar a documentao atravs do menu Help, na
opo Help Contents (F1).
Figura 11. Acessando o JavaDoc.
Ser aberta uma janela, representada pela figura 12, onde procuramos
o contedo que nos interessa. Tambm possui uma caixa de busca para
refinar a nossa pesquisa no JavaDoc.
27
Introduo ao Java
Figura 12. Documentao de ajuda - JavaDoc
2.2 Fundamentos do Java

Faremos uma breve abordagem sobre como a declarao de variveis
e mtodos no Java. Lembramos que no objetivo dessa apostila
ensinar a programar em Java, uma vez que isso pr-requisito para
desenvolver aplicativos para a plataforma Android.
28
Introduo ao Java
Declarao de variveis
//varivel privada (da classe) que aceita
apenas valores inteiros

private int var1;

//varivel pblica (pode ser acessada de
outras classes) aceita
conjuntos de caracteres

public static String var2;

//varivel local que aceita valores decimais

double var3;

//varivel booleana (verdadeiro ou falso)

boolean ok;

//declarando uma varivel com valor j
inicializado

private int var4 = 20;

//declarao de varivel booleana com valor
verdadeiro

boolean editMode = true;

//declarao de uma constante

final double VALOR_PI = 3.14;
Declarao de mtodos
//mtodo que vai somar dois valores inteiros

public void somar(int valor1, int valor2){
int resultado = valor1 + valor2;
}

//chamada ao mtodo
somar(10,25);

//mtodo que vai somar dois valores inteiros e
retornar o resultado da soma

public int somar(int valor1, int valor2){
int resultado = valor1 + valor2;
return resultado;
}
//chamamos o mtodo e armazenamos o retorno do
mtodo na varivel result

int result = somar(3,2);

//mtodo que s vai realizar uma tarefa

public void atualizaValor(){
//implementao do cdigo...
}
//chamada ao mtodo
atualizaValor();
29
Captulo
Primeiro Aplicativo Android
3.1 Criando o primeiro projeto Android

Para criarmos um novo projeto Android no Eclipse, basta acessar a
opo File New Android Project (alt+shift+N Android Project).
Como mostra a figura 13.
Figura 13. Criando um novo projeto
A figura 14 representa o assistente de criao do projeto que aberto

ao selecionarmos o tipo de projeto, e onde precisamos definir algumas
propriedades.
31
`Project name: Nome do projeto
32

Build Target: Nosso projeto ser criado para usar a API Level 8 do
Google, que corresponde verso 2.2 do Andorid nos devices.
Application name: Nome da nossa aplicao.
Package Name: Nome do pacote padro da aplicao.
Create Activity: Essa a classe onde inicia nosso aplicativo, por padro,
nomeamos ela como Main.
Min. SDK version: API Level mnima do do Android necessria do device
para compatibilidade com o aplicativo. API Level o identificador e
cada verso do Android.
Aps definir essas propriedades, podemos clicar no boto Finish.
Para maiores informaes sobre as principais diferenas entre as verses
do Android, (http://socialcompare.com/en/comparison/android-versionscomparison).
Ao voltar ao Eclipse, utilize o atalho Ctrl+3 para abrir o assistente de
atalhos do Eclipse. Feito isso, digite Package Explorer para abrir esta
view. Se tudo ocorreu bem, voc dever estar vendo a seguinte estrutura
de diretrios da aplicao.
Figura 15. Estrutura de diretrios do projeto
33
Consideraes:
Todas as classes e pacotes que precisarmos criar,sero criadas dentro
da pasta src.
Na pasta gen, podemos ver a classe R.java, esta classe a mais
importante do projeto, e nunca deve ser modificada manualmente.
Entraremos em mais detalhes no decorrer do assunto.
Na raiz do projeto, observamos o arquivo AndroidManisfest.xml,
aqui onde definimos todas as telas da aplicao, se ter ou no
34
acelermetro na tela, as permisses que a aplicao precisa, (veremos

mais detalhes das permisses conforme o exemplo necessitar).
A pasta res onde colocamos todos os recursos da aplicao,
imagens, layout, botes, etc. Mais detalhes sobre ela a medida que os
exemplos forem solicitando.
Na classe Main, faremos a implementao do seguinte cdigo:
package br.com.primeiroapp;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
public class Main extends Activity {

public static final String TAG = primeiro_
app;

@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
int idade = 21;
double altura = 1.85;
String nome = Jonas;
String sobrenome = Baggio;
String texto = Meu nome + nome +
sobrenome + ,tenho + idade + anos de idade, e
+ altura + metros de altura.;
Log.e(TAG, texto);
Log.i(TAG, texto);
Log.w(TAG, texto);
35
3.2 LogCat
O LogCat uma ferramenta que possibilita a visualizao de todos os
logs que o sistema operacional do Android gera.
Na aplicao, podemos definir como o log ser gerado, se um log
de erro, informao, alerta, debug. Podemos filtrar essa informao
posteriormente no LogCat.
No cdigo que implementamos na classe Main, criamos uma constante
chamada TAG, cujo valor primeiro
_app, esse o identificador dos logs
que vamos usar na nossa aplicao. Observe que ela passada como
parmetro em todos os logs.
Para tornar visvel a ferramenta do LogCat, utilizamos o atalho ctrl+3,
e digitamos Logcat. Ento selecionamos a view LogCat e damos um
enter. Vamos aproveitar e fazer a mesma coisa para a view Devices,
nela podemos visualizar o device/emulador que esto disponveis para
uso.
Agora vamos executar o programa e ver o resultado. Para isso, clicamos
com o boto direito do mouse sobre o projeto, e acessamo a opo
run as Android Application.
36
Figura 16. Executando a aplicao
O emulador ser iniciado automaticamente, podemos ver que ele

mostrado na view Devices, que tornamos disponvel no passo anterior.
Enquanto o emulador esta iniciando podemos ver os processos dele
sendo iniciados tambem.
Figura 17. Devices
Na ltima linha, est o processo que corresponde ao nosso aplicativo.

Na execuo do aplicativo, podemos observar na figura 18 o console do
LogCat.
37
Figura 18. LogCat
Dessa forma, pode-se visualizar vrios logs nessa janela, e entre

eles esto os logs que criamos para nossa aplicao. Identificamos
facilmente nossos logs porque cada um foi impresso em um nvel
diferente.
Para facilitar a visualizao dos logs da nossa aplicao, definimos um
filtro de log clicando no boto com sinal de + na cor verde.
Ser apresentada a seguinte tela:
Figura 19. Definindo um filtro no LogCat
38
Filter Name: Nome do filtro (geralmente mesmo nome da aplicao).

By Log Tag: Tag que usamos como identificador quando chamamos
algum mtodo da classe Log. o valor da constante TAG, que
definimos na classe Main.
By Log Level: Identifica o nvel de log que queremos filtrar (debug,
alerta, erro, info), no caso vamos filtrar todos.
Feito isso, j podemos visualizar uma segunda aba no LogCat com
o nome do nosso filtro. E nos logs dessa aba, temos apenas os que
correspondem a nossa aplicao, como podemos visualizar na figura
20.
Figura 20. Filtro PrimeiroAPP no LogCat
3.3 HelloWorld
Vamos criar um novo projeto, chamado HelloWorld, baseado na
verso 2.2 do Android. Preencha o campo Create Activity com o
nome Main.
A classe Main ter o seguinte cdigo.
39

package br.com.helloworld;
@Override
}
Como explicado na pgina 26, a classe Main o ponto de entrada da

nossa aplicao. Observe que ela herda de Activity. correto afirmar
que cada tela no Android uma Activity, e dentro de cada tela,
devemos implementar o mtodo onCreate(bundle), que chamado
sempre que a tela inciada.
No Android, por padro, definimos toda a regra de negcio da aplicao
na classe, e o layout da pagina definimos em um arquivo XML separado.
Basta chamar o mtodo setContentView(view) e indicar qual layout
ser utilizado para a Activity.
Nesse caso, nossa classe Main tem um arquivo de layout chamado
main.xml, que fica na pasta /res/layout.
40

<?xml version=1.0 encoding=utf-8?>
<LinearLayout
xmlns:android=http://schemas.android.com/apk/
res/android
android:orientation=vertical
android:layout_width=fill_parent
android:layout_height=fill_parent
>

<TextView
android:layout_height=wrap_content
android:text=Meu primeiro label
/>
</LinearLayout>
Nesse primeiro momento, o que nos interessa a tag <TextView>.Ela

responsvel por desenhar um label na tela. Dentro dessa tag, definimos
trs propriedades.
android:layout_width=fill_parent informamos que
nossa label ocupar todo espao horizontal disponvel na tela.
android:layout_height=wrap_content informamos que

nossa label ocupar apenas o espao que ela ocupa na vertical.
android:text=Meu primeiro label esse o texto que

nossa label vai ter.
As outras propriedades sero explicadas com detalhes conforme

necessidade do exemplo.
Ao executarmos nossa aplicao, podemos observar na figura 21, a
41
seguinte sada no emulador.
Figura 21. HelloWorld Meu primeiro label
Para este exerccio, definimos um arquivo cores.xml, que colocamos na

pasta /res/values/. O Arquivo ter o seguinte contedo.
<resources>

<color name=background>#eeeeee</color>

<color name=transparent>#00000000</color>

<color name=amarelo>#FFA500</color>

<color name=azul>#0000ff</color>

<color name=branco>#ffffff</color>

<color name=cinzaC>#CCCCCC</color>

<color name=cinzaD>#DDDDDD</color>

<color name=cinzaE>#EEEEEE</color>

<color name=fundo>#6495ED</color>

<color name=laranja>#FFA500</color>

<color name=light_grey>#A8A8A8</color>

<color name=preto>#000000</color>

<color name=verde>#00ff00</color>

<color name=verde_lima>#00AA2B</color>

<color name=vermelho>#ff0000</color>
</resources>
42
Esse arquivo serve como auxilio na utilizao de cores na nossa aplicao.

Ao invs de informar o cdigo hexadecimal de uma cor, usamos a
chave desse arquivo que corresponde ao cdigo hexadecimal da cor.
Agora vamos definir a cor da fonte, o alinhamento e a cor de fundo do
label.
<TextView
android:gravity=center
android:textColor=@color/azul
android:background=@color/vermelho
/>
Esse o resultado ao executarmos o aplicativo no emulador.
Figura 22. HelloWorld Meu primeiro label -2
43
Agora que aprendemos a setar algumas propriedades do nosso label,

vamos adicionar um boto no nosso arquivo de layout e ao clicarmos
nesse boto, o texto do label ser trocado.
Vamos alterar o nosso arquivo main.xml para o seguinte contedo.

<LinearLayout xmlns:android=http://schemas.android.
com/apk/res/android
>

<TextView

android:id=@+id/label
android:gravity=center
android:background=@color/vermelho
/>
<Button
android:id=@+id/btTrocar
android:layout_width=wrap_content
android:layout_gravity=center_horizontal
android:text=Trocar Label
/>
</LinearLayout>
44
E a nossa classe Main vamos alterar da seguinte forma.

import
import
import
import
import
import
android.app.Activity;
android.os.Bundle;
android.view.View;
android.view.View.OnClickListener;
android.widget.Button;
android.widget.TextView;
public class Main extends Activity

private TextView label;

{
@Override
label = (TextView) findViewById(R.id.label);
Button btTrocarLabel = (Button)

findViewById(R.id.btTrocar);
btTrocarLabel.setOnClickListener(new
OnClickListener() {
@Override
public void onClick(View v) {
label.setText(Boto
clicado!);
}

});
}
}
45
Podemos observar que no layout adicionamos a propriedade @+id/

ao label e no boto que foi criado. Utilizamos essa propriedade para
conseguir recuperar a view posteriormente.
Em nossa classe, utilizamos o mtodo findViewById(id) e informamos
o id que damos a view no arquivo de layout. Note que necessrio
fazer o cast para o objeto que queremos recuperar.
Para o objeto Button, implementamos um listener que tratar o evento
de clique no boto, e a nica ao do listener, ser atualizar um novo
texto no label.
Na figura 23 podemos visualizar o resultado da execuo.
Figura 23. HelloWorld Trocando texto do label
46
3.4 Repetindo o exerccio usando a API

Vamos fazer o mesmo exemplo anterior, mas desta vez sem os arquivos de
layout, apenas utilizando a API do Android.
import
import
import
import
import
import
import
import
import
import
android.graphics.Color;
android.os.Bundle;
android.view.Gravity;
android.view.View;
android.view.ViewGroup.LayoutParams;
android.widget.LinearLayout;

@Override
protected void onCreate(Bundle
savedInstanceState) {

LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
layout.setLayoutParams(new
LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.
FILL_PARENT));

label = new TextView(this);
label.setLayoutParams(new
LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.
WRAP_CONTENT));
label.setBackgroundColor(Color.RED);
label.setTextColor(Color.BLUE);
label.setGravity(Gravity.CENTER_HORIZONTAL);
label.setText(Meu label criado pela API);
layout.addView(label);

Button btTrocar = new Button(this);

btTrocar.setText(Trocar label);
btTrocar.setLayoutParams(new
LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.
WRAP_CONTENT));
btTrocar.setOnClickListener(new
47

OnClickListener() {
@Override
label.setText(Texto do
label trocado pela API);
}
});

layout.addView(btTrocar);
setContentView(layout);

}
}
Podemos observar neste exemplo que no precisamos definir o arquivo

de layout (.xml) para a view. Ao invs disso, criamos um LinearLayout
e definimos as mesmas propriedades do arquivo main.xml. Criamos as
outras views e adicionamos as mesmas propriedades a cada uma, por
ltimo, adicionamos o LinearLayout na nossa Activity.
Ao executarmos nossa aplicao temos o seguinte resultado.
Figura 24. HelloWorld Trocando texto do label pela API
48
3.5 Editor visual

No Android, tambm podemos criar as telas da nossa aplicao pelo
editor visual do Android. Para acess-lo, basta abrirmos o arquivo .xml
do layout e clicar na guia Graphical Layout, como mostrado na imagem
abaixo.
Figura 25.Acessando o editor visual do Android
49
Figura 26.Editor Visual do Android
Essa a cara do editor visual do Android. Todos os componentes

que precisamos para criar nossa aplicao se encontram no menu a
esquerda, basta clicar e arrastar o componente desejado.
No arquivo .xml ser criado o cdigo correspondente a criao do
componente, podemos alter-lo manualmente ou usar o editor.
A maioria dos desenvolvedores deixa de lado essa opo e criam suas
telas todas diretamente no cdigo, e o editor passa a ser utilizado
apenas para acompanhar no desenvolvimento de telas mais complexas.
Podemos dizer que o editor no muito preciso na criao das telas,
um exemplo disso o modo que o boto mostrado, mais alto
que o normal. Quando executamos o aplicativo, temos uma outra
visualizao desse boto, provavelmente esse o principal motivo
para o editor no fazer tanto sucesso.
50
3.6 DroidDraw
Uma outra opo para criar as telas do Android, utilizar uma
ferramenta terceirizada, chamada DroidDraw, que pode ser baixada no
site (http://droiddraw.org). O uso dela muito semelhante ao editor
do Eclipse, porm, aps criarmos a tela, precisamos clicar no boto
generate para gerar o cdigo correspondente a tela.
Figura 27.DroidDraw
51
3.7 Tratamento de eventos

No exemplo anterior, ns adicionamos um listener ao boto, e
implementamos a regra de negcio que queremos.
Outra forma de fazermos isso, fazer nossa Activity implementar a
interface OnClickListener e implementar o mtodo onClick(view).
import
import
import
import
import
import
android.os.Bundle;
android.view.View;

implements OnClickListener {


private Button btTrocarLabel;
@Override
public void onCreate(Bundle

label = (TextView) findViewById(R.
id.label);

btTrocarLabel = (Button)
findViewById(R.id.btTrocar);

btTrocarLabel.
setOnClickListener(this);
}

@Override

public void onClick(View view) {
if(view == btTrocarLabel){
label.setText(Boto
clicado!);
}
}
}
52
Quando alguma view clicada, no mtodo onClick(view) que sabemos

a view que originou o evento. Se tivessemos algum outro boto na tela
e quisessemos tratar o evento desse novo boto, deveriamos declarlo na classe, e dentro do metodo onClick(view), testar qual boto foi
clicado, da mesma forma que fizemos para o btTrocarLabel.
53
3.8 Exerccio Novo boto e nova label

Agora vamos criar uma nova label, sem nenhum texto, e outro boto.
Ao clicarmos nesse novo boto, o label ser atualizado para um texto
qualquer.
Figura 28. Exerccio Novo Boto e novo Label
54
Captulo
Formas de Layout
4.1 LinearLayout
Podemos observar que em todos os nossos exemplos ns definimos
por primeiro dentro do arquivo .xml de layout o tipo de layout que
nossa tela vai ter. Por padro, quando criamos uma nova tela, o layout
definido como padro na vertical, e para ocupar todo o espao da
tela. Desta forma, conforme vamos adicionando elementos em nossa
tela, eles vo sendo posicionados um abaixo do outro. Segue abaixo 2
exemplos que implementaes diferentes de um LinearLayout.
com/apk/res/android
>

</LinearLayout>
Figura 29.LinearLayout - Vertical
56
Formas de Layout
com/apk/res/android
android:orientation=horizontal
>

</LinearLayout>
Figura 30.LinearLayout Horizontal
Voc deve ter notado que alm de termos trocado o valor da

propriedade orientation para horizontal, tambem trocamos o
layout para ocupar somente o espao necessrio na largura da tela.
Se no fizermos isso, aparecer apenas a label na tela, isso por que a
propriedade layout
width
_
do TextView esta definida como fill_parent, e
ocupar todo espao que o layout disponibiliza para as view que esto
dentro dele, fazendo com que o boto fique fora do layout.
57
Formas de Layout
4.2 FrameLayout
Geralmente, esse tipo de layout mais utilizado quando queremos
definir uma imagem de fundo para nossa tela. Usando o conceito de
pilha, onde o ltimo item da pilha o que fica visvel, adicionamos uma
imagem de fundo por primeiro e o restante dos elementos depois. Por
padro, os componentes so inseridos primeiramente no canto superior
esquerdo da tela.
<FrameLayout xmlns:android=http://schemas.android.
com/apk/res/android
>

<ImageView

android:src=@drawable/toad
/>
</FrameLayout>
Figura 31.FrameLayout Imagem tamanho normal
58
Formas de Layout
com/apk/res/android
>

<ImageView

/>
</FrameLayout>
Figura 32.FrameLayout Imagem como fundo
59
Formas de Layout
4.3 TableLayout
Esta opo de layout muito utilizada na criao de formulrios, onde
podemos criar linha por linha e ir adicionando os componentes no
formato de uma tabela.
Junto com o TableLayout, muito comum a utilizao de duas
propriedades muito importantes:o stretchColumns e o shrinkColumns.
ShrinkColumns.
<TableLayout

res/android

android:id=@+id/widget27



android:shrinkColumns=1,2


>

<TableRow>
<TextView android:text=Coluna 1/>
<TextView android:text=Como o texto
dessa coluna muito grande utilizamos a propriedade
shrinkColumns para quebrar o seu contedo e manter
dentro da tela/>

</TableRow>

<TableRow>
<TextView android:text=Como o texto
dessa coluna muito grande utilizamos a propriedade
shrinkColumns para quebrar o seu contedo e manter
dentro da tela/>

</TableRow>

<TableRow>

</TableRow>
</TableLayout>
60
Formas de Layout
Figura 33.TableLayout - ShrinkColumns
No exemplo da pgina 54, criamos uma tabela com 3 linhas e 3 colunas,

e na propriedade shrinkColumns do TableLayout, informamos que as
colunas 1 e 2 vo ter seu contedo adaptados para caber dentro das
colunas. Se quisssemos adicionar um texto grande na primeira coluna
dessa tabela, deveramos inclu-la tambm na propriedade, fazendo o
shrinkColumns tenha o seguinte valor:
android:shrinkColumns=0,1,2.
Lembrando que a contagem das colunas comeam em 0.
61
Formas de Layout
<TableLayout

res/android



android:stretchColumns=0


>

<TextView android:text=PRODUTOS
android:gravity=center_horizontal />
<View android:layout_height=2dip
android:background=@color/amarelo/>

<TableRow android:background=@color/verde>
<TextView
android:text=Arroz
android:gravity=left
android:background=@color/fundo_
cinza/>
<TextView
android:text=R$ 7,80
android:gravity=right
android:textColor=@color/preto/>

</TableRow>

<TextView
android:text=Aucar

cinza/>
<TextView

android:gravity=right
android:textColor=@color/preto/>

</TableRow>

<TextView
android:text=Caf

cinza/>
<TextView android:text=R$ 2,69
android:gravity=right android:textColor=@color/
preto/>

</TableRow>

<View android:layout_height=2dip
android:background=@color/azul/>

<TableRow>
<TextView
android:text=TOTAL
62

android:gravity=left/>
<TextView
android:gravity=right/>

</TableRow>
</TableLayout>
Figura 34.TableLayout - StretchColumns
Neste exemplo, utilizamos cores na tabela para conseguirmos

identificar as caractersticas dessa propriedade. Observe que a
propriedade stretchColumns est com valor 0, isso quer dizer que
nossa primeira coluna vai ocupar todo espao da tela, no caso, ate
encontrar a prxima view, que so os preos dos produtos.
63
Formas de Layout
4.4 RelativeLayout
A caracterstica desse layout que podemos adicionar um prximo
componente na tela com relao ao componente anterior. Para isto,
precisamos definir a propriedade id aos componentes e declarar o
componente que vamos referenciar antes do componente atual, no
arquivo .xml.
Podemos utilizar as seguintes propriedades nesse layout.
android:layout_below=@id/id posiciona abaixo do
componente indicado
android:layout_above=@id/id posiciona acima do
componente indicado
android:layout_toRightOf=@id/id posiciona a
direita do componente indicado
android:layout_toLeftOf=@id/id posiciona a
esquerda do componente indicado
android:layout_alignParentTop=@id/id alinha ao
topo do componente indicado
android:layout_alignParentBottom=@id/id alinha
abaixo do componente indicado
android:layout_marginTop=@id/id utilizado para
definir um espao na margem superior do componente
android:layout_marginRight=@id/id utilizado para
definir um espao a direita do componente
android:layout_marginLeft=@id/id utilizado para
definir um espaco a esquerda do componente
Na prxima pgina segue um exemplo de uma tela usando o

RelativeLayout.
64
Formas de Layout
<RelativeLayout xmlns:android=http://schemas.
android.com/apk/res/android



android:background=@color/azul
>

<TextView
android:id=@+id/labelLogin
android:layout_width=50dip
android:text=Login:

/>

<EditText
android:id=@+id/textLogin
android:layout_toRightOf=@id/
labelLogin

/>

<TextView
android:paddingTop=10dip
android:id=@+id/labelSenha
android:layout_below=@id/labelLogin
android:layout_width=50dip
android:text=Senha:

/>

<EditText
android:id=@+id/textSenha
android:layout_toRightOf=@id/
labelSenha
android:layout_below=@id/textLogin

/>

<Button
android:id=@+id/btEntrar
android:layout_below=@id/textSenha
android:text=Entrar

/>
</RelativeLayout>
65
Formas de Layout
Figura 35.RelativeLayout
66
Captulo
Componentes Visuais
5.1 SeekBar
uma espcie de barra de progresso, mas quem define o seu progresso
somos ns, clicando em sua rea de clique e arrastando o progresso para
onde desejamos.
Abaixo segue a implementao de um exemplo utilizando o SeekBar.
public class Main extends Activity implements
OnSeekBarChangeListener {

private SeekBar seekBarRED;
private SeekBar seekBarGREEN;
private SeekBar seekBarBLUE;
@Override

super.onCreate(savedInstanceSta
te);

setContentView(R.layout.seek_
bar);

id.label);

seekBarRED = (SeekBar) findViewById(R.
id.seekBar_R);

seekBarGREEN = (SeekBar) findViewById(R.
id.seekBar_G);

seekBarBLUE = (SeekBar) findViewById(R.
id.seekBar_B);

seekBarRED.setOnSeekBarChangeListener(th
is);

seekBarGREEN.setOnSeekBarChangeListener(
this);

seekBarBLUE.setOnSeekBarChangeListener(t
his);

updateTextColor();
}

@Override

public void onProgressChanged(SeekBar sBar,
int alpha, boolean b) {
updateTextColor();
}

private void updateTextColor() {
int red = seekBarRED.getProgress();
int green = seekBarGREEN.getProgress();
int blue = seekBarBLUE.getProgress();
68
Componentes Visuais

label.setTextColor(0xff000000 + red * 0x10000
+ green * 0x100 + blue);
}

@Override

public void onStartTrackingTouch(SeekBar
seekBar) {}

@Override

public void onStopTrackingTouch(SeekBar
seekBar) {}
}

com/apk/res/android




android:id=@+id/frameLayout>

<TextView
android:text=ALTERANDO A COR
android:textSize=20px
android:gravity=center_horizontal

/>

<SeekBar
android:id=@+id/seekBar_R



android:max=255

android:progress=127
/>

<SeekBar
android:id=@+id/seekBar_G



android:max=255

/>

<SeekBar
android:id=@+id/seekBar_B



android:max=255

/>
</LinearLayout>
69
Componentes Visuais
Figura 36.SeekBar - RGB
Neste exemplo, podemos observar a implementao uma ferramenta muito

comum em jogos, sites, sistemas operacionais, e diversos outros aplicativos.
Temos trs SeekBars, a primeira fazendo papel da cor Vermelha, a
segunda Verde, e a terceira Azul, conforme definimos a intensidade da
cor, movendo o indicador do SeekBar para esquerda(diminuindo), ou para
direita(aumentando), visualizamos o resultado sendo refletido no texto
ALTERANDO COR.
No arquivo de layout, definimos qual o valor mximo que nosso
SeekBar vai ter e a posio inicial dos indicadores do SeekBar. Na
nossa classe, implementamos a interface OnSeekBarChangeListener
para tratar os eventos gerados por esta view. Ao implementarmos
essa interface, aparecem trs mtodos para serem implementados,
70
Componentes Visuais
onStartTrackingTouch, onStopTrackingTouch, onProgressChanged,

como o prprio nome de cada um diz, sero chamados ao iniciar um
evento no SeekBar, ao progresso do SeekBar, e ao parar um evento,
respectivamente.
No nosso caso nos interessa apenas implementar o mtodo
onProgressChanged, onde cada vez que o indicador se mexer, chamamos
o mtodo updateTextColor, que criamos para pegar os valores dos
SeekBars e fazer uma conta com valores hexadecimais j conhecidos
que definem as cores, e assim defin-las como cor do TextView.
5.2 Herana de propriedades

Em vrios momentos, voc pode reparar que nos referimos aos
componentes que adicionamos a tela como view. Isso porque a
grande maioria das classes estende a classe View, que responsvel
por agrupar os componentes na tela. Toda subclasse de View, deve
implementar o mtodo onDraw, que o responsvel por desenhar os
elementos na tela do Android.
5.3 SeekBar e ToggleButton

Neste exemplo, faremos um exemplo semelhante ao anterior, mas
com um novo componente, o ToggleButton. Esse tipo de boto muito
comum nas aplicaes Android, onde usado para ativar/desativar
algum recurso do aplicativo.
71
Componentes Visuais
OnClickListener, OnSeekBarChangeListener {

private ToggleButton tButton;

private SeekBar seekBar;
@Override


setContentView(R.layout.toogle_
button);

id.label);

tButton = (ToggleButton) findViewById(R.
id.toggleBt);

tButton.setOnClickListener(this);

seekBar = (SeekBar) findViewById(R.
id.seekBar_R);

seekBar.setOnSeekBarChangeListener(th
is);

updateTextColor();
}

@Override

if(v == tButton){
if(seekBar.isEnabled()){
seekBar.setEnabled(false);

}else{
seekBar.setEnabled(true);
}
}
}

@Override

public void onProgressChanged(SeekBar seekBar,
int progress,boolean fromUser) {
updateTextColor();
}

int seekR = seekBar.getProgress();
label.setTextColor(0xff000000 + seekR *
0x10000 + 0 * 0x100 + 0);
}
72
Componentes Visuais

@Override

seekBar) { }

@Override

seekBar) {}
}
com/apk/res/android
>
<TextView
android:text=MUDANDO A COR


/>

<SeekBar




android:max=255

android:progress=0
/>
<ToggleButton

android:id=@+id/toggleBt




/>
</LinearLayout>
73
Componentes Visuais
Figura 37.ToggleButton
Neste exemplo, s podemos utilizar o recurso do SeekBar se o nosso

ToggleButton est desabilitado.
5.4 Exerccio Desabilitando ToggleButton

utilizando o SeekBar
Usando o mesmo exemplo anterior, quando o progress do SeekBar
chegar a 0, devemos desabilitar o ToggleButton.
74
Componentes Visuais
5.5 CheckBox
Com a mesma idia do exemplo anterior, vamos utilizar dessa vez,
outro componente muito utilizado em diversos aplicativos, o CheckBox,
OnSeekBarChangeListener, OnCheckedChangeListener {

private CheckBox checkBox;

private SeekBar seekBar;
@Override


setContentView(R.layout.check_box);

id.label);

seekBar = (SeekBar) findViewById(R.
id.seekBar_R);

seekBar.setOnSeekBarChangeListener(th
is);

checkBox = (CheckBox) findViewById(R.
id.checkBox);

checkBox.setOnCheckedChangeListener(th
is);
}

@Override

public void onProgressChanged(SeekBar seekBar,
int progress,boolean fromUser) {
updateTextColor();
}

int seekR = seekBar.getProgress();
label.setTextColor(0xff000000 + seekR *
0x10000 + 0 * 0x100 + 0);
}

@Override

public void onCheckedChanged(CompoundButton
buttonView, boolean isChecked) {
if(buttonView == checkBox && isChecked){
seekBar.setEnabled(true);
}else{
75
Componentes Visuais
seekBar.setEnabled(false);
}
}

@Override

seekBar) { }

@Override

seekBar) {}
}
com/apk/res/android
>
<TextView


android:text=MUDANDO A COR

/>

<SeekBar
android:max=255
android:progress=0
/>

<CheckBox
android:id=@+id/checkBox
android:text=Ativar SeekBar
android:checked=true

/>
</LinearLayout>
76
Componentes Visuais
Figura 38.CheckBox
Nesse exemplo, criamos um CheckBox no arquivo.xml e definimos seu

status inicial como checado. Em nossa classe, fazemos ela implementar
a interface OnCheckedChangeListener, e implementamos os mtodos
necessrios.
Cada vez que ocorrer um evento no nosso CheckBox, tratamos dentro
do mtodo onCheckedChanged, onde habilitamos ou desabilitamos o
SeekBar, que o objetivo desse exemplo.
77
Componentes Visuais
5.6 Visible, Invisible e Gone

Utilizando o mesmo exemplo anterior, vamos mudar apenas a
implementao do mtodo onCheckedChanged, onde ao invs
de desabilitarmos o SeekBar, vamos escond-lo. Abaixo segue a
implementao do mtodo, o restante do cdigo continua igual.
@Override
// seekBar.setEnabled(true);
seekBar.setVisibility(View.
VISIBLE);
}else{
// seekBar.setEnabled(false);
seekBar.setVisibility(View.
INVISIBLE);
}
}
Figura 39.VISIBLE e INVISIBLE
78
Componentes Visuais
Por padro, todos os componentes ao serem criados possuem a

propriedade visible habilitada, e quando queremos esconder alguma
view, mudamos seu status para invisible, ou para gone. Diferente de
invisible, quando utilizamos gone, o espao que o componente ocupa
na tela tambm desaparece, o que em alguns casos pode causar um
@Override

seekBar.setVisibility(View.VISIBLE);
}else{
seekBar.setVisibility(View.GONE);
}
}
reposicionamento dos componentes na tela.

Vamos mudar novamente a implementao do mtodo anterior para
receber a propriedade gone e ver o resultado.
79
Componentes Visuais
Figura 40.VISIBLE e GONE
Podemos observer que ao desmarcarmos o CheckBox, nosso SeekBar

removido da tela e o CheckBox ocupa seu lugar na tela, ao contrrio
do invisible, que removeu o SeekBar mas manteve o espao vazio na
tela.
80
Componentes Visuais
5.7 ImageView
O ImageView, utilizado quando queremos adicionar uma imagem na
tela, como por exemplo:
<ImageView

Agora vamos inserir a mesma imagem usando a API do Android.

/>

@Override
te);

LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);
layout.setLayoutParams(new
LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT));

ImageView image = new ImageView(this);
image.setImageResource(R.drawable.toad);
layout.addView(image);

setContentView(layout);

}
}
81
Componentes Visuais
Figura 41.ImageView API do Android
Neste exemplo, utilizamoa a classe ImageView para inserir uma imagem na

tela.
Observe que quando criamos uma instncia da classe ImageView, usamos
o mtodo setImageResource e indicamos qual imagem queremos inserir,
no nosso caso, a imagem toad.png, localizada na pasta /res/drawable/ do
nosso projeto.
82
Componentes Visuais
5.8 App Minhas Fotos

Utilizando alguns dos conceitos que aprendemos at agora, vamos
implementar uma galeria de imagens, onde podemos avanar e
retroceder entre as imagens de nossa galeria.Para isso, vamos criar um
novo projeto Android, com o nome MinhasFotos, baseado na verso
2.3 do Android. Crie uma activity chamada Main.
O arquivo de layout utilizado neste exemplo pode ser visualizado a
seguir:

com/apk/res/android
>
<LinearLayout
android:layout_height=250px

>
<ImageView


android:id=@+id/imagem

android:src=@drawable/icon

/>
</LinearLayout>
<LinearLayout
android:layout_gravity=center_
horizontal|bottom

>
<Button

android:id=@+id/btVoltar

android:text=Voltar

android:layout_width=80px

83
Componentes Visuais
/>
<Button

android:id=@+id/btAvancar

android:text=Avanar

android:layout_width=80px

/>
</LinearLayout>
</LinearLayout>
OnClickListener{

private int idx = 0;

private Button btVoltar;

private Button btAvancar;

private int[] imagens;

private ImageView imagem;
@Override
imagens = new int []{R.drawable.img_1,R.

drawable.img_2,R.drawable.img_3,R.drawable.img_4,R.
drawable.img_5,R.drawable.img_6};
imagem = (ImageView) findViewById(R.
id.imagem);
btVoltar = (Button) findViewById(R.
id.btVoltar);
btVoltar.setOnClickListener(this);
btAvancar = (Button) findViewById(R.
id.btAvancar);
btAvancar.setOnClickListener(this);
}
updateList();

private void updateList() {
imagem.setImageResource(imagens[idx]);
}

@Override

public void onClick(View view) {
if(view == btVoltar){
if(idx == 0){
idx = 6;
84
Componentes Visuais
}
idx--;
updateList();
}else if(view == btAvancar){
if(idx == 5){
idx = -1;
}
idx++;
updateList();
}
}
}
Figura 42.App Minhas Fotos
Nesse exemplo, criamos um array com os ids das imagens que

deixamos na pasta /res/drawable/, e conforme clicamos em algum dos
botes, implementamos a logica necessaria para trocar a imagem de
visualizao.
85
Componentes Visuais
5.9 Exerccio Imagens com alpha

Usando o projeto MinhasFotos, vamos implementar um SeekBar que
altere a transparncia da imagem que temos selecionada na tela. Se
tiver alguma dificuldade, uma boa hora para pesquisar solues na
documentao do Android (http://developer.android.com/index.html),
ou pelos diversos recursos que a internet nos disponibiliza.
5.10 EditText e Teclado Virtual

EditText so as famosas caixas de texto, presentes na maioria dos
sistemas, em qualquer plataforma que seja.
Quando clicamos em um campo de texto, como o EditText, por
exemplo, o Android entende que queremos inserir algum texto nesse
campo e automaticamente ele sobe um teclado virtual no estilo
QWERTY.
Alguns aparelhos com o sistema operacional Android possuem
teclado fsico, trazendo para o usurio uma segunda opo de
digitao e conforto na utilizao do device.
O que iremos fazer agora uma tela de login, onde informamos
o usurio e senha. No campo de usurio, vamos aceitar valores
alfanumricos, e no campo de senha apenas nmeros e no mximo 6
caracteres.
Nossa classe apenas ter a definio do layout que vamos utilizar.
86
Componentes Visuais

@Override

te);

setContentView(R.layout.
main);

}
}

com/apk/res/android
>

<TextView

android:text=Login
/>
<EditText
android:singleLine=true
android:maxLength=20
/>
<TextView

android:text=Senha
/>
<EditText
android:id=@+id/textSenha
android:maxLength=6
android:password=true
android:phoneNumber=true
android:inputType=number

87
Componentes Visuais
/>
<Button
android:id=@+id/btLogin
android:text=Login
/>
</LinearLayout>
No arquivo de layout que definimos todas as propriedades/regras que

precisamos ter
unica
android:maxLength=6
android:password=true
digitar valores
android:phoneNumber=true
numrico
android:inputType=number
de 0 a 9
// campo texto de linha

// maximo 6 caracteres
// esconde caracteres ao
// mostra apenas teclado
// aceita apenas valores
Tanto no emulador quanto no device, ao tocarmos no boto voltar do

teclado fisico do aparelho, faz com que o teclado virtual seja fechado.
No emulador, se usarmos a tecla ESC do computador, o teclado
virtual tambem fechado.
Uma funcionalidade interessante, fazer com que ao usurio tocar no
layout da aplicao, o teclado seja escondido novamente.
Para isso, vamos colocar um atributo id no nosso LinearLayout, do
arquivo de layout, e tratar os eventos que toque que nosso layout
sofrer.
88
Componentes Visuais
com/apk/res/android
android:id=@+id/layout
// resto do cdigo continua o mesmo
OnTouchListener{
private LinearLayout layout;
@Override


layout = (LinearLayout) findViewById(R.
id.layout);
layout.setOnTouchListener(this);

}
@Override
public boolean onTouch(View v, MotionEvent
event) {
fecharTecladoVirtual(this,layout);

return false;
}

public void fecharTecladoVirtual(Context
context, View view) {

InputMethodManager imm = (InputMethodManager)
context.getSystemService(Context.INPUT_METHOD_
SERVICE);

if(imm != null) {

imm.hideSoftInputFromWindow(view.
getWindowToken(), 0);
}
}
}
89
Componentes Visuais
Observe que nossa classe implementa a classe OnTouchListener, e

tratamos os eventos de toque do nosso layout. Cada vez que ocorre
um toque no layout, chamado o mtodo fecharTecladoVirtual, onde
avisamos ao sistema operacional do Android que iremos precisar de um
servio do sistema, que fechar o teclado virtual.
5.11 Exerccio Buscando imagens

Utilizando nosso projeto MinhasFotos e nosso exemplo anterior,
vamos criar uma tela com um campo onde digitamos o nome da imagem
que desejamos, e ao clicar no layout, ou em um boto buscar, a
imagem desejada retornada.
5.12 Spinner
No Android, os famosos ComboBox, so chamados de Spinner. Sempre
que lidamos com este componente, estaremos trabalhando juntamente
com um conjunto de valores que vo popular esse combo. Abaixo,
vamos definir nosso Spinner no arquivo de layout.
com/apk/res/android
>
<Spinner
android:id=@+id/combo
android:layout_width=match_parent
90
Componentes Visuais
/>
</LinearLayout>
OnItemSelectedListener{

private ArrayList<String> lista;

private Spinner combo;
@Override

te);


criarLista();
criarCombo();

private void criarLista(){
lista = new ArrayList<String>();
lista.add(Android);
lista.add(IPhone);
lista.add(J2ME);
lista.add(BlackBerry);
lista.add(WindowsPhone7);
}

private void criarCombo() {
combo = (Spinner) findViewById(R.
id.combo);
combo.setOnItemSelectedListener(this);

ArrayAdapter<CharSequence> adapter = new
ArrayAdapter<CharSequence>(this, android.R.layout.
simple_spinner_item);
adapter.setDropDownViewResource(android.
R.layout.simple_spinner_dropdown_item);
for (String s : lista) {
adapter.add(s);
}
combo.setAdapter(adapter);
combo.setSelection(0);
}

@Override

public void onItemSelected(AdapterView<?>
adapter, View view, int position,long id) {

String plataformaEscolhida = combo.
91
Componentes Visuais
getItemAtPosition(position).toString();
Toast.makeText(this,
plataformaEscolhida, Toast.LENGTH_LONG).show();
}

@Override

public void onNothingSelected(AdapterView<?>
arg0) {
}
}
Figura 43.Spinner com valores e exibio da opo ecolhida
Neste exemplo, criamos um mtodo que vai apenas popular uma lista
com os valores que sero usados no Spinner. E tambm criamos outro
mtodo que responsvel por criar um Spinner. Para isso, precisamos
definir um adapter, que o objeto que possui os seus valores, e
tambm o recurso que ele vai usar para mostrar os itens na tela.
92
Componentes Visuais
Podemos observar que usamos um recurso nativo do android, uma vez que
mencionamos o pacote android.R.layout.simple_spinner_
dropdown_item. Essa
uma das formas de mostrar o contedo na tela. Feito isso, percorremos
nossa lista criada anteriormente e adicionamos os valores no adapter.
Por ltimo, implementamos uma classe responsvel por verificar o item
selecionado no Spinner. E no mtodo que chamado ao trocar o valor do
spinner, mostramos na tela em um simples alerta, a opo selecionada.
93
Componentes Visuais
5.13 Exercicio - Trocando imagens com Spinner

Implementar 2 combos, um ao lado do outro. Ao trocar o nome do
combo, a imagem respectiva tambem dever ser trocada.
Lembre-se, o combo da esquerda, influencia na imagem da esquerda, e
o combo da direita influencia na imagem da direita.
Figura 44.Exercicio Spinner com imagens
94
Componentes Visuais
5.14 ScroolView
Quanto o contedo que queremos inserir na tela muito maior do
que o espao disponvel, usamos uma view chamada ScroolView, que
responsvel for fazer a rolagem do contedo na tela do device.

com/apk/res/android
>

<ScrollView

android:id=@+id/scrollView1


android:layout_height=wrap_content>

<LinearLayout

xmlns:android=http://schemas.


android:layout_width=wrap_
content



>
</LinearLayout>
</ScrollView>
</LinearLayout>
95
Componentes Visuais

@Override

te);


LinearLayout layout = (LinearLayout)
findViewById(R.id.layout);

for (int i = 0; i < 100; i++) {
TextView text = new
TextView(this);
text.setText(Texto + i);
layout.addView(text);

}

}
}
Neste exemplo, definimos um ScroolView no nosso arquivo de layout, e

dentro dele criamos um outro LinearLayout, onde ser montado a tela.
Tudo que estiver dentro do ScroolView receber rolagem.
Na nossa classe, criamos um lao de repetio para inserir labels no
nosso layout de forma com que passe do tamanho da tela e possamos
perceber a rolagem.
96
Componentes Visuais
Figura 45.Exemplo de ScroolView
Tambem temos a opo de utilizar o ScroolView na horizontal. Para que

esse mesmo exemplo funcione na horizontal, devemos mudar o arquivo
de layout para ter o seguinte contedo. (Nossa classe continua da
mesma forma como criamos anteriormente).
97
Componentes Visuais
com/apk/res/android
>

<HorizontalScrollView

android:id=@+id/scrollView1



>

<LinearLayout

xmlns:android=http://schemas.


android:layout_width=wrap_
content



>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
Figura 46.Exemplo de HorizontalScroolView
98
Componentes Visuais
5.15 ProgressBar
O ProgreesBar utilizado quando queremos mostrar para o usurio que
algum processamento est acontecendo no aplicativo. Geralmente
uma busca na internet, ou qualquer processamento demorado.
com/apk/res/android
>
<ProgressBar
android:id=@+id/progressBar
/>
<Button
android:text=Start
android:id=@+id/btStart
/>
<Button
android:text=Stop
android:id=@+id/btStop
/>

</LinearLayout>
99
Componentes Visuais
OnClickListener{

private Button btStart;

private Button btStop;
private ProgressBar progressBar;
@Override

te);


progressBar = (ProgressBar)
findViewById(R.id.progressBar);

btStart = (Button) findViewById(R.
id.btStart);

btStart.setOnClickListener(this);

btStop = (Button) findViewById(R.
id.btStop);

btStop.setOnClickListener(this);

}

@Override

if(v == btStart){
progressBar.setVisibility(View.
VISIBLE);
}else if(v == btStop){
progressBar.setVisibility(View.
INVISIBLE);
}

}
}
100
Componentes Visuais
Figura 47.Exemplo de ProgressBar
Neste exemplo, definimos no nosso arquivo de layout dois botes, que

so utilizados para startar e parar nosso ProgressBar.
Por padro, quando adicionamos o ProgressBar na aplicao, ele inicia
com animao. O que fazemos em nossa classe, capturar o evento do
boto que foi clicado e tornar visvel ou esconder o ProgressBar.
Na prtica, digamos que possumos uma tela onde temos uma lista de
imagens, e cada imagem dessa ser carregada da internet. Enquanto
nossa imagem no chega, definimos um ProgressBar como esse no lugar
de cada imagem, e quando finalmente tivermos a imagem que queremos,
tiramos o ProgressBar de cena e adicionamos nossa imagem.
Dessa forma, o usurio entende, que onde est o ProgressBar, vai
101
Componentes Visuais
acontecer alguma coisa, pois existe um processamento ocorrendo.

intuitivo.
5.16 ProgressDialog
Uma outra opo de mostrar para o usurio que algum processamento
est sendo feito pelo aplicativo, utilizar o ProgressDialog.
A vantagem dele que podemos informar ao usurio o qu esta
acontecendo. O ProgressDialog representado por uma caixa de alerta,
e dentro dessa caixa podemos escrever uma mensagem que desejamos
exibir para o usurio.
Para este exemplo, voc vai precisar definir um arquivo de layout, da
forma como preferir, com um boto e um id para este. Abaixo segue a
implementao da classe.
102
Componentes Visuais
OnClickListener{

private Button btStart;

private static ProgressDialog progress;
@Override

te);


progress = new ProgressDialog(this);

progress.setMessage(Processando
solicitao...);

btStart = (Button) findViewById(R.
id.btStart);

btStart.setOnClickListener(this);

}

@Override

if(v == btStart){
progress.show();
}
}
}
103
Componentes Visuais
Figura 48.Exemplo de ProgressDialog
Em nossa classe, criamos nosso ProgressDialog e definimos a mensagem

que gostaramos que aparecesse para o usurio, e quando clicamos no
nosso boto, exibimos o ProgressBar. Para que ele seja encerrado, basta
teclarmos ESC no computador, ou o boto Voltar do emulador.
Em aplicaes que utilizam uma Thread para realizar algum
processamento demorado esta view frequentemente utilizada. Desta
forma o ProgressBar iniciado antes de iniciar a thread, e encerrado
quando a thread termina o seu servio. Para fechar o ProgressBar via API
utilize o mtodo dismiss().
104
Componentes Visuais
5.17 AlertDialog
Como o prprio nome j diz, o AlertDialog, tem a idia de alertar/
informar o usurio de que aconteceu alguma coisa no aplicativo. Para
demonstrar, vamos voltar em um exemplo que criamos anteriormente
de uma tela de Login, e vamos acrescentar a validao nos campos de
usurio e senha.
Nosso arquivo de layout continuar o mesmo, abaixo segue a
implementao da classe. (exemplo na prxima pgina)

OnClickListener{

private Button btLogin;

private EditText textLogin;
private EditText textSenha;
@Override

te);

setContentView(R.layout.ex_login);

textLogin = (EditText) findViewById(R.
id.textLogin);

textSenha = (EditText) findViewById(R.
id.textSenha);

btLogin = (Button) findViewById(R.
id.btEntrar);

btLogin.setOnClickListener(this);
}

@Override

if(v == btLogin){
String login = textLogin.
getText().toString();
String senha = textSenha.
getText().toString();
105
Componentes Visuais

if(isEmpty(login)){
alert(this, Informe o
login!);
return;
}else if(isEmpty(senha)){
alert(this, Informe a
senha!);
return;
}
alert(this, Login realizado com
sucesso!!!);
}
}

public void alert(Activity context,String msg)
{

AlertDialog dialog = new AlertDialog.
Builder(context)
.setTitle(Informao!!!)
.setMessage(msg)
.create();
dialog.setButton(OK, new
DialogInterface.OnClickListener() {

public void
onClick(DialogInterface dialog, int which) {

return;

} });
dialog.show();
}

public boolean isEmpty(String s) {
return s == null || s.trim().length() ==
0;
}
}
106
Componentes Visuais
Figura 49.Alert
Podemos observar que criamos um mtodo alert, que recebe nossa

tela atual, e uma String, que a mensagem que queremos exibir como
contedo no alert.
Nesse mtodo, definimos algumas propriedades para que nosso Alert
seja exibido com sucesso. Observe que adicionamos um boto OK
dentro desse Alert, e quando pressionado no realiza nenhuma
tarefa. Deixamos visvel apenas para que garanta que o usurio leu a
mensagem.
107
Componentes Visuais
5.18 Alerta de Confirmao

Muitas veses, apenas mostrar ao usurio que aconteceu algo no
aplicativo no o bastante. Dependendo do que pode ter ocorrido,
precisamos dar opes ao usurio, para que ele possa tomar uma
deciso.
Ento vamos melhorar o exemplo explorando um pouco mais da classe
AlertDialog.
com/apk/res/android
>
<TextView
android:text=Aperte o BOTAO 1
/>
<Button
android:text=BOTAO 1
android:id=@+id/bt1
/>
<Button
android:text=BOTAO 2
android:id=@+id/bt2
/>
</LinearLayout>
108
Componentes Visuais
OnClickListener{

private Button bt1;

private Button bt2;
@Override

te);


bt1 = (Button) findViewById(R.id.bt1);

bt1.setOnClickListener(this);

bt2 = (Button) findViewById(R.id.bt2);

bt2.

}

@Override

if(v == bt1){
alert(this,Parabns, boto
correto! O que deseja fazer agora?);
}else if(v == bt2){
alert(this,Tsc Tsc... boto
errado!);
}
}

109
Componentes Visuais

public void alert(final Activity context,String
msg){

AlertDialog.Builder dialog = new
AlertDialog.Builder(context);
dialog.setTitle(Informao);
dialog.setMessage(msg);
dialog.setPositiveButton(Tentar
Novamente, new DialogInterface.OnClickListener() {

public void

//no faz nada por padro,
apenas encerra o dialog

return;

} });
dialog.setNegativeButton(Encerrar
Aplicativo, new DialogInterface.OnClickListener() {

public void

context.finish();

return;

} });
dialog.show();
}
}
110
Componentes Visuais
Figura 50.Alerta de Confirmao
Nesse exemplo, criamos uma tela com dois botes, e induzimos o

usurio a clicar no boto 1.
Caso ele clique realmente no boto 1, mostramos a caixa de dilogo
dando os parabns por ter acertado o boto e solicitando o que deseja
fazer a seguir. Caso escolha o boto errado, mostramos uma mensagem
informando o erro e damos as opes para ele tentar novamente ou
encerrar o aplicativo.
111
Componentes Visuais
5.19 ListView
Muito utilizado quando queremos representar uma listagem de itens,
que quando clicados, levam a detalhes do item, ou outras telas, como
se fosse um menu.
Quando trabalhamos com ListView, muito comum criarmos uma subclasse de BaseAdapter, que por sua vez, funciona como a estrutura do
nosso ListView.
Para esse exemplo, vamos criar uma classe que herda de BaseAdapter,
fazendo isso, precisaremos implementar uma serie de mtodos. Abaixo
segue o cdigo da nossa classe.
public class ListStringsAdapter extends BaseAdapter
{

private List<String> listString;

private LayoutInflater mInflater;

public ListStringsAdapter(Activity context,
List<String> listString) {
this.listString = listString;
mInflater = (LayoutInflater) context.
getSystemService((Context.LAYOUT_INFLATER_SERVICE));
}

@Override

public int getCount() {
return listString.size();
}

@Override

public Object getItem(int position) {
return listString.get(position);
}

@Override

public long getItemId(int position) {
return position;
}

//continua...
112
Componentes Visuais
// ...

@Override

public View getView(int posicao, View view,
ViewGroup parent) {
ViewHolder holder;
if (view == null) {
view = mInflater.inflate(R.layout.
list_string_adapter, null);
holder = new ViewHolder();
holder.text = (TextView) view.
findViewById(R.id.tText);
view.setTag(holder);
} else {

holder = (ViewHolder) view.
getTag();
}

String string = listString.get(posicao);
holder.text.setText(string);
return view;
}

static class ViewHolder {
TextView text;
}
}
113
Componentes Visuais
Observe que neste ultimo mtodo definimos um layout para a view

que ser responsvel por mostrar o contedo de cada linha do nosso
ListView na tela. Segue a implementao desse arquivod e layout.
com/apk/res/android
>

<TextView

android:id=@+id/tText
android:text=
android:textStyle=bold
android:layout_marginTop=10dip

/>
</LinearLayout>
Feito isso temos nosso adapter pronto para ser utilizado no nosso
ListView. Segue implementao do arquivo de layout da nossa tela
principal, onde definimos a existncia do nosso ListView.

com/apk/res/android
>

<ListView
android:id=@+id/listview

/>

</LinearLayout>
114
Componentes Visuais
OnItemClickListener{

private ListView listview;

private List<String> listString;

@Override

te);


listString = new ArrayList<String>();

listString.add(Item 1);










listview = (ListView) findViewById(R.
id.listview);
listview.setOnItemClickListener(this);
listview.setAdapter(new
ListStringsAdapter(this, listString));
}

@Override

public void onItemClick(AdapterView<?>
adapter, View view, int pos, long id) {
Toast.makeText(this, listview.
getItemAtPosition(pos).toString(), Toast.LENGTH_
LONG).show();
}
}
115
Componentes Visuais
Figura 51 ListView
Em nossa classe, podemos perceber a criao de uma lista de Strings, que

serviram para popular o ListStringAdapter, que serviu de base para o nosso
ListView.
Tambm implementamos o mtodo que trata eventos de toque em nossa
lista, e quando este ocorrer, exibimos um alerta na tela indicando qual
item do ListView foi selecionado.
116
Componentes Visuais
5.20 ListView com Imagens

Agora podemos melhorar nosso ListView e acrescentar imagens junto a
ele, o que uma prtica muito utilizada em aplicativos mobile. Para isso,
vamos criar uma classe que vai representar um item do nosso ListView,
que ser composto por uma imagem e um nome/descritivo.
public class Item {

public String nome;

public int imagem;

public Item(String nome, int imagem){
this.nome = nome;
this.imagem = imagem;
}
}
Abaixo segue a nova implementao da nossa classe adapter.

public class ListItensAdapter extends BaseAdapter {

private List<Item> listItem;

private LayoutInflater mInflater;

public ListItensAdapter(Activity context,
List<Item> listString) {
this.listItem = listString;
mInflater = (LayoutInflater) context.
getSystemService((Context.LAYOUT_INFLATER_SERVICE));
}

@Override

public int getCount() {
return listItem.size();
}

@Override

public Item getItem(int position) {
return listItem.get(position);
}

@Override
117
Componentes Visuais

public long getItemId(int position) {
return position;
}

//continua...

// ...

@Override

public View getView(int posicao, View view,
ViewGroup parent) {
ViewHolder holder;
if (view == null) {
view = mInflater.inflate(R.layout.
list_item_adapter, null);
holder = new ViewHolder();
holder.text = (TextView) view.
findViewById(R.id.tText);
holder.imagem = (ImageView) view.
findViewById(R.id.img);
view.setTag(holder);
} else {

holder = (ViewHolder) view.
getTag();
}

Item item = listItem.get(posicao);
holder.text.setText(item.nome);
holder.imagem.setImageResource(item.
imagem);
return view;
}

TextView text;
ImageView imagem;
}
}
Podemos observar que ao invs de termos uma lista de String no nosso

adapter, temos uma lista de Item, que por sua vez possui um atributo
nome, e outro imagem. Estes itens so responsveis por popular nossa
lista.
118
Componentes Visuais
Observe que acrescentamos um atributo do tipo ImageView na inner

class ViewHolder, ele quem usamos para inserir a imagem de cada um
dos itens de nosso ListView, assim como o atributo text serve como
nome/descritivo de cada um dos itens tambem.
Continuamos abaixo com o restante da implementao do exemplo.

com/apk/res/android
>

<ListView
android:id=@+id/listview

/>
</LinearLayout>
OnItemClickListener {



@Override

te);


listItem = new ArrayList<Item>();

listItem.add(new Item(Toad,R.drawable.
toad));

listItem.add(new Item(Enemy,R.
drawable.enemy));

listItem.add(new Item(Flamer,R.
drawable.flamer));

listItem.add(new Item(Ghost,R.
drawable.ghost));
119
Componentes Visuais
up));
listItem.add(new Item(1UP,R.drawable.
toad));

drawable.enemy));

drawable.flamer));

drawable.ghost));

up));

id.listview);
ListItensAdapter(this, listItem));

}

@Override

adapter, View arg1, int pos, long arg3) {

Item item = listItem.get(pos);
Toast.makeText(this, item.nome, Toast.
LENGTH_LONG).show();
}
}
120
Componentes Visuais
Figura 52 ListView com imagens
5.21 ListView com LongPress

Em aplicaes para Android, muito comum a utilizao de um
recurso denominado LongPress, ou seja, quando mantemos uma view da
nossa tela pressionada por dois ou mais segundos, mostrada alguma
informao adicional ou aes possveis referente a view selecionada.
No nosso caso, vamos implementar a funcionalidade de excluir um item
da lista ao mater ele pressionado. Para esse exemplo, basta alterarmos
a classe Main do exerccio anterior para o seguinte cdigo.
121
Componentes Visuais
OnItemClickListener, OnItemLongClickListener {



@Override

te);



toad));

drawable.enemy));

drawable.flamer));

drawable.ghost));

up));

toad));

drawable.enemy));

drawable.flamer));

drawable.ghost));

up));

id.listview);
listview.setOnItemLongClickListener(th
is);
}

@Override


}
122
Componentes Visuais

@Override

public boolean onItemLongClick(AdapterView<?>
arg0, View arg1, int pos,long arg3) {
alert(this, pos);
return true;
}

// continua....

// ....

public void alert(final Activity context,final
int indexItem){

Builder(context)
.setTitle(Informao)
.setMessage(Deseja excluir o item
selecionado?)
.create();
dialog.setButton(Sim, new

public void

//removo o item da lista e passo
a lista atualizada para o adapter

listItem.remove(indexItem);

ListItensAdapter(context, listItem));

return;

} });
dialog.setButton2(No, new

public void

//no faz nada

return;

} });
dialog.show();
}
}
123
Componentes Visuais
Observe que agora nossa classe implementa a classe

OnItemLongClickListener, e cada long press que um item do nosso
ListView tiver, ser tratado dentro do mtodo onItemLongClick, onde
mostraremos um alerta de confirmao se o usurio deseja mesmo
exlcuir o item selecionado. Se a resposta for positiva, removemos
o item da lista e atualizamos o nosso adapter, caso negativo, no
fazemos nada.
Abaixo seguem prints mostrando a excluso de um item da nossa
listagem, e logo aps excluso, atualizao da nossa lista, com os itens

restantes.
Figura 53 ListView + LongPress
124
Componentes Visuais
5.22 Editando dados do ListView

Utilizando o mesmo exemplo anterior, faremos um LongPress em nosso
ListView, onde ao invs de excluir o elemento selecionado, vamos
editar o nome de exibio.
O Arquivo de layout ser mantido o mesmo, a seguir seque a
implementao da nossa classe.
public class EditListViewImgLongPress extends
Activity implements OnItemClickListener,
OnItemLongClickListener {



@Override
protected void onCreate(Bundle savedInstanceState)
{


setContentView(R.layout.list_view_img);


toad));

listItem.add(new Item(Enemy,R.drawable.
enemy));

listItem.add(new Item(Flamer,R.drawable.
flamer));

listItem.add(new Item(Ghost,R.drawable.
ghost));

up));

toad));

listItem.add(new Item(Enemy,R.drawable.
enemy));

listItem.add(new Item(Flamer,R.drawable.
flamer));

listItem.add(new Item(Ghost,R.drawable.
ghost));

up));

id.listview);
125
Componentes Visuais
listview.setOnItemLongClickListener(th
is);
}

@Override


}

@Override

public boolean onItemLongClick(AdapterView<?>
arg0, View arg1, int pos,long arg3) {
alert(this, pos);
return true;
}

public void alert(final Activity context,final
int indexItem){

Builder(context)
.setTitle(Informao)
.setMessage(Deseja editar o item
selecionado?)
.create();
dialog.setButton(Sim, new
public void
onClick(DialogInterface dialog, int index) {
alertEdit(context, indexItem).
show();

return;

} });
dialog.setButton2(No, new

public void

//no faz nada

return;

} });
dialog.show();
}

public AlertDialog alertEdit(final Activity
context,final int indexItenFirstClick) {
126
Componentes Visuais

LayoutInflater factory = LayoutInflater.
from(context);
final View textEntryView = factory.
inflate(R.layout.alert_dialog_text_entry, null);
return new AlertDialog.Builder(context)
.setTitle(Edicao)
.setView(textEntryView)
.setPositiveButton(Salvar,new

public void onClick(DialogInterface dialog,
int index) {

EditText tNome = (EditText)
textEntryView.findViewById(R.id.xxx);

Editable text = tNome.getText();

String t = text.toString();

Item i = listItem.
get(indexItenFirstClick);
i.nome = t;

listItem.remove(indexItenFirstClick);
listItem.add(indexItenFirstClick, i);
listview.setAdapter(new ListItensAdapter
(context,listItem));
}
}).setNegativeButton(Cancelar,

new DialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog,
int whichButton) {
}
}).create();
}
Pode-se observar neste exemplo, a criao de um alerta com um campo

texto, onde o usuario pode entrar com um novo nome para o item da
lista.
Quando usamos o mtodos findViewById(), dizemos de qual layout
queremos a view, que no nosso caso, do alert.
127
Componentes Visuais
Figura 54 Editando item do ListView
128
Captulo
Telas
6.1 StartActivity
Como o nome j diz, vamos fazer um exemplo de como chamar uma
outra tela de nossa aplicao a partir da tela atual.
Para isso, criamos duas telas, uma com um boto Trocar Tela e a
segunda tela com o boto Voltar, cada uma com um arquivo de
layout que diferencie uma tela da outra, e assim seja possvel visualizar
a troca de telas. (Uma simples cor de fundo resolve).
Abaixo segue o cdigo da primeira tela.
com/apk/res/android
android:background=@color/amarelo
>
<TextView
android:text=Tela 1
/>
<Button
android:text=Trocar Tela
android:id=@+id/btTrocarTela
/>
</LinearLayout>
OnClickListener{

private Button bt1;

@Override
130
Telas

te);


bt1 = (Button) findViewById(R.
id.btTrocarTela);

bt1.setOnClickListener(this);

}

@Override

if(v == bt1){
abrirTela(this,Tela2.class);
}
}

private void abrirTela(Activity
context,Class<?> clazz) {

Intent intent = new
Intent(context,clazz);
context.startActivity(intent);
}
}
Agora, o cdigo que define nossa segunda tela.

com/apk/res/android
>
<TextView
android:text=Tela 2
android:textColor=@color/amarelo
/>
<Button
android:text=Voltar
android:layout_gravity=center_horizontal />
</LinearLayout>
131
Telas
public class Tela2 extends Activity implements
OnClickListener{

@Override

te);

setContentView(R.layout.tela_dois);

id.btVoltar);

btVoltar.

}

@Override

if(v == btVoltar){

finish();
}
}
}
Figura 55.Trocando de Tela
132
Telas
Para que este exemplo funcione com sucesso, precisamos definir

no arquivo AndroidManifest.xml, a existncia dessa nossa nova tela
na aplicao. Este arquivo responsvel por definir uma srie de
parmetros para o Android, como por exemplo, as permisses que
nosso aplicativo precisa para funcionar corretamente, ponto de entrada
da aplicao, as Activities que fazem parte da aplicao, etc. Para mais
detalhes sobre o AndroidManifest.xml, acesse o site oficial do Android,
()
Devemos declarar nossa nova activity como indica a figura abaixo.
Figura 56 - Definindo uma nova Activity no AndroidManifest.xml
Ao executarmos este exemplo, ser exibida inicialmente a tela

com fundo amarelo, e ao clicarmos no boto Trocar Tela, somos
redirecionados para a segunda tela, com fundo azul.
133
Telas
Nessa segunda tela, se observarmos a implementao do mtodo

onClick, podemos identificar apenas uma chamada ao mtodo finish(),
que responsvel por fechar a activity atual, que no nosso caso a
segunda tela.
Quando chamamos o mtodo finish(), nossa activity encerrada
e retornamos para a tela em que nossa aplicao se encontrava
ateriormente.
Esse um bom exemplo para mostrar como o Android, trata suas
activities, utilizando o conceito de pilha, onde a ltima tela que
iniciamos, a primeira a sair da nossa visualizao.
6.2 StartActivity com Passagem de

Parmetros
Iniciar uma tela com valores que vieram da tela anterior um recurso
muito utilizado em aplicaes.
Digamos que voc informou seu usurio e senha para acessar um
aplicativo, e ao logar, voc redirecionado para uma tela com uma
mensagem de boas vindas, e seu login como a aplicao usa para se
comunicar com o usurio.
A seguir o cdigo da nossa primeira tela.
134
Telas
com/apk/res/android
>
<TextView
android:text=Login

/>
<EditText
/>
<Button
android:text=Login
android:id=@+id/btLogin
/>
</LinearLayout>
OnClickListener{

private Button btLogin;

private EditText textLogin;
@Override

te);


textLogin = (EditText) findViewById(R.
id.textLogin);

btLogin = (Button) findViewById(R.
id.btLogin);

btLogin.setOnClickListener(this);

}

@Override
135
Telas

if(v == btLogin){
abrirTela(this,TelaBoasVindas.
class);
}
}

private void abrirTela(Activity
context,Class<? extends Activity> clazz) {

Bundle param = new Bundle();

String login = textLogin.getText().
toString();
param.putString(login_key, login);

Intent intent = new
Intent(context,clazz);
intent.putExtras(param);
context.startActivity(intent);
}
}
Abaixo, segue a implementao da nossa segunda tela, lembrando que

precisamos declarar nossa nova activity no arquivo AndroidManifest.xml.
com/apk/res/android
>
<TextView
android:text=Login no informado!!!
android:id=@+id/labelLogin

android:paddingBottom=25dip
/>
<Button

android:text=Voltar
android:layout_gravity=center_horizontal />
</LinearLayout>
136
Telas
public class TelaBoasVindas extends Activity
implements OnClickListener{

@Override

te);

setContentView(R.layout.tela_boas_
vindas);

String login = (String) getIntent().
getSerializableExtra(login_key);

TextView textLogin = (TextView)
findViewById(R.id.labelLogin);

textLogin.setText(Bem vindo, + login
+ !);

id.btVoltar);

btVoltar.setOnClickListener(this);

}

@Override

if(v == btVoltar){

finish();
}
}
}
137
Telas
Figura 57 Passagem de paramretro entre telas
Observe que para passarmos parmetros para uma outra tela,

precisamos criar uma instncia da classe Bundle, que armazenar, na
forma de chave/valor a informao que precisamos, como se fosse uma
HashMap, comparado com o Java.
Aps criarmos nosso Bundle e adicionar informao a ele, (que no
nosso caso o login do usurio), adicionamos o prprio Bundle na nossa
Intent.
Quando nossa aplicao chega a tela que desejamos, pegamos a Intent
e o valor que guardamos no nosso Bundle da seguinte forma:
String login = (String) getIntent().getSerializableExtra(login_key);
Desta forma, podemos ler o parmetro login_key, e armazenar esse
138
Telas
valor em uma varivel, para depois montar a mensagem de boas viandas

ao usurio.
6.3 Exerccio Criando uma terceira tela

Tomando como base os exemplos de telas explicadas anteriormente,
adicione um boto na primeira e segunda tela, onde possivel clicar
nele e avanar diretamente para uma terceira tela, que tambm ser
criada por voc.
6.4 Ciclo de vida de uma Activity

Toda aplicao do Android, seja ela nativa ou desenvolvida por terceiros,
sempre vai possuir os mesmos estados possveis de uma activity, pois
todas as telas que existem nas aplicaes so activities.
importante compreender bem este ciclo para que uma aplicao
de grande porte possa aproveitar ao mximo o que o SO tende a nos
oferecer, j que est tudo pronto para ns desenvolvedores utilizar.
Basta apenas saber como, quando e onde utilizar.
Quando iniciamos uma activity, uma srie de mtodos so chamados,
e quando terminamos uma activity, outros mtodos so chamados. Na
prxima pgina segue exemplo de uma aplicao que mostra a chamada
desses mtodos.
139
Telas

private static final String TAG_LOG = ciclo_vida;
@Override
protected void onCreate(Bundle savedInstanceState) {



Log.i(TAG_LOG, onCreate());

}

@Override

protected void onStart() {
super.onStart();
Log.i(TAG_LOG, onStart());
}

@Override

protected void onRestart() {
super.onRestart();
Log.i(TAG_LOG, onRestart());
}

@Override

protected void onResume() {
super.onResume();
Log.i(TAG_LOG, onResume());
}

@Override

protected void onPause() {
super.onPause();
Log.i(TAG_LOG, onPause());
}

@Override

protected void onStop() {
super.onStop();
Log.i(TAG_LOG, onStop());
}

@Override

protected void onDestroy() {
super.onDestroy();
Log.i(TAG_LOG, onDestroy());
}
}
140
Telas
A nica funcionalidade desse cdigo imprimir no LogCat o nome

dos mtodos que so chamados quando entramos em cada um dos
mtodos que compe o ciclo de vida da activity. Ao iniciarmos nossa
aplicao, podemos ver o seguinte registro no LogCat:
Figura 58 Cliclo de vida de uma Activity - Iniciando
Nesse momento, nossa aplicao est aberta no emulador, quando

teclamos o ESC do computador ou o boto voltar o emulador, temos
o seguinte registro no LogCat:
Figura 59 Cliclo de vida de uma Activity - Encerrando
Desta forma, nossa aplicao foi encerrada e estamos na tela inical do

emulador no Android.
Esses recursos so muito teis quando nossa aplicao est em
141
Telas
um certo momento em que no podemos perder dados, utilizamos

estes mtodos para garantir um bom funcionamento do aplicativo
para tornando-o robusto, esses recursos so oferecidos pela prpria
plataforma.
O mtodo onCreate() chamado uma nica vez e portanto neste
mtodo que voc deve fazer a sua inicializao inicial.
Os mtodos onPause() e onResume() so muito teis para controlar o
estado de sua activity. Por exemplo, ao receber uma ligao o mtodo
onPause() ser chamado, permitindo com que voc libere recursos
(como por exemplo parar de monitorar o GPS), e depois ao voltar para
a sua aplicao o mtodo onResume() ser chamado, onde um bom
momento para voltar a monitorar o GPS.
Outro mtodo importante o onDestroy() que chamado um
momento antes de a activity ser destruda e eliminada de memria, e
pode ser utilizado para liberar os recursos utilizados.
A seguir podemos verificar a explicao dos mtodos mais importantes:
onCreate(Bundle) esse mtodo chamado apenas quando iniciamos a
tela, nele que precisamos definir qual o layout que nossa activity vai ter.
onStart() esse mtodo chamado aps o mtodo onCreate()
ou onRestart(), isso vai depender do estado em que a aplicao se
encontra, e s ser concludo com sucesso se existir um layout valido
para a activity. nesse mtodo que a tela comea a ficar visvel ao
usurio.
onRestart() quando nossa activity foi parada temporiamente e iniciada
142
Telas
novamente, esse mtodo chamado, de forma automtica, o onStart()

chamado logo em seguida.
onResume() sempre que o mtodo onStart() finalizado, esse mtodo
executa em seguida, deixando a activity no topo da pilha e pronta para
interagir com o usurio.
onPause() quando estamos em uma aplicao recebemos uma ligao
por exemplo, esse mtodo chamado, a fim de salvar o estado em
que nossa aplicao se econtrava, e assim que terminamos a ligao,
recuperamos o estado anterior da activity para que seja chamado o
mtodo onResume().
onStop() quando estamos em uma aplicao e resolvemos abrir uma
outra aplicao, esse mtodo chamado, e se desejarmos voltar a
aplicao anterior, o mtodo onRestart() ser chamado. Caso no
voltemos ao aplicativo anterior e o Android precise liberar recurso
de memria para algum processamento, automaticamente o mtodo
onDestroy() pode ser chamado.
onDestroy() esse mtodo o responsvel por remover nossa activity
da pilha de activities. Pode ser chamado por meio do mtodo finish(),
ou pelo prprio Android automaticamente, a fim de liberar recurso de
memria para outras aplicaes.
143
Captulo
Outros Containers
7.1 GridView
Semelhante ao ListView, esse tipo de view possibilita a visualizao dos
itens em forma de grade. Para este exemplo vamos definir um GridView
de 2 colunas.
com/apk/res/android



>
<GridView
android:id=@+id/gridView1
android:padding=3dp
/>

</LinearLayout>
public class ExGridView extends Activity implements


private GridView gridView;

@Override

te);

setContentView(R.layout.grid_view);


toad));

drawable.enemy));

drawable.flamer));

drawable.ghost));
145
Outros Containers
up));
toad));

drawable.enemy));

drawable.flamer));

drawable.ghost));

up));

gridView = (GridView) findViewById(R.
id.gridView1);

gridView.setNumColumns(2);

gridView.setAdapter(new
gridView.setOnItemClickListener(this);
}

@Override


}
}
Pode-se observar que sua implementao muito semelhante ao

ListView. Note que precisamos passar um adapter, que contm as
informaes que populam nosso GridView, tanto que para esse
exemplo utilizamos a mesma classe adapter criado no exemplo do
ListView, onde passamos uma lista de objetos do tipo Item como
contedo.
146
Outros Containers
Figura 60 GridView de duas colunas
7.2 Gallery
um recurso do Android onde podemos adicionar componentes, ou em
casos mais comuns, imagens, sempre na horizontal.
O item em destaque sempre ocupa o centro da Gallery, e a rolagem
feita automaticamente.
Para demonstrar um exemplo com Gallery, utilizaremos nossa mesma
classa adapter dos exerccios com ListView, mas dessa vez no
visualizaremos o nome da imagem no Gallery.
Para isso basta comentarmos a declarao do atributo text na nossa
inner class ViewHolder e tambm onde ele for utilizado.
147
Outros Containers
//
TextView text;
ImageView imagem;
}

com/apk/res/android



>
<Gallery
android:id=@+id/gallery
/>
</LinearLayout>
public class ExGallery extends Activity implements



private Gallery gallery;

@Override

te);

setContentView(R.layout.ex_gallery);


toad));

drawable.enemy));

drawable.flamer));

drawable.ghost));

up));

toad));

drawable.enemy));
148
Outros Containers

drawable.flamer));

drawable.ghost));

up));

gallery = (Gallery) findViewById(R.
id.gallery);

gallery.setAdapter(new

gallery.setOnItemClickListener(this);
}

@Override


}
}
A implementao do uso do Gallery muito semelhante ao ListView,

observe que so realizados os mesmos passos e chamadas de mtodos
para sua criao.
Na figura 61, segue o resultado do nosso Gallery.
149
Outros Containers
Figura 61 Gallery com foco no personagem Toad
7.3 TabHost
Um layout muito utilizado em aplicativos Android, a navegao por
abas, onde cada aba representaria uma opo de menu.
Podemos fazer isso de trs formas diferentes.
No primeiro exemplo, que mostramos a seguir, podemos observar que
nossa tela herda de TabActivity, que tambm uma sub-classe de
Activity. Ela ser responsvel por nos fornecer o layout que desejamos
para nossa aplicao.
Para cada TabHost que definimos na nossa classe, indicamos que ela vai
150
Outros Containers
abrir uma nova activity, que no caso so nossos exemplos j criados

anteriormente.
public class ExTabHostOpenActivity extends
TabActivity {

@Override
final TabHost tabHost = getTabHost();
tabHost.addTab(tabHost.newTabSpec(0).
setIndicator(Gallery).setContent(new Intent(this,
ExGallery.class)));
setIndicator(GridView).setContent(new Intent(this,
ExGridView.class)));
setIndicator(ListView).setContent(new Intent(this,
ExListViewImgLongPress.class)));
}
}
151
Outros Containers
Figura 62 TabHost com Activitys
Na segunda forma de trabalharmos com TabHost, fazer nossa classe

implementar TabHost.TabContentFactory, onde podemos saber qual
aba foi selecionado e prover o contedo que desejamos para ela.
152
Outros Containers
public class ExTabHostContentFactory extends
TabActivity implements TabHost.TabContentFactory {

private String TAB_ID_1 = toad;

private String TAB_ID_2 = up;

private String TAB_ID_3 = flamer;

@Override
TabHost tabHost = getTabHost();
tabHost.addTab(tabHost.newTabSpec(TAB_ID_1).
setIndicator(, getResources().getDrawable(R.
drawable.toad)).setContent(this));
drawable.up)).setContent(this));
drawable.flamer)).setContent(this));
}
public View createTabContent(String tag) {
if(tag.equals(TAB_ID_1)){

TextView text = new TextView(this);

text.setText(Neste exemplo, retornamos
o nome do personagem da TAB : + tag);

return text;
}else if(tag.equals(TAB_ID_2)){

ImageView image = new ImageView(this);

image.setBackgroundResource(R.drawable.
up);

return image;
}else if(tag.equals(TAB_ID_3)){

TextView text = new TextView(this);

text.setText(Para : + tag + , poderia
ser qualquer outro contedo.);

return text;
}
return null;
}
}
153
Outros Containers
Figura 63 TabHost com provedor de contedo
Por fim, fazemos um simples teste para verificar qual aba selecionamos,
e dependendo do resultado, setamos o contedo do TabHost
que desejamos, e assim aprendemos a usar imagens como fundo/
identificao das Tabs da aplicao.
Temos tambm a opo de definir um layout para nossa tela, onde
cada aba, ao ser selecionada vai receber uma view do nosso arquivo de
layout.
Para nosso exemplo, ao selecionarmos uma das abas, trocaremos o
texto de contedo e a cor de fundo da tela.
154
Outros Containers
com/apk/res/android
android:layout_height=match_parent>
<TextView android:id=@+id/text1
android:background=@color/amarelo
android:textColor=@color/preto
android:layout_height=match_parent
android:text=Tab 1/>
android:background=@color/verde
</FrameLayout>
public class ExTabHostFileLayout extends TabActivity
{

@Override
TabHost tabHost = getTabHost();
LayoutInflater.from(this).inflate(R.layout.
tab_file_layout, tabHost.getTabContentView(), true);
tabHost.addTab(tabHost.newTabSpec(tab1).
setIndicator(TAB 1).setContent(R.id.text1));
}
}
155
Figura 64 TabHost com arquivo de layout
Dessa forma, fechamos a apostila do Android mdulo 1, esperamos

que tenha aproveitado. Sugestes e observaes entre contato com
contato@iai.art.br .
156

Android SDK1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Android SDK1

Uploaded by

Copyright:

Available Formats

como funciona?

Copyright Instituto de Artes Interativas

iai? Instituto de Artes Interativas

Como encontrar o iai?

Outros cursos do iai?

Maiores informaes acesse: WWW. IAI.ART.BR

1.2 Baixando o SDK do Android

1.4 Instalando o plugin ADT no Eclipse

1.5 Criando um AVD (Android Virtual Device)

1.6 Executando o emulador

Captulo 2 Introduo ao Java

2.2 Fundamentos do Java

Captulo 3 Primeiro Aplicativo Android

3.4 Repetindo o exerccio usando a API

3.5 Editor visual

3.7 Tratamento de eventos

3.8 Exerccio Novo boto e nova label

Captulo 5 Componentes Visuais

5.2 Herana de propriedades

5.3 SeekBar e ToggleButton

5.4 Exerccio Desabilitando ToggleButton utilizando o

5.6 Visible, Invisible e Gone

5.8 App Minhas Fotos

5.9 Exerccio Imagens com alpha

5.10 EditText e Teclado Virtual

5.11 Exerccio Buscando imagens

5.13 Exercicio - Trocando imagens com Spinner

5.18 Alerta de Confirmao

5.20 ListView com Imagens

5.21 ListView com LongPress

5.22 Editando dados do ListView

6.2 StartActivity com Passagem de Parmetros

6.3 Exerccio Criando uma terceira tela

6.4 Ciclo de vida de uma Activity

Captulo 7 Outros Containers

1.1 Site do Android

1.2 Baixando o SDK do Android

Figura 1. Tela de boas vindas do Eclipse.

1.4 Instalando o plugin ADT no Eclipse

Figura 2. Instalando o plugin ADT no Eclipse

Na figura 3, informamos o diretrio onde descompactamos o ADT, e

Figura 3. Definindo diretrio do ADT.

Aps a instalao o Eclipse exibir uma mensagem solicitando para ser

Figura 4. ADT j instalado no Eclipse

Abra o menu Window > Preferences e na janela que abre, selecione a

Figura 5. Adicionando o SDK do Android

Ao clicarmos em Apply, ser listado todas as bibliotecas disponveis

Figura 6. Bibliotecas do Android disponvel no SDK.

1.5 Criando um AVD (Android Virtual Device)

Figura 7 - Assistente para criar/startar um AVD

Como ainda no criamos nenhum, a lista est vazia, como apresentado

Figura 8. Criando um novo emulador

Name: Nome do emulador

Figura 9. Visualizao do emulador que criamos.

1.6 Executando o emulador

Figura 10. Emulador do Android baseado na verso 2.2

Figura 11. Acessando o JavaDoc.

Figura 12. Documentao de ajuda - JavaDoc

2.2 Fundamentos do Java

Primeiro Aplicativo Android

3.1 Criando o primeiro projeto Android

Figura 13. Criando um novo projeto

A figura 14 representa o assistente de criao do projeto que aberto