Este documento descreve como criar um aplicativo simples de vendas com Android. O objetivo é criar uma lista de produtos usando RecyclerView e exibir detalhes de um produto em outra tela. Ele cobre tópicos como criar classes de modelo, popular uma lista, construir um Adapter para vincular os dados, baixar imagens com Picasso, passar parâmetros entre activities e personalizar a ActionBar.

1. Desenvolvimento Android
Aline Borges
alinekborges@gmail.com

2. Slides
• Esta apresentação está disponível em:
http://bit.ly/android01_intro
Trechos de códigos serão disponíveis em:
www.codeshare.io/lyhtt

3. Objetivo final
• Criar um aplicativo de vendas simples
• Em uma tela inicial, ele irá exibir uma lista de
produtos com imagem e preços diferentes
• Ao clicar em um destes produtos, abrirá uma
nova tela com detalhes e descrição do produto
e um botão para comprar

4. Objetivo parcial
• Criar classes de modelo, inicializar valores
falsos
• Criar uma lista (Recycler Layout) com itens
personalizados
• Utilizar Picasso para baixar imagens da
internet

5. Lista em Apps

6. Conteúdo
• Bibliotecas no Gradle
• package
• RecyclerLayout
• Item layout
• Adapter
• Debug

7. build.Gradle
• Importando bibliotecas facilmente no gradle
• Download automático via MavenCentral
Gradle Please

8. build.Gradle
• RecylerLayout – novo ListView
• CardLayout - Cards
• Picasso – Download async de imagens

9. • dependencies {
• compile fileTree(dir: 'libs', include: ['*.jar'])
• compile 'com.android.support:appcompat-v7:21.0.2'
• compile 'com.android.support:cardview-v7:21.0.0'
• compile 'com.android.support:recyclerview-v7:21.0.0'
• compile 'com.squareup.picasso:picasso:2.4.0'
• }

10. Modelo
Dica: Alt+insert para gerar automaticamente get & set

11. Inicializar lista de produtos “falsa”
• Usar para protótipo
• No futuro, essa informação pode vir do Controller
de WebService ou Banco de Dados

12. RecyclerView
• Lista grande de informações
• Dispõe de forma confortável ao usuário
• Funciona como uma ListView, porém mais
poderoso (podemos definir Lista, grade de
2 colunas, animações facilitadas, etc)

13. RecyclerView

14. Adapter
ArrayList
Produto 1
Produto 2
Produto 3
Adapter
Nome  textView.setText(nome)
Preço  textView.setText(preco)
Descrição  textView.setText(descricao)
Nome  textView.setText(nome)
Preço  textView.setText(preco)
Descrição  textView.setText(descricao)

15. Item layout
• Layout > New > layout resource file
• Nome: item_list

16. CardView
• Muito usada em design
atual.
• Fácil de deixar bonito ;)

17. Layout 101
• Margin -> espaço deixado para “fora”
• Padding -> espaço deixado para “dentro”

18. Layout 101
• Width -> largura
• Height -> altura
• “match_parent” -> encher a tela
• “wrap_content” -> do tamanho do conteúdo

19. Layout 101 - ScaleType
• ImageView ScaleType

20. Layout 101
• Gravity

21. Item layout
• RelativeLayout
• Height = 10dp
• Background = @color/accent
• Large Text
• Id = txtNome
• Medium Text
• Id = txtPreco
• ImageView
• Id = imageView
• Height = 120dp
• ScaleType = centerCrop
• Src = @drawable/produto_01

22. Adapter
• Recebe uma lista de objetos e liga cada
um deles à uma View
• “Boiler plate code” – “Receita de bolo”
• Usar o código padrão e apenas adaptar o
necessário
• http://www.codeshare.io/hhQUd

23. Adapter
• Propriedades
• Lista dos objetos
• Contexto
• Construtor
• Recebe o contexto e itens

24. Adapter
• Inflar o layout do item
• Retorna o tamanho da lista

25. Adapter
• ViewHolder para os itens do layout que
serão usados

26. Adapter
• Ligar a propriedade do objeto à um item de
view

27. Adapter
• Substituir “Object” pelo objeto de modelo
• Usar findViewById para os itens de layout
• Setar as informações

28. View Holder do Produto

30. Conectando Adapter -> recycler view
• Rode para testar!

31. Picasso
• Download asíncrono de imagens
• Problema de download da internet: Demora!
• Picasso é uma biblioteca que baixa as
imagens e coloca no ImageView facilmente

32. Picasso
• Picasso.with(context).load(object.getImage_url())
• .fit()
• .centerCrop()
• .placeholder(R.drawable.holder)
• .into(holder.imageView);

33. Bind completo

34. OnClickListener
• xxx Não colocar OnClickListener no
RecyclerView inteiro
• Ao clicar em qualquer lugar da lista o método
será disparado, não sabemos qual item foi
clicado!

35. OnClickListener
• Da mesma forma que fizemos com o
botão, é possível criar um clickListener
dentro do adapter, para a view atual
• Isso dá liberdade de colocar click em
apenas uma parte do item (apenas ao
clicar na foto, um botão para deletar,
favoritar, etc)

36. OnClickListener
• OnBindViewHolder
Dica: Toast libera uma mensagem curta na tela para o
usuário

37. OnClickListener
• Iniciando outra ativity

38. Layout Detalhes
• Criar um layout xml para
a página de detalhes
• Misture os layouts para
chegar no resultado
desejado

39. Parâmetros entre Activity
• Modo básico – key value
• Passando parâmetro

40. Parâmetros entre Activity
• Modo básico – key value
• Recuperando parâmetro

41. Parâmetros entre Activity
• Em casos de objetos complexos fica
cansativo enviar e recuperar as
propriedades uma a uma
• Solução: serialização

42. Serialização
• Biblioteca GSON
• compile 'com.google.code.gson:gson:2.3.1'

43. JSON
• [
• {
• "id": 1,
• "image_url": “http://caminhodaimagen/imagem.jpg",
• "nome": "Loch Ard Gorge",
• "regiao": "Great Ocean Road",
• "pais": "Austrália",
• "curiosidade": “Texto da curiosidade aqui",
• "url":
"http://destino.herokuapp.com/destinos/1.json"
• }
• ]

44. Serialização
• Transforma o objeto “Produto” em uma
string para enviar, e torna fácil a
recuperação do objeto na Activity

45. Serializar

46. Recuperando
• (DetalhesActivity)

47. Action Bar
• Disponibiliza ações ao usuário

48. ActionBar

49. Personalizando a ActionBar

50. Menu ActionBar
• res -> menu_main.xml

51. Menu Action Bar
• onClick

52. Resumo
• RecyclerView para implementar listas
• Layout de item em xml
• Adapter
• ClickListener
• Layouts avançados
• Parâmetros entre Activity

53. Obrigada!
• Aline K Borges
• alinekborges@gmail.com