Material Design
Ricardo Lecheta - http://androidosday.com
Material Design
Ricardo Lecheta - http://androidosday.com
Material Design
Ricardo Lecheta - http://androidosday.com
● Temas
RecyclerView e CardView
Ricardo Lecheta - http://androidosday.com
RecyclerView - animações
Ricardo Lecheta - http://androidosday.com
Google Wear e Cards
Ricardo Lecheta - http://androidosday.com
CardView
Ricardo Lecheta - http://androidosday.com
Material Design - Cores
Ricardo Lecheta - http://androidosday.com
● Cores
Paleta de Cores
Ricardo Lecheta - http://androidosday.com
● http://www.google.com/design/spec/style/color.html
Tema Material
Tema Material
● /res/values/styles.xml
Ricardo Lecheta - http://androidosday.com
Tema Material
● /res/values/colors.xml
Ricardo Lecheta - http://androidosday.com
Tema Material
● Resultado:
Ricardo Lecheta - http://androidosday.com
Material Design
Ricardo Lecheta - http://androidosday.com
● Toolbar
– Conceito genérico da Action Bar
– É uma view como ou...
Material Design
Ricardo Lecheta - http://androidosday.com
● Floating Toolbar
Material Design
Ricardo Lecheta - http://androidosday.com
● Toolbar
Material Design
Ricardo Lecheta - http://androidosday.com
● Toolbar
Toolbar vs Action Bar
● Como utilizar a Toolbar?
● Remova a Action Bar com o tema NoActionBar
Ricardo Lecheta - http://and...
Toolbar vs Action Bar
● Arquivo de layout para Toolbar:
– build.gradle: com.android.support:appcompat-v7:22+
Ricardo Leche...
Toolbar vs Action Bar
● Faz include da Toolbar no Layout (como uma view)
Ricardo Lecheta - http://androidosday.com
Toolbar vs Action Bar
● Na activity: setSupportActionBar(toolbar)
Ricardo Lecheta - http://androidosday.com
Toolbar vs Action Bar
● Resultado:
● Mesmo de antes
Ricardo Lecheta - http://androidosday.com
Toolbar
Navigation Drawer
● Métricas e espaçamentos
Ricardo Lecheta - http://androidosday.com
Navigation Drawer
● Métricas e espaçamentos
Ricardo Lecheta - http://androidosday.com
Navigation Drawer
● Usar a Toolbar
● Menu Lateral
Ricardo Lecheta - http://androidosday.com
Navigation Drawer
● Objetivo:
● System bar translúcida
● Menu deve abrir por cima da action bar
Ricardo Lecheta - http://a...
Navigation Drawer
● /res/values/styles.xml
Ricardo Lecheta - http://androidosday.com
Navigation Drawer
● /res/values-v21/styles.xml
Ricardo Lecheta - http://androidosday.com
Navigation Drawer
● Problema:
● System bar translúcida
● Layout foi desenhado sobre a tela.
Ricardo Lecheta - http://andro...
Navigation Drawer
● Problema:
– O layout está ocupando a tela inteira, pois a system bar
está translúcida
● Solução:
– Uti...
Navigation Drawer
● Resultado com
● fitsSystemWindows="true"
Ricardo Lecheta - http://androidosday.com
Navigation Drawer
● Problema:
– Voltamos ao ponto de partida.
– Precisamos desenhar o menu sobre todo o layout.
● Solução:...
Navigation Drawer
● ScrimInsetsFrameLayout
Ricardo Lecheta - http://androidosday.com
Navigation Drawer
● Resultado com:
– ScrimInsetsFrameLayout
Ricardo Lecheta - http://androidosday.com
Navigation Drawer
● Tapa final no visual:
● Adicione o header,
● Espaçamentos
● Métricas do Material Design
Ricardo Lechet...
Navigation Drawer
● Demo
Ricardo Lecheta - http://androidosday.com
Elevação
Ricardo Lecheta - http://androidosday.com
Elevação
Ricardo Lecheta - http://androidosday.com
● Elementos não podem ocupar o mesmo lugar
Elevação
Ricardo Lecheta - http://androidosday.com
● Elevação
Touch Feedback
Ricardo Lecheta - http://androidosday.com
● User Input – Surface Reaction
Touch Feedback
Ricardo Lecheta - http://androidosday.com
● Efeito “ripple”
● Já existe nos componentes nativos, ex: Button...
Efeito Ripple
● Cor: colorControlHighlight
Ricardo Lecheta - http://androidosday.com
Touch Feedback
Ricardo Lecheta - http://androidosday.com
● Efeito “ripple” customizado:
– /res/drawable/ripple.xml
Touch Feedback
Ricardo Lecheta - http://androidosday.com
● “ripple”
Floating Action Button
Ricardo Lecheta - http://androidosday.com
● Efeito “ripple” customizado para criar um FAB:
– /res/d...
Floating Action Button
Ricardo Lecheta - http://androidosday.com
● Efeito “ripple” customizado para criar um FAB:
– /res/d...
Floating Action Button
Ricardo Lecheta - http://androidosday.com
● Efeito “ripple” customizado para criar um FAB:
– /res/d...
Animate View State Changes
Ricardo Lecheta - http://androidosday.com
● User Input – Material Response
Animate View State Changes
Ricardo Lecheta - http://androidosday.com
● /res/drawable/raise.xml
Animate View State Changes
Ricardo Lecheta - http://androidosday.com
● /res/layout/adapter_carro.xml
Animate View State Changes
Ricardo Lecheta - http://androidosday.com
● Fonte: app Google I/O 2014
● https://github.com/goo...
Material Design
Ricardo Lecheta - http://androidosday.com
● User Input – Radial Reaction
Material Design
Ricardo Lecheta - http://androidosday.com
● Activity Transitions
Material Design
Ricardo Lecheta - http://androidosday.com
● Activity Transitions
Material Design
Ricardo Lecheta - http://androidosday.com
● Activity Transitions
Material Design
Ricardo Lecheta - http://androidosday.com
● Activity Transitions
Material Design
Ricardo Lecheta - http://androidosday.com
● Views compartilhadas: No layout de ambas as activities
Material Design
Ricardo Lecheta - http://androidosday.com
● ViewCompat para manter a compatibilidade.
Activity Transitions
Ricardo Lecheta - http://androidosday.com
Activity Transitions
Ricardo Lecheta - http://androidosday.com
● Ligar pelo código
Activity Transitions
Ricardo Lecheta - http://androidosday.com
● Ou configurando o tema
Turbine a velocidade do Emulador
Ricardo Lecheta - http://androidosday.com
● Dica: Intel® Hardware Accelerated Execution M...
Reveal Effect
Ricardo Lecheta - http://androidosday.com
● Animação contínua
● Para mostrar ou esconder uma view
Floating Action Button (FAB)
● Representa a ação primária do aplicativo / tela
Ricardo Lecheta - http://androidosday.com
Floating Action Button
● Nem todas as telas precisam de um FAB
Ricardo Lecheta - http://androidosday.com
Floating Action Button
● O FAB precisa ser uma ação positiva
Ricardo Lecheta - http://androidosday.com
Floating Action Button
● O FAB não “deve” ser uma ação negativa
Ricardo Lecheta - http://androidosday.com
Floating Action Button
● Não encha a tela de fabs
Ricardo Lecheta - http://androidosday.com
Floating Action Button
● Não encha a tela de fabs
Ricardo Lecheta - http://androidosday.com
Floating Action Button
● Animações:
Ricardo Lecheta - http://androidosday.com
● Lib no github:
● https://github.com/makovkastar/FloatingActionButton
Floating Action Button
Ricardo Lecheta - http://and...
Floating Action Button
Ricardo Lecheta - http://androidosday.com
Floating Action Button
● Monitorar eventos de rolagem:
● Show / Hide com animação
Ricardo Lecheta - http://androidosday.com
Floating Action Button
● Lib no github:
● https://github.com/makovkastar/FloatingActionButton
Ricardo Lecheta - http://and...
Floating Action Button
● Lib no github:
● https://github.com/futuresimple/android-floating-action-button
Ricardo Lecheta -...
Toolbar e Scroll
● Lib no github:
● https://github.com/ksoichiro/Android-ObservableScrollView
Ricardo Lecheta - http://and...
Toolbar e Scroll
● ObservableRecyclerView:
Ricardo Lecheta - http://androidosday.com
Toolbar e Scroll
● ObservableRecyclerView:
Ricardo Lecheta - http://androidosday.com
Toolbar e Scroll
Ricardo Lecheta - http://androidosday.com
Links
Ricardo Lecheta - http://androidosday.com
● Material Design on Android Checklist
● http://android-developers.blogspo...
Obrigado 
Ricardo Lecheta - http://androidosday.com
• https://plus.google.com/+RicardoLecheta
• https://www.facebook.com/...
Próximos SlideShares
Carregando em…5
×

