Material design - AndroidosDay 2015

419 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
419
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
15
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

×