Transcript android:layout_width="wrap_content" - samples-android

Curso de Android
Fevereiro de 2011
Cristiano Expedito Ribeiro
Fabrício Firmino de Faria
Pré-requisitos






Programação Orientada a Objetos
Java
XML básico
Banco de Dados semi-básico
IDE - Eclipse
Desejável algum conhecimento sobre Web Services
REST
2
Agenda da Aula 1
 Introdução
 Conceitos básicos
 Activity e Intent
 Aplicações e tarefas
 Ciclo de vida
 Passagem e retorno de parâmetros
 Interface gráficas




Layouts
Views
Dialogs
Menus
3
Introdução




Suportado pelo Google
Sistema Operacional Linux
Máquina Virtual Dalvik
Código aberto e livre com boa documentação
 Plataformas, SDK e API Level





Android 1.5 - 3
Android 1.6 - 4
Android 2.1 - 7
Android 2.2 - 8
Android 2.3 - 9
4
Configuração do ambiente
 Download e Instalação
 Software Development Kit (SDK)
• http://developer.android.com/sdk/index.html
 Plataformas:
• Pasta de instalação > SDK Manager
• "Available Packages" e marque:
•
•
•
•
Android SDK Tools
SDK Platform - API 7, 8 ou 9
Google API - API 7, 8 ou 9
Demais são opcionais ou instalados automaticamente
5
Download das plataformas
6
Configuração do ambiente
 Android Virtual Devices (AVD)
 Permite configurar um celular virtual
 Versão do Android, Tamanho da tela e memória
 Emulador
 Programa que permite rodar um AVD no computador
 Exercício 1:
 Criar um AVD usando SDK Manager
• No SDK Manager: Virtual Devices > New
• Preencher campos Name, Target e SD Card Size
(128MiB).
7
Criação do AVD
8
Plugin para Eclipse (ADT)
 Permite criação e execução de projetos Android
 Instalação
 No Eclipse: Help > Install New Software > Add
 URL: https://dl-ssl.google.com/android/eclipse/
 Configuração
 Window > Preferentes > Android
 Em "SDK Location" coloque o path do SDK
 Exercício 2:
 Criar uma aplicação Hello World básica com o Wizard
e rodar no emulador (não precisa programar).
9
Criação de projeto




New > Other > Android > Android Project
Preencha os campos conforme a próxima figura
Clique em Finish
No Package Explorer, clique com o botão direito sobre
o novo projeto
 Selecione Run as > Android Aplication
 O emulador será iniciado e após alguns minutos a
aplicação rodará apresentando o título "Hello World.
10
Criação de projeto
 Project Name
 O nome do projeto que
aparecerá no Package
Explorer do Eclipse.
 Application Name
 Nome que aparecerá no menu
do Android.
 Package Name
 Nome único do pacote que
identifica a aplicação.
 Create Activity
 O nome da classe que
representa a tela inicial da
aplicação.
11
Detalhes e dicas
 Não é necessário fechar o emulador após testar a
aplicação
 Para executar o mesmo projeto após uma alteração não
é necessário fechar e reabrir o emulador, basta clicar
em Run.
 O mesmo vale para outros projetos.
 No entanto, em alguns poucos casos, pode ser preciso
 Caso uma aplicação seja instalada com o mesmo nome
de pacote de uma já existente no celular a anterior será
substituída.
12
Conceitos básicos
 Estrutura do Projeto
 src
• Classes da aplicação
 gen
• Classe R
• Gerada automaticamente
 res/drawable
• Imagens em 3 resoluções diferentes
 res/layout
 res/values
• Internacionalização de strings
• Descrição de cores, estilos, etc
 AndroidManifest.xml
A classe R
 Atualizada automaticamente pelo ADT quando o
conteúdo da pasta res é alterado
 Também existe a classe android.R com alguns recursos
pré-definidos
 Contém constantes que representam cada recurso







R.drawable.nome_imagem
R.layout.nome_layout
R.string.nome_string
R.color.red
R.dimen.espaco
R.array.nome_array
R.style.nome_estilo
14
AndroidManifest.xml
 XML com as configurações da aplicação