Material design - AndroidosDay 2015

351 visualizações

Publicada em

Palestra AndroidosDay João Pessoa 2015

Publicada em: Software
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
351
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Material design - AndroidosDay 2015

  1. 1. Material Design Ricardo Lecheta - http://androidosday.com
  2. 2. Material Design Ricardo Lecheta - http://androidosday.com
  3. 3. Material Design Ricardo Lecheta - http://androidosday.com ● Temas
  4. 4. RecyclerView e CardView Ricardo Lecheta - http://androidosday.com
  5. 5. RecyclerView - animações Ricardo Lecheta - http://androidosday.com
  6. 6. Google Wear e Cards Ricardo Lecheta - http://androidosday.com
  7. 7. CardView Ricardo Lecheta - http://androidosday.com
  8. 8. Material Design - Cores Ricardo Lecheta - http://androidosday.com ● Cores
  9. 9. Paleta de Cores Ricardo Lecheta - http://androidosday.com ● http://www.google.com/design/spec/style/color.html
  10. 10. Tema Material
  11. 11. Tema Material ● /res/values/styles.xml Ricardo Lecheta - http://androidosday.com
  12. 12. Tema Material ● /res/values/colors.xml Ricardo Lecheta - http://androidosday.com
  13. 13. Tema Material ● Resultado: Ricardo Lecheta - http://androidosday.com
  14. 14. Material Design Ricardo Lecheta - http://androidosday.com ● Toolbar – Conceito genérico da Action Bar – É uma view como outra qualquer – Podemos animá-la: mover, redimensionar, etc
  15. 15. Material Design Ricardo Lecheta - http://androidosday.com ● Floating Toolbar
  16. 16. Material Design Ricardo Lecheta - http://androidosday.com ● Toolbar
  17. 17. Material Design Ricardo Lecheta - http://androidosday.com ● Toolbar
  18. 18. Toolbar vs Action Bar ● Como utilizar a Toolbar? ● Remova a Action Bar com o tema NoActionBar Ricardo Lecheta - http://androidosday.com
  19. 19. Toolbar vs Action Bar ● Arquivo de layout para Toolbar: – build.gradle: com.android.support:appcompat-v7:22+ Ricardo Lecheta - http://androidosday.com
  20. 20. Toolbar vs Action Bar ● Faz include da Toolbar no Layout (como uma view) Ricardo Lecheta - http://androidosday.com
  21. 21. Toolbar vs Action Bar ● Na activity: setSupportActionBar(toolbar) Ricardo Lecheta - http://androidosday.com
  22. 22. Toolbar vs Action Bar ● Resultado: ● Mesmo de antes Ricardo Lecheta - http://androidosday.com Toolbar
  23. 23. Navigation Drawer ● Métricas e espaçamentos Ricardo Lecheta - http://androidosday.com
  24. 24. Navigation Drawer ● Métricas e espaçamentos Ricardo Lecheta - http://androidosday.com
  25. 25. Navigation Drawer ● Usar a Toolbar ● Menu Lateral Ricardo Lecheta - http://androidosday.com
  26. 26. Navigation Drawer ● Objetivo: ● System bar translúcida ● Menu deve abrir por cima da action bar Ricardo Lecheta - http://androidosday.com
  27. 27. Navigation Drawer ● /res/values/styles.xml Ricardo Lecheta - http://androidosday.com
  28. 28. Navigation Drawer ● /res/values-v21/styles.xml Ricardo Lecheta - http://androidosday.com
  29. 29. Navigation Drawer ● Problema: ● System bar translúcida ● Layout foi desenhado sobre a tela. Ricardo Lecheta - http://androidosday.com
  30. 30. Navigation Drawer ● Problema: – O layout está ocupando a tela inteira, pois a system bar está translúcida ● Solução: – Utilize o fitsSystemWindows="true” na raiz do layout Ricardo Lecheta - http://androidosday.com
  31. 31. Navigation Drawer ● Resultado com ● fitsSystemWindows="true" Ricardo Lecheta - http://androidosday.com
  32. 32. Navigation Drawer ● Problema: – Voltamos ao ponto de partida. – Precisamos desenhar o menu sobre todo o layout. ● Solução: – Utilize o ScrimInsetsFrameLayout – Ele deve ser o layout pai no Menu Nav Drawer Ricardo Lecheta - http://androidosday.com
  33. 33. Navigation Drawer ● ScrimInsetsFrameLayout Ricardo Lecheta - http://androidosday.com
  34. 34. Navigation Drawer ● Resultado com: – ScrimInsetsFrameLayout Ricardo Lecheta - http://androidosday.com
  35. 35. Navigation Drawer ● Tapa final no visual: ● Adicione o header, ● Espaçamentos ● Métricas do Material Design Ricardo Lecheta - http://androidosday.com
  36. 36. Navigation Drawer ● Demo Ricardo Lecheta - http://androidosday.com
  37. 37. Elevação Ricardo Lecheta - http://androidosday.com
  38. 38. Elevação Ricardo Lecheta - http://androidosday.com ● Elementos não podem ocupar o mesmo lugar
  39. 39. Elevação Ricardo Lecheta - http://androidosday.com ● Elevação
  40. 40. Touch Feedback Ricardo Lecheta - http://androidosday.com ● User Input – Surface Reaction
  41. 41. Touch Feedback Ricardo Lecheta - http://androidosday.com ● Efeito “ripple” ● Já existe nos componentes nativos, ex: Button ● Pode ser adicionado nas views. – ?android:attr/selectableItemBackground – ?android:attr/selectableItemBackgroundBorderless
  42. 42. Efeito Ripple ● Cor: colorControlHighlight Ricardo Lecheta - http://androidosday.com
  43. 43. Touch Feedback Ricardo Lecheta - http://androidosday.com ● Efeito “ripple” customizado: – /res/drawable/ripple.xml
  44. 44. Touch Feedback Ricardo Lecheta - http://androidosday.com ● “ripple”
  45. 45. Floating Action Button Ricardo Lecheta - http://androidosday.com ● Efeito “ripple” customizado para criar um FAB: – /res/drawable/fab_oval.xml
  46. 46. Floating Action Button Ricardo Lecheta - http://androidosday.com ● Efeito “ripple” customizado para criar um FAB: – /res/drawable/fab_oval.xml
  47. 47. Floating Action Button Ricardo Lecheta - http://androidosday.com ● Efeito “ripple” customizado para criar um FAB: – /res/drawable/fab_oval.xml
  48. 48. Animate View State Changes Ricardo Lecheta - http://androidosday.com ● User Input – Material Response
  49. 49. Animate View State Changes Ricardo Lecheta - http://androidosday.com ● /res/drawable/raise.xml
  50. 50. Animate View State Changes Ricardo Lecheta - http://androidosday.com ● /res/layout/adapter_carro.xml
  51. 51. Animate View State Changes Ricardo Lecheta - http://androidosday.com ● Fonte: app Google I/O 2014 ● https://github.com/google/iosched
  52. 52. Material Design Ricardo Lecheta - http://androidosday.com ● User Input – Radial Reaction
  53. 53. Material Design Ricardo Lecheta - http://androidosday.com ● Activity Transitions
  54. 54. Material Design Ricardo Lecheta - http://androidosday.com ● Activity Transitions
  55. 55. Material Design Ricardo Lecheta - http://androidosday.com ● Activity Transitions
  56. 56. Material Design Ricardo Lecheta - http://androidosday.com ● Activity Transitions
  57. 57. Material Design Ricardo Lecheta - http://androidosday.com ● Views compartilhadas: No layout de ambas as activities
  58. 58. Material Design Ricardo Lecheta - http://androidosday.com ● ViewCompat para manter a compatibilidade.
  59. 59. Activity Transitions Ricardo Lecheta - http://androidosday.com
  60. 60. Activity Transitions Ricardo Lecheta - http://androidosday.com ● Ligar pelo código
  61. 61. Activity Transitions Ricardo Lecheta - http://androidosday.com ● Ou configurando o tema
  62. 62. Turbine a velocidade do Emulador Ricardo Lecheta - http://androidosday.com ● Dica: Intel® Hardware Accelerated Execution Manager (Intel® HAXM)
  63. 63. Reveal Effect Ricardo Lecheta - http://androidosday.com ● Animação contínua ● Para mostrar ou esconder uma view
  64. 64. Floating Action Button (FAB) ● Representa a ação primária do aplicativo / tela Ricardo Lecheta - http://androidosday.com
  65. 65. Floating Action Button ● Nem todas as telas precisam de um FAB Ricardo Lecheta - http://androidosday.com
  66. 66. Floating Action Button ● O FAB precisa ser uma ação positiva Ricardo Lecheta - http://androidosday.com
  67. 67. Floating Action Button ● O FAB não “deve” ser uma ação negativa Ricardo Lecheta - http://androidosday.com
  68. 68. Floating Action Button ● Não encha a tela de fabs Ricardo Lecheta - http://androidosday.com
  69. 69. Floating Action Button ● Não encha a tela de fabs Ricardo Lecheta - http://androidosday.com
  70. 70. Floating Action Button ● Animações: Ricardo Lecheta - http://androidosday.com
  71. 71. ● Lib no github: ● https://github.com/makovkastar/FloatingActionButton Floating Action Button Ricardo Lecheta - http://androidosday.com
  72. 72. Floating Action Button Ricardo Lecheta - http://androidosday.com
  73. 73. Floating Action Button ● Monitorar eventos de rolagem: ● Show / Hide com animação Ricardo Lecheta - http://androidosday.com
  74. 74. Floating Action Button ● Lib no github: ● https://github.com/makovkastar/FloatingActionButton Ricardo Lecheta - http://androidosday.com
  75. 75. Floating Action Button ● Lib no github: ● https://github.com/futuresimple/android-floating-action-button Ricardo Lecheta - http://androidosday.com
  76. 76. Toolbar e Scroll ● Lib no github: ● https://github.com/ksoichiro/Android-ObservableScrollView Ricardo Lecheta - http://androidosday.com
  77. 77. Toolbar e Scroll ● ObservableRecyclerView: Ricardo Lecheta - http://androidosday.com
  78. 78. Toolbar e Scroll ● ObservableRecyclerView: Ricardo Lecheta - http://androidosday.com
  79. 79. Toolbar e Scroll Ricardo Lecheta - http://androidosday.com
  80. 80. Links Ricardo Lecheta - http://androidosday.com ● Material Design on Android Checklist ● http://android-developers.blogspot.com.br/2014/10/material-design-on-android- checklist.html
  81. 81. Obrigado  Ricardo Lecheta - http://androidosday.com • https://plus.google.com/+RicardoLecheta • https://www.facebook.com/ricardolecheta • http://twitter.com/rlecheta

×