curso de android fevereiro de 2011 cristiano expedito ribeiro fabrício firmino de faria

Curso de Android

Fevereiro de 2011

Cristiano Expedito RibeiroFabrí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

Para ver no Eclipse: Window > Show View > Other > Android > LogCat

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)

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 Toast22

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.comAbre browser na página

ACTION_VIEW content://com.android.contacts/contacts/1Mostra contato solicitado

ACTION_VIEW geo:0,0?q=Presidente+Vargas,Rio+de+JaneiroBusca no Google Maps

ACTION_CALL tel:12345678 Liga para o número

ACTION_DIAL tel:12345678Apenas disca o número

ACTION_PICK Contacts.CONTENT_URIAbre lista de contatos do celular

24


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


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)

Pegar retorno(método dentro da Activity chamadora)

// REQUEST_CODE é uma constante definida pela activity// chamadora e identifica esta chamadaIntent intent = new Intent(this, Activity2.class);intent.putExtra("com.example.hello.Param1", "Hello"); startActivityForResult(intent, REQUEST_CODE);

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

Retornando dados

30

public void onCreate(Bundle savedInstanceState) { // ... Intent intent = this.getIntent(); String nome = ... String textParam = intent.getStringExtra(nome); // ...}

Intent intent = new Intent();intent.putExtra("chave", "valor");setResult(RESULT_OK, intent);finish();

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

Tornar Activity executável pelo menu do Android

<activity android:name="<nome_da_classe_activy>" />

<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úvidas33

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

Via código da API

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

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


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:

Modifique o layout acima usando outros atributos Adicione mais um ImageView. Dica: é possível usar "bottom|right" em layout_gravity

<?xml version="1.0" encoding="utf-8"?><FrameLayout

xmlns:android=http://schemas.android.com/apk/res/androidandroid: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>

<?xml version="1.0" encoding="utf-8"?><FrameLayout

xmlns:android=http://schemas.android.com/apk/res/androidandroid: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>

38


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


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)

(continua...)

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

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


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

Altere o AndroidManifest.xml

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

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


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


Array no XML

No código Java

<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> ...</string-array>

58

Resources res = getResources();String [] sa = res.getStringArray(R.array.sArray);int [] ia = res.getIntArray(R.array.iArray);

int id = R.array.planets;TypedArray da = res.obtainTypedArray(id);Drawable dw0 = array.getDrawable(0);Drawable dw1 = array.getDrawable(1);

Resources res = getResources();String [] sa = res.getStringArray(R.array.sArray);int [] ia = res.getIntArray(R.array.iArray);

int id = R.array.planets;TypedArray da = res.obtainTypedArray(id);Drawable dw0 = array.getDrawable(0);Drawable dw1 = array.getDrawable(1);


Estilos

Temas

<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" />

<style name="nome_estilo" parent="android:style/Theme.Black"> <item name="android:textSize">14sp</item> <item name="android:background">@color/branco</item> ...</style>

59

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

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>

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

/res/values/recurso.xml

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 eAutoCompleteTextView

EditText - aceita um número indicandoquantos caracteres disparam assugestõ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:

65

final Button button = (Button) findViewById(R.id.button_id);button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Perform action on click }});

CheckBox e ToggleButton

Botão de dois estados, quepermite 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 associado66

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

Capturar seleção do usuário

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

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

/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="@android:color/transparent" android:textColor="@color/vermelho" android:padding="2px" android:textSize="18sp" />

<?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 alterar72

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.OnChronometerTickListener)• 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):

Métodos

79

?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

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

ProgressBar - Exemplo<ProgressBar style="?android:progressBarStyleSmall"

android:layout_width="wrap_content“ android:layout_height="wrap_content" />

<ProgressBar style="?android:progressBarStyle"


<ProgressBar style="?android:progressBarStyleLarge"


<ProgressBar style="?android:progressBarStyleHorizontal"

android:layout_width="match_parent"


android:indeterminate="true" />




android:indeterminate="false"

android:progress="45" />




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

Estilos

81

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

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

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 personalizadaToast toast = new Toast(this);toast.setDuration(Toast.LENGTH_LONG);toast.setView(view);toast.show();

Apenas mensagem de textoToast.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.

84

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.

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 escolha85

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

87

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

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();

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();

AlertDialog - Exemplos

88

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();

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();

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

Retorne true para que o menu seja mostrado 89

MenuItems

Representa um item selecionável de menu Métodos

Quando um item é selecionado pelo usuário o métodoboolean onOptionsItemSelected (MenuItem)é chamado Compare o id usando MenuItem.getItemId()

90

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

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

93

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.

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:

96

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.

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

curso de android fevereiro de 2011 cristiano expedito ribeiro fabrício firmino de faria

Documents