Nome, pacote e ícone
Classes de tela (Activity's)
Versão mínima do SDK necessária
Permissões (acessar Internet, efetuar ligações, etc)
 ADT fornece interface de edição
15
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.notification"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon"
android:label="@string/app_name">
<activity android:name=".MyActivity1"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".MyActivity2" />
</application>
<uses-permission android:name="android.permission.VIBRATE" />
</manifest>
16
strings.xml
 /res/values/values-en/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, HelloActivity!</string>
<string name="app_name">Hello World in Android</string>
</resources>
 /res/values/values-pt/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Alô Mundo, HelloActivity!</string>
<string name="app_name">Alô Mundo no Android</string>
</resources>
17
LogCat
 Não existe System.out.println(), mas existe o LogCat
 LogCat permite escrever mensagens no Log do
Android
 Níveis de severidade
Verbose
Log.v(tag, message)
Debug
Log.d(tag, message)
Info
Log.i(tag, message)
Warning
Log.w(tag, message)
Error
Log.e(tag, message,exception)
 Para ver no Eclipse:
 Window > Show View > Other > Android > LogCat
18
Activity e Intent
 Aplicação
 Ao instalar é associada a um usuário único
 Roda em seu processo separado
 Classe View
 Classe base para elementos de interface gráfica
 Classe Activity
 Container de elemento gráficos
 Gerencia um ciclo de vida
 Task (tarefa)
 Pilha de Activity's
 Pode haver activity`s de diferentes aplicações
 Classe Intent
 Classe que descreve uma intenção em realizar uma ação
19
Ciclo de vida de uma Activity
20
Ciclo de vida
 Entire Lifetime
 Fase entre o início e o fim da activity
 Compreende métodos entre onCreate() e onDestroy()
 Visible Lifetime
 Activity iniciada e na pilha da tarefa interagindo com o
usuário ou não.
 Compreende os métodos (callbacks):
• onStart(), onStop(), onRestart()
• onPause(), onResume()
 Foreground Lifetime
 Activity visível e em primeiro interagindo com o usuário
 Callbacks:
• onResume(), onPause()
21
Botões Home e Back
 Botão Home
 Coloca a tarefa da activity em background e retorna
para a tela inicial do Android
 Botão Back
 Remove Activity do topo da pilha da tarefa
 Caso a pilha fique vazia retorna para a tela inicial
 Exercício 3
 Crie uma aplicação chamada ActivityLifecycle que gere
uma mensagem em cada callback do ciclo de vida. Ao
rodar a aplicação use os botões Home e Back para ver
as mensagens.
 Melhor usar LogCat, mas também pode ser classe Toast
22
Como chamar Activity's
 Para iniciar uma Activity é necessário
 Criar uma Intent
 Chamar startActivity ou startActivityForResult
 Pegar resultado se necessário
 Criação da Intent
 Na mesma aplicação: new Intent(context, class)
• context - instância da Activity chamadora
• class - <activity a ser iniciada>.class
 Nativas do sistema Android: new Intent(action, uri)
• action - uma das ações possiveis
• uri - identificador de recurso
 De outra aplicação: Intent.setComponent(...)
23
Tabela de possíveis ações (Intent)
Action
URI - chamar Uri.parse(uri)
Descrição
ACTION_VIEW
http://www.gmail.com
Abre browser na
página
ACTION_VIEW
content://com.android.contacts/contacts/1
Mostra contato
solicitado
ACTION_VIEW
geo:0,0?q=Presidente+Vargas,Rio+de+Janeiro
Busca no Google
Maps
ACTION_CALL
tel:12345678
Liga para o número
ACTION_DIAL
tel:12345678
Apenas disca o
número
ACTION_PICK
Contacts.CONTENT_URI
Abre lista de contatos
do celular
24
Como chamar Activity's
 Método startActivity(Intent)
 Chamar e pegar retorno
 Método startActivityForResult(Intent, int requestCode)
 Antes de terminar, a activity chamada deve chamar
• setResult(int resultCode)
• setResult(int resultCode, Intent data)
• resultCode - RESULT_CANCELED ou RESULT_OK
• data - dados adicionais a serem retornados
 A activity chamadora deve implementar o método
• onActivityResult(int requestCode, int resultCode, Intent
data)
25
Como chamar Activity's
 Chamar Activity em outra aplicacao:
Intent intent = new Intent();
intent.setComponent(new ComponentName(
"com.example.helloworld",
"com.example.helloworld.HelloWorld"));
startActivity(intent);
 Chamar Activity nativa do Android:
Uri uri = Uri.parse("http://www.gmail.com");
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
26
Passagem de parâmetros para Activity
 Métodos da classe Intent para armazenar dados
estendidos







putExtra(String nome, int valor)
putExtra(String nome, int [] valor)
putExtra(String nome, float valor), etc
putExtra(String nome, String valor)
putExtra(String nome, Bundle bundle)
putExtras(Bundle)
putExtras(Intent)
 Classe Bundle
 mapa de pares chave-valor
27
Passagem de parâmetros para Activity
 Para pegar estes dados estendidos
 String getStringExtra(String nome)
 int getIntExtra(String nome, int defaultValue)
 Bundle getExtras()
 Notas sobre o argumento nome
 Indicam o nome da chave
 Recomendável prefixar com o pacote da aplicação para
evitar sobrescrever dados
28
Como chamar Activity's e pegar retorno
 Chamar Activity (em algum método da Activity
chamadora)
// REQUEST_CODE é uma constante definida pela activity
// chamadora e identifica esta chamada
Intent intent = new Intent(this, Activity2.class);
intent.putExtra("com.example.hello.Param1", "Hello");
startActivityForResult(intent, REQUEST_CODE);
 Pegar retorno(método dentro da Activity chamadora)
protected void onActivityResult(int requestCode,
int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == REQUEST_CODE)
if (resultCode == RESULT_OK) {
// pode usar data.getStringExtra(...), etc
}
else (resultCode == RESULT_CANCELED) {
// ação para cancelado
}
}
29
Lendo parâmetros e retornando dados
 Na Activity chamada:
 Pegar parâmetros passados
public void onCreate(Bundle savedInstanceState) {
// ...
Intent intent = this.getIntent();
String nome = ...
String textParam = intent.getStringExtra(nome);
// ...
}
 Retornando dados
Intent intent = new Intent();
intent.putExtra("chave", "valor");
setResult(RESULT_OK, intent);
finish();
30
Encerrando Activity's e aplicações
 O método finish()
 Encerra a Activity que o chamou
 Encerramento da aplicação
 Quando a última Activity da pilha (Task) da aplicação
termina, a aplicação também é encerrada
31
Criando várias Activity's na aplicação
 Necessário declarar no AndroidManifest.xml
 Tornar Activity visível para startActivity()
<activity android:name="<nome_da_classe_activy>" />
 Tornar Activity executável pelo menu do Android
<activity android:name="nome_da_classe_activy“
android:label="nome no menu">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER“/>
</intent-filter>
</activity>
32
Exercício 4
 Expanda o projeto HelloWorld para:
 Mostrar um EditText e receber um parâmetro via
Intent.getStringExtra(chave) que será seu valor default.
 Adicione um botão que ao ser clicado chama a
Activity.setResult(int resultCode, Intent data) e sai.
 Expanda o projeto ActivityLifecycle para:
 Chamar HelloWorld via startActivityForResult.
 Deverá ser passado um parâmetro como valor default
 O retorno em onActivityResult deverá ser usado para
fazer uma busca no Google.
• http://www.google.com.br/m/search?q=consulta
 Consulta o gabarito do exercício para sanar as dúvidas
33
Interfaces gráficas
 Visão geral
 Classe View
• A classe para componentes visuais
• Desenha na tela através do método onDraw(Canvas)
 Widgets
• Componentes visuais simples
• Subclasses de View
• TextView, EditText, ImageView, ProgressBar, etc
 Classe ViewGroup e Gerenciadores de Layout
• Container invisível que guarda View's
• Gerencia a disposição destes componentes na tela
• FrameLayout, LinearLayout, etc
 Activity's especializadas
• ListActivity, TabActivity, MapActivity
34
Interfaces gráficas - Layouts
 Opções para definição do layout
 Arquivos XML na pasta /res/layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:src="@drawable/image" android:id="@+id/imgView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
 Via código da API
FrameLayout layout = new FrameLayout(this);
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);
layout.setLayoutParams(params);
ImageView imgView = new ImageView(this);
params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
imgView.setLayoutParams(params);
imgView.setImageResource(R.drawable.image);
layout.addView(imgView);
setContentView(layout);
35
Como referenciar recursos no XML
 Drawable:
 android:src="@drawable/nome_drawable"
 Identificadores:
 Definição: android:id="@+id/identificador"
 Referência: android:layout_below="@id/identificador"
 Strings:
 android:text="@string/nome_string"
 Cores:
 Forma direta: android:textColor="#RRGGBB"
 Forma indireat: android:textColor="@color/nome_cor"
 Estilos:
 style="@style/nome_estilo“
 Tipos de recursos ainda não abordados serão apresentados
quando necessário
36
Interfaces gráficas - Layouts
 FrameLayout
 Componentes são organizados em pilha
 O último componente adicionado aparece na frente
 Atributos
37
Exercício 5 - FrameLayout
 Crie um projeto chamado LayoutSamples
 Substitua o conteúdo de main.xml por:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android=http://schemas.android.com/apk/res/android
android:layout_width="match_parent“
android:layout_height="wrap_content”
android:background="#8b8b83">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/smile" />
</FrameLayout>
 Modifique o layout acima usando outros atributos
 Adicione mais um ImageView.
 Dica: é possível usar "bottom|right" em layout_gravity
38
Interfaces gráficas - Layouts
 LinearLayout
 Componentes são organizados lado a lado
 Orientação horizontal (padrão) ou vertical
 Atributos
39
Exercício 6 - LinearLayout
 Adicione o arquivo linearlayout.xml a seguir
 Não esqueça de fazer setContentView(R.layout.linearlayout);
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Nome do programa" android:layout_gravity="right" />
<EditText android:layout_width="fill_parent" android:layout_height="wrap_content" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Descrição curta"
android:layout_gravity="right" />
<EditText android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2" android:gravity="top"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Detalhes"
android:layout_gravity="right" />
<EditText android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3" android:gravity="top"/>
</LinearLayout>
40
Interfaces gráficas - Layouts
 TableLayout
 Organiza componentes em linhas e colunas
 Cada linha é um TableRow (subclase de LinearLayout)
 Atributos
41
Exercício 7 - TableLayout
 Adicione outro XML de layout ao projeto
(tablelayout.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#505050">
<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content“
android:stretchColumns="1" >
<TableRow>
<TextView android:text="Produto A" />
<TextView android:text="R$ 100,00" android:gravity="right"
android:background="#808080" />
</TableRow>
<TableRow>
<TextView android:text="Produto B" android:background="#808080"/>
<TextView android:text="R$ 100,00" android:gravity="right" />
</TableRow>
</TableLayout>
(continua...)
42
Exercício 7 - TableLayout
<View android:layout_width="wrap_content"
android:layout_height="2px"
android:background="#000000" />
<TableLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1" >
<TableRow>
<TextView android:text="Produto A" />
<TextView android:text="Descrição curta" />
</TableRow>
<TableRow>
<TextView android:text="Produto B" />
<TextView android:text="Este produto possui uma descrição muito grande
e não caberia na tela normalmente" android:background="#808080"/>
</TableRow>
</TableLayout>
</LinearLayout>
 Observe que layouts podem ser aninhados (colocados
dentro de outro)
43
Interfaces gráficas - Layouts
 RelativeLayout
 Posiciona componentes relativamente a outros
 Componentes precisam ser identificados:
• android:id="@+id/id_componente"
 Atributos
44
Interfaces gráficas - Layouts
 AbsoluteLayout
 Permite controlar posição exata dos componentes
 Pode gerar péssimos resultados em diferentes telas
 Atributos
45
Dimensões
 TODO estou fazendo a tabela, ainda falta entender o
sp
46
Outras subclasses de ViewGroup
 ListView
 Permite rolar conteúdo verticalmente usando ListAdapter
 GridView
 apresenta o conteúdo na forma de grade
 WebView
 exibe páginas Web
 Gallery e ImageSwitcher
 Organiza componentes lado a lado na horizontal
 Usado com ImageSwitcher para exibir galeria de imagens
 ScrollView
 permite rolar conteúdo maior que tela verticalmente
 TabHost exibe tela com abas
 E outros…
47
ListView
 Permite rolar conteúdo verticalmente e selecionar
 Interface ListAdapter
 Faz a ligação entre ListView e seus elementos
 Implementado pela classe ArrayAdapter <T>
• new ArrayAdapter<String>(contexto, itemResId, items);
• itemResId pode ser android.R.layout.simple_list_item_1
• items = array de T’s, neste caso Strings
 Atributos
48
ListView
 Maneira simplificada de uso:
 Coloque um elemento <ListView> com id no XML de layout
 Crie um array de elementos de um tipo T
 Obtenha o objeto ListView usando Activity.findViewById(id)
 Crie um ArrayAdapter passando o array de T’s
 Adicione o ArrayAdapter ao ListView usando ListView.setAdapter(..)
 Implemente o método onItemClick(...) de OnItemClickListener
 Passe a instância da classe que implementa onItemClick para
ListView.setOnItemClickListener(...)
 Parâmetros de OnItemClickListener.onItemClick(...)
 AdapterView <?> parent - referência para o ListView
 View view - a View dentro de parent que foi clicada
 int position - a posição da View no ArrayAdapter, i.e., o índice do
array
 int id - o id do elemento, neste caso será igual a position
49
Exercício 8 - ListView
 No mesmo projeto LayoutSamples
 Renomeie main.xml para framelayout.xml
 Crie um arquivo /res/layout/main.xml com um ListView
 Crie uma Activity com nome LayoutSamples
 Crie dois arrays:
• String[] items = { "FrameLayout", "LinearLayout", "TableLayout" };
• int[] layouts = { R.layout.framelayout, R.layout.linearlayout,
R.layout.tablelayout };
 Altere a antiga Activity para pegar o id do layout via
parâmetro
 Adicione o método onItemClick(...) a LayoutSamples
• Ele deve passar o id do layout escolhido para a nova Activity
criada
 A aplicação agora abrirá uma lista que ao ter um item
selecionado apresenta a activity com o respectivo layout
50
GridView
 Exibe Views na forma de grade
 Todas as colunas têm a mesma largura
 Faz scrolling do conteúdo
 Atributos
 Exercício 9
 http://developer.android.com/resources/tutorials/views/hello-gridview.html
51
WebView e WebSettings
 WebView
 Apresenta uma página de web
 Usa o mesmo componente que o navegador do celular
 Necessário permissão android.permission.INTERNET
 WebSettings
 Permite configurar o WebView
• Permite JavaScript, Salvar senhas, etc.
 Métodos principais
52
Exercício 10 - WebView
 Criar um projeto que abra uma página da web
 Dentro do método onCreate() da Activity
WebView web = new WebView(this);
WebSettings webSettings = web.getSettings();
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(false);
web.loadUrl("http://www.google.com.br");
setContentView(web);
 Altere o AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
<application ... >
<activity ... >
...
</activity>
</application>
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
53
Gallery e ImageSwitcher
 Gallery
 Mostra lista de componentes com rolagem horizontal
 Mantém o componente selecionado sempre no centro
 ImageSwitcher
 Exibe imagens e cria efeitos ao alterná-las
54
Exercício 11 - Gallery e ImageSwitcher
 Gallery e ImageSwitcher
 Importar ExemploImageSwitcher para o Eclipse
 Mudar as animações para
• android.R.anim.slide_in_left
• android.R.anim.slide_out_right
 Adicione outras imagens ao projeto
• Adicione estes novos recursos ao array imagens
55
Interfaces gráficas - Recursos
 Na pasta values é possível adicionar XML de vários
recursos




Strings
Cores
Dimensões
Array
• listas de inteiros, strings, ou recursos
 Estilos
• definir atributos de cada View uma única vez
 Temas
• aplicação de estilos a toda activity ou aplicação
56
Interfaces gráficas - Recursos
 Strings
 Declaração XML: <string name=“appname">Nome Aplicação</string>
 Atributos XML: @strings/appname
 Identificador: R.string.appname
 Texto: getResources().getString(R.string.appname)
 Cores
 Declaração XML: <color name="red">#FF0000</color>
 Atributos XML: @color/red
 Identificador: R.color.red
 Cor: getResources().getColor(R.color.red)
 Dimensões
 Declaração XML: <dimen name="spacing">2px</dimen>
 Atributos XML: @dimen/spacing
 Identificador: R.dimen.spacing
57
Interfaces gráficas - Recursos
 Array no XML
<integer-array name="iArray">
<item>10</item>
<item>20</item>
<item>30</item>
</integer-array>
<array name="planets">
<item>@drawable/mercurio</item>
<item>@drawable/venus</item>
...
<item>@drawable/plutao</item>
</array>
<string-array name="sArray">
<item>texto1</item>
<item>texto2</item>
Resources res = getResources();
...
String [] sa = res.getStringArray(R.array.sArray);
</string-array>
int [] ia = res.getIntArray(R.array.iArray);
 No código Java
int id = R.array.planets;
TypedArray da = res.obtainTypedArray(id);
Drawable dw0 = array.getDrawable(0);
Drawable dw1 = array.getDrawable(1);
58
Interfaces gráficas - Recursos
 Estilos
<style name="nome_estilo">
<item name="android:textSize">14sp</item>
<item name="android:background">@color/branco</item>
...
</style>
<TextView
android:layout_width="wrap_content"
...
style="@style/nome_estilo" />
 Temas
<style name="nome_estilo"
parent="android:style/Theme.Black">
<item name="android:textSize">14sp</item>
<item name="android:background">@color/branco</item>
...
</style>
<application
... android:theme="@android:style/Theme.Back">
<activity ... android:theme="@android:style/Theme.Back">
<application ... android:theme="@style/nome_estilo">
<activity ... android:theme="@style/nome_estilo">
59
Interfaces gráficas - Exemplo recursos
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="planets">
<item>@drawable/mercurio</item>
<item>@drawable/venus</item>
...
<item>@drawable/plutao</item>
</array>
<string-array name="sarray">
<item>texto1</item>
...
</string-array>
/res/values/recurso.xml
<color name="branco">#FFFFFF</color>
<style name="nome_estilo" parent="android:style/Theme.Black">
<item name="android:textSize">14sp</item>
<item name="android:background">@color/branco</item>
...
</style>
<dimen name="spacing">80dip</dimen>
<drawable name="gray">#888888</drawable>
</resources>
60
Interfaces gráficas - Widgets















*View
*TextView, EditText, AutoCompleteTextView
*Button, ImageButton
*CheckBox, ToggleButton
*RadioButton e RadioGroup
*Spinner (combo)
*AnalogClock, DigitalClock, Chronometer
*DatePicker, TimePicker
*ProgressBar, RatingBar
*Toast
*Dialogs
*ProgressDialog
*Alertas
*Menus e Submenus
*LayoutInflater


*TabActivity, TabWidget
*ListView, ListActivity

VideoView, MediaController ???
61
Interfaces gráficas - View
 Classe base para qualquer componente gráfico
 Atributos
 android:padding(Left, Right, Top, Bottom)="2px"
 android:background="@color/blue|#RRGGBB"
 android:id="@+id/identificador"
 android:visibility="visible | invisible | gone"
 android:layout_width="wrap_content | match_parent"
 android:layout_height="wrap_content | match_parent"
 Métodos
 invalidate() - invalida View para ser redesenhada
 onDraw(Canvas) - responsável por desenhar componente
 onKeyDown(...), onKeyUp() - chamados quando uma tecla e
pressione ou solta.
 onTouchEvent(...) - quando há movimento por toque na tela
 onFocusChange(...)
62
Interface gráfica - TextView's




TextView - apresenta texto na tela
EditText - apresenta caixa de edição de texto
AutoCompleteTextView - caixa de edição com auto-complete
Atributos






android:text="@string/..."
android:textColor="@color/..."
android:password="true | false"
android:numeric="integer | signed | decimal"
android:singleLine="true | false"
android:lines - quantas linhas de texto de altura
 AutoCompleteTextView
 android:completionThreshold="3" - quantidade de caracteres
digitados antes aparecer sugestões
 setAdapter(ArrayAdapter) - definir lista de opções
63
TextView's – Exercício 12
 Crie um projeto chamado TesteViews
 Crie /res/layout/texts.xml
 Crie TextView, EditText e
AutoCompleteTextView
 EditText - aceita um número indicando
quantos caracteres disparam as
sugestões
 AutoCompleteTextView com completionThreshold="1"
 Crie /res/values/arrays.xml
 Crie um array de nomes iniciando por letras parecidas
 Na activity carregue o layout e o array
 Configure AutoCompleteTextView para usar o array
 Dica: use ArrayAdapter
 Detecte quando EditText for alterado e chame
AutoCompleteTextView.setThreashold(int)
64
Button e ImageButton
 Permitem criar botões clicáveis na tela
 Button - subclasse de TextView
 ImageButton - subclasse de ImageView
 Setando imagem via Java e XML
 imageButton.setImageResource(R.drawable.image_id)
 button.setCompoundDrawablesWithIntrinsicBounds(left,top,right,bottom)
 <ImageButton android:src="@drawable/..." ... />
 <Button android:drawableLeft="@drawable/..."
android:drawableTop="..."
android:drawableRight="..." android:drawableBottom="..." ... />
 Detectando clique:
final Button button = (Button) findViewById(R.id.button_id);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Perform action on click
}
});
65
CheckBox e ToggleButton
 Botão de dois estados, que
permite marcar um item na tela
 CheckBox
 android:text="@string/..."
 ToggleButton
 android:textOn="@string/..."
 android:textOff="@string/..."
 Métodos
 boolean isChecked() - retorna estado
 void toggle() - alterna estado
 void setChecked(boolean) - define estado
 boolen performClick() - simula click chamando o método
onClick(..) do OnClickListener associado
66
RadioButton e RadioGroup
 RadioButton
 Permite selecionar apenas um item dentro da lista de
um RadioGroup
 Exemplo
<RadioGroup android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/group1">
<RadioButton android:id="@+id/radioSim"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sim"
android:checked="false" />
<RadioButton android:id="@+id/radioNao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Não"
android:checked="false"/>
</RadioGroup>
67
RadioButton e RadioGroup
 Pegar id do RadioButton selecionado
 RadioGroup.getCheckedRadioButtonId()
 Ou usar o callback onCheckedChanged(...)
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.radiobutton);
final RadioGroup group = (RadioGroup) findViewById(R.id.group1);
group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
public void onCheckedChanged(RadioGroup group, int checkedId) {
// Note que: checkedId == group.getCheckedRadioButtonId()
boolean sim = R.id.radioSim == checkedId;
boolean nao = R.id.radioNao == checkedId;
if (sim) {
//
} else if (nao) {
//
}
}
});
}
68
Spinner (combo)
 Exibe um componente com texto que ao ser clicado
expande um lista de opções
 Exemplo /res/layout/spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Spinner android:id="@+id/comboPlanetas"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:prompt="Planetas" />
<ImageView android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
69
Spinner (combo)
 Exemplo SpinnerActivity.java (trechos)
 Definir a lista de opções e seus layouts
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
R.layout.spinner_textview,
getResources().getStringArray(R.array.planetNames));
adapter.setDropDownViewResource(R.layout.simple_textview);
Spinner spinner = (Spinner) findViewById(R.id.comboPlanetas);
spinner.setAdapter(adapter);
 Capturar seleção do usuário
spinner.setOnItemSelectedListener(new OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View v,
int position, long id) {
// ação
}
@Override
public void onNothingSelected(AdapterView<?> arg0) { }
});
70
Spinner (combo)
 Exemplo dos layouts adicionais
 /res/layout/spinner_textview.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:textColor="@color/vermelho"
android:padding="2px"
android:textSize="18sp" />
 /res/layout/simple_textview.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/azul"
android:textColor="@color/branco"
android:padding="10px"
android:textSize="20sp" />
71
Spinner (combo)
• Exercício: pegar o exemplo, entender e alterar
72
Spinner (combo)
 Outros métodos
 Object getSelectedItem()
• retorna o item selecionado
 long getSelectedItemId()
• retorna o id do item selecionado
 int getSelectedItemPosition()
• retorna a posição do item selecionado no array fornecido para
ArrayAdapter
 void setPrompt(String)
• determina o prompt da lista de opções
 void setPromptId(int resId)
• determina o prompt a partir de um R.string.id_string
 void setSelection(int position)
• determina o item atualmente selecionado
73
Clock e Chronometer
 AnalogClock e DigitalClock
 Exibem um relógio digital ou analógico com a hora atual
 Chronometer
 Exibe um contador de tempo
 setBase(long time)
• Define o instante de tempo que o cronometro marca zero
• Usar SystemClock.elapsedRealtime()
 start(), stop()
• Disparar ou interromper contagem
 setOnChronometerTickListener(Chronometer.OnChron
ometerTickListener)
• Chamado pelo cronômetro quando seu contador muda
74
Clock e Chronometer - Exemplo
 /res/layout/clock.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<AnalogClock android:id="@+id/analogClock1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" />
<DigitalClock android:id="@+id/digitalClock1"
android:layout_width="match_parent”
android:layout_height="wrap_content"
android:gravity="center_horizontal" />
<Chronometer android:id="@+id/chronometer1"
android:layout_width="match_parent“
android:layout_height="wrap_content“
android:gravity="center_horizontal" />
</LinearLayout>
75
Clock e Chronometer - Exemplo
 Em uma activity:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.clock);
Chronometer chrono = (Chronometer)
findViewById(R.id.chronometer1);
chrono.setBase(SystemClock.elapsedRealtime());
chrono.setOnChronometerTickListener(
new OnChronometerTickListener() {
@Override
public void onChronometerTick(Chronometer chronometer) {
long elapsedTime = SystemClock.elapsedRealtime()
- chronometer.getBase();
Log.i(this.getClass().getName(), "" + elapsedTime);
if (elapsedTime > 10000) chronometer.stop();
}
});
chrono.start();
}
76
Escolha de data, horário
 TimePicker






Selecionar horário do dia (24h ou AM/PM)
Aceita horas e minutos, mas não segundos
Integer getCurrentHour(), getCurrentMinute()
setIs24HourView(boolean), boolean is24HourView()
setCurrentHour(Integer), setCurrentMinute(Integer)
setOnTimeChangedListener(OnTimeChangedListener)
 DatePicker




Selecionar um data (dia, mês, ano)
int getDayOfMonth(), getMonth(), getYear()
init(ano, mês, dia, OnDateChangeListener)
updateDate(ano, mês, dia)
77
Escolha de data, horário - Exemplo
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<DatePicker android:id="@+id/dtpicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TimePicker android:id="@+id/tmpicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
78
ProgressBar
 Exibe um indicador de progresso de uma operação
 Estilos como percentual ou indeterminado
 Estilos (atributo style no XML):
?android:progressBarStyle
(padrão) Indeterminado circular de tamanho médio
?android:progressBarStyleSmall
Indeterminado circular de tamanho pequeno
?android:progressBarStyleLarge
Indeterminado circular de tamanho grande
?android:progressBarStyleHorizontal
Barra horizontal indeterminado ou com percentual
 Métodos
setProgress(int)
Determina o nível de progresso para uma barra percentual
setSecondaryProgress(int)
Determina o nível secundário de progresso para uma barra
percentual
boolean isIndeterminate()
Retorna true se for indeterminado
79
ProgressBar - Exemplo
<ProgressBar style="?android:progressBarStyleSmall"
android:layout_width="wrap_content“ android:layout_height="wrap_content" />
<ProgressBar style="?android:progressBarStyle"
android:layout_width="wrap_content“ android:layout_height="wrap_content" />
<ProgressBar style="?android:progressBarStyleLarge"
android:layout_width="wrap_content“ android:layout_height="wrap_content" />
<ProgressBar style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true" />
<ProgressBar style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:progress="45" />
<ProgressBar style="?android:progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="false"
android:progress="45" android:secondaryProgress="80" />
80
RatingBar
 Mostra uma barra de classificação com estrelas
 A barra pode ser interativa ou apenas um indicator
 Métodos
int getNumStars()
Retorna quantidade de estrelas totais
float getRating()
Retorna a classificação (nota)
float getStepSize()
Retorna o tamanho de cada salto das notas
boolean isIndicator()
Retorna true se for indicadora ou false se for interativa
void setRating(float rating)
Determina a classificação
 Estilos
?android:ratingBarStyle
(default) Exibe estrelas grandes e permite alteração da
classificação. Pode-se usar isIndicator=“true” para ser
apenas um indicador.
?android:ratingBarStyleSmall
Exibe estrelas pequenas. Apenas indicador.
?android:ratingBarStyleIndicator
Exibe estrelas médias. Apenas indicador.
81
RatingBar
<RatingBar style="?android:ratingBarStyle"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:numStars="5" android:stepSize=".5" android:rating="2.5" />
<RatingBar style="?android:ratingBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5" android:stepSize=".5"
android:rating="2.5" android:isIndicator="true" />
<RatingBar style="?android:ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="10" android:stepSize=".5"
android:rating="2.5" />
<RatingBar style="?android:ratingBarStyleIndicator"
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:numStars="6" android:stepSize=".5" android:rating="2.5" />
82
Toast
 Exibição de alertas por tempo determinado
 Sem interação com usuário
 View personalizada
Toast toast = new Toast(this);
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(view);
toast.show();
 Apenas mensagem de texto
Toast.makeText(this, “Mensagem”, Toast.LENGTH_SHORT).show();
83
Dialogs
 Usado para abrir janelas na tela
 Recomendado usar os métodos a seguir para que a
Activity gerencie o ciclo de vida do Dialog.
boolean showDialog(int id, Bundle)
Tenta mostrar o Dialog para o id chamando
onCreateDialog() se necessário, e em seguida
onPrepareDialog(). Retorna true em caso de sucesso.
void dismissDialog(int id)
Fecha o Dialog criado por showDialog() com o id
especificado. Se nenhum Dialog com o id tiver sido
mostrado lança IllegalArgumentException.
void removeDialog(int id)
Remove qualquer referência para o Dialog especificado.
Caso esteja sendo exibido, ele é fechado antes.
Dialog onCreateDialog (id, Bundle)
Callback chamado quando um Dialog deve ser criado
para o id especificado. Implementado pelo desenvolver.
void onPrepareDialog(id, Dialog,
Bundle)
Callback que permite que o Dialog seja preparado antes
de ser apresentado. Por exemplo, configurar alguma
varíavel.
84
DatePickerDialog – Exercício 13
 Criar um projeto chamado DialogTeste
 Adicionar TextView e Button no layout com os texto
“dd/mm/aaaa” e “Alterar”, respectivamente
 Ao clicar no botão deve aparecer um
DatePickerDialog para escolha do usuário
 Quando a data for escolhida deverá
aparecer no TextView.
 Dicas:
 Chame showDialog(id)
 Implemente o método onCreateDialog()
 Crie um listener OnDateSetListener para
ser notificado quando o usuário terminar a escolha
85
ProgressDialog
 Janela para mostrar o progresso de uma operação
 Como usar sem os métodos anteriores
 Mostrar o Dialog
• dialog = ProgressDialog.show(contexto, titulo, msg, bool indet);
• indet = se é indeterminado ou não (percentual)
 Feche o Dialog, quando concluir
• dialog.dismiss();
 Alterar o progresso (se indet = true)
• dialog.setProgress(int v)
• v entre 0 e 10000
86
AlertDialog
 Exibe um alerta ao usuário
 Conteúdo e botões de escolha personalizados
 Classe AlertDialog.Builder para construir alertas
setIcon(int resId)
Determina o ícone a ser mostrado
setTitle(String)
Determina o título do alerta
setMessage(String)
Mensagem a ser mostrada no interior do alerta
setPositiveButton(String, listener)
Texto do botão positivo (Sim, Yes, Ok, etc)
setNegativeButton(String, listener)
Texto do botão negativo (Não, No, etc)
setItems(String [], listener)
Items a serem mostrados para usuário selecionar
setSingleChoiceItems(String [], int
checkedItem, listener)
Determina lista de RadioButtons a serem mostrados ao
usuário
setCancelable(boolean)
Alerta cancelável ou não. Cancelável significa que usuário
não pode fechar com botão voltar.
show()
Exibe o alerta para o usuário
cancel()
Cancela o alerta
Nota: listener é uma instância de DialogInterface.OnClickListener
87
AlertDialog - Exemplos
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage("Are you sure you want to exit?");
builder.setCancelable(false);
builder.setPositiveButton("Yes", ...);
builder.setNegativeButton("No“, ...);
AlertDialog alert = builder.create();
CharSequence[] items = {"Red", "Green", "Blue"};
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Pick a color");
builder.setItems(items,
new DialogInterface.OnClickListener() { ... } );
builder.show();
88
Menus e Submenus
 É possível criar menus e um submenu para cada menu
 São exibidos quando a tecla Menu é apertada
 Devem ser criados em Activity.onCreateOptionsMenu()
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
MenuItem item = menu.add(0, NOVO, 0, “Novo”);
item = menu.add(0, ABRIR, 0, “Abrir”);
item = menu.add(0, SALVAR, 0, “Salvar”);
SubMenu submenu = menu.addSubMenu(“Outros”);
item = submenu.add(0, PESQUISAR, 0, “Pesquisar”);
item = submenu.add(0, LIMPAR, 0, “Limpar”);
item = submenu.add(0, SAIR, 0, “Sair”);
return true;
}
 As constantes ABRIR, SALVAR, etc são definidas pelo
desenvolvedor
89
 Retorne true para que o menu seja mostrado
MenuItems
 Representa um item selecionável de menu
 Métodos
setEnabled(boolean)
Determina se o item é selecionável ou não
setVisible(boolean)
Determina se o item é visível ou não
setTitle(int)
setTitle(String)
Define o texto que aparece no item
setIcon(int)
setIcon(Drawable)
Define o ícone que aparece no item
int getItemId()
Retorna o id do item conforme Menu.add()
 Quando um item é selecionado pelo usuário o método
boolean onOptionsItemSelected (MenuItem)
é chamado
 Compare o id usando MenuItem.getItemId()
90
Menus – Exercício 14
 Adicione o menu anterior no projeto DialogTeste
 Crie a constantes necessárias NOVO, ABRIR, etc.
 Implemente o método onOptionsItemSelected()
 Mostre um Toast com o texto do item selecionado
 O item SAIR deve perguntar se realmente deseja sair
conforme o exemplo do AlertDialog
91
LayoutInflater
 Constrói hierarquia de uma View a partir de um layout
 Exemplo
LayoutInflater inflater = (LayoutInflater)
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(resId, null);
// Agora é possível passar para um Toast e exibir na tela
Toast toast = new Toast(this);
toast.setView(view);
toast.setDuration(Toast.LENGTH_SHORT);
toast.show();
92
ListActivity
 Cria uma activity que mostra uma lista de itens
 Simplifica codificação Java
 Evita criação de XML de layout
 Apenas listas personalizadas precisariam
 Métodos adicionais em relação à activity:
void setListAdapter(ListAdapter)
Determina o adaptador que fornece os items e layout
ListAdapter getListAdapter()
Retorna o adaptador atual
ListView getListView()
Retorna o objeto ListView utilizado pela ListActivity
void onListItemClick(ListView,
View, int pos, long id)
Callback chamado quando um item da lista é selecionado
pelo usuário. A parâmetro pos indica a posição do item na
lista de item do adaptador.
93
ListActivity – Exercício 15
 Volte ao projeto LayoutSamples do exercício 8
 Na activity LayoutSamples faça as alterações:
 Faça herdar de ListActivity
 Crie o método void onListItemClick(ListView, View, int
position, long id) e copie o código de onItemClick para ele
fazendo a devidas correções
 Copie o código que cria o ArrayAdapter e apague todo
restante do código de onCreate(), exceto super.onCreate()
 Chame o método ListActivity.setListAdapter() passando o
ArrayAdapter criado como parâmetro.
 Execute e veja que nada mudou para o usuário, porém com
bem menos código e descarte do arquivo de layout.
94
TabActivity
 Usada para criar telas com abas
 Cada aba fica associada a uma activity ou view
 Etapas de uso:
 Herde de TabActivity
 No método onCreate()
• Obtenha o objeto TabHost usando getTabHost()
• Para cada aba a ser criada
• Obtenha um objeto TabSpec chamando
TabHost.newTabSpec(String tag)
• TabSpec.setIndicator() para definir o titulo e/ou imagem
• TabSpec.setContent() para definir o conteúdo da aba
• TabHost.addTab(TabSpec) para adicionar a aba
95
TabActivity
 A classe TabSpec possui variantes em seus métodos:
setContent(int viewId)
Especifica o id da View que deve ser usada como o conteúdo
da aba.
setContent(Intent)
Especifica a Intent que deve ser usada para iniciar uma
activity que será o conteúdo da aba.
setContent(TabContentFactory)
Especifica um TabHost.TabContentFactory que será
responsável por criar o conteúdo da aba.
setIndicator(String)
Especifica apenas um texto como indicador da aba.
setIndicator(View)
Especifica uma View como indicador da aba.
setIndicator(String, Drawable)
Especifica um texto e um ícone como indicador da aba.
96
TabActivity – Exercício 16
 Ainda no projeto LayoutSamples
 Faça backup da activity LayoutSamples
 Faça LayoutSamples herdar TabActivity
 Apague o código de onCreate(), exceto
super.onCreate()
 Obtenha o TabHost usando getTabHost()
 Faça um loop for para o array layouts
• Crie TabSpec usando tabHost.newTabSpec()
• Copie o código de criação de Intent de onListItemClick()
• Remova o callback onListItemClick()
• Defina indicator e conteúdo do objeto TabSpec
• Adicione o TabSpec usando TabHost.addTab()
97
Agenda das próximas aulas







Intent filter
BroadcastReceiver, Services e Notification
AlarmManager e Handler
Banco de Dados e ContentProvider
Mapas de GPS
Sockets e Web Services
Projeto
98