Material Design para Desenvolvedores Android

Slides de um talk realizado no Capivara Codes, conferência de desenvolvedores que aconteceu em Curitiba, Paraná, no dia 01 de Abril de 2017. O talk foi sobre Material Design para Desenvolvedores Android, que mostra como usar algumas ferramentas para melhorar seus projetos Android.

Link: capivara.codes

Transcript

1. Walmyr Carvalho #capiconf Material Design para Desenvolvedores Android
2. Walmyr Carvalho @walmyrcarvalho
6. Material Design?
7. “An exploration to discover what works best"
9. Uma palavra: Consistência.
11. Consistência trás familiaridade, reduz o ruído, torna amigável.
13. O mais interessante do Material Design é que ele é um design language em constante evolução e adaptação.
14. material.io
15. material.io
16. "Legal! Então o Google deixou tudo pronto pra mim?"
18. Material Design no Android
19. NEW! Bottom navigation NEW! Bottom sheets Buttons Buttons: Floating Action Button Cards Chips Data tables Dialogs Dividers Expansion panels Grid lists Lists Menus Pickers Progress & activity Selection controls Sliders Snackbars & toasts Steppers Subheaders Tabs Text fields Toolbars Tooltips Widgets
20. NEW! Bottom Navigation
21. Bottom navigation - Material Guidelines goo.gl/JOPSOt
23. Infelizmente, nem todas as APIs são disponibilizadas pelo Google.
25. Support Libraries
26. Support Libraries NEW! Material Components
27. material.io/components
28. “Walmyr, que trabalheira! Porque eu preciso disso tudo?"
29. goo.gl/hejJLy
30. No meio de milhares de apps lançados diariamente, é preciso se manter relevante. Mas como?
31. goo.gl/NwG9kD
32. Material Design Awards
34. Asana (Fonte: goo.gl/p1se9R)
35. Fabulous (Fonte: goo.gl/p1se9R)
36. Kitchen Stories (Fonte: goo.gl/p1se9R)
37. Ferramentas
38. NEW! Lottie (Airbnb)
39. airbnb.design/lottie
40. dependencies { compile 'com.airbnb.android:lottie:2.0.0-beta3' }
41. <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="hello-world.json" app:lottie_loop="true" app:lottie_autoPlay="true" />
42. val animationView = findViewById(R.id.animation_view) as LottieAnimationView animationView.apply { setAnimation(“hello-world.json”) loop(true) playAnimation() }
43. Lottie - Google Play goo.gl/aTXs80
45. NEW! Shape Shifter (Alex Lockwood, Google)
46. shapeshifter.design Video: Alex Lockwood (Twitter) - goo.gl/mnJisv
47. Após a configuração a ferramenta gera um AnimatedVectorDrawable similar a esse:
48. <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:name="path" android:pathData="M 8 5.14 L 8 19.14 L 19 12.14 L 8 5.14 L 8 5.14 Z" android:fillColor="#ff000000" android:strokeWidth="1"/> </vector> </aapt:attr> <target android:name="path"> <aapt:attr name="android:animation"> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="pathData" android:duration="300" android:valueFrom="M 8 5.14 L 8 19.14 L 19 12.14 L 8 5.14 L 8 5.14 Z" android:valueTo="M 18 18 L 6 18 L 6 6 L 18 6 L 18 18 Z" android:valueType="pathType" android:interpolator="@android:interpolator/fast_out_slow_in"/> </aapt:attr> </target> </animated-vector>
49. NEW! Layer Visualizer + Tree Visualizer (Roman Nurik, Google)
50. Layer Visualizer github.com/romannurik/LayerVisualizer
51. Tree Visualizer github.com/romannurik/LayerVisualizer
52. NEW! Android Asset Studio (Roman Nurik, Google)
53. romannurik.github.io/AndroidAssetStudio/
54. Links marotos
55. Talk: Material Now Matias Duarte (Google) goo.gl/Rb8AFP Slides: Elevating Your Material Design Nick Butcher (Google) goo.gl/9JSkhP Artigo: An Introduction to Animation Techniques Alex Lockwood (Google) goo.gl/kBlmRy
56. Plaid Nick Butcher github.com/nickbutcher/plaid
57. Dúvidas?
58. Android Dev BR - Slack slack.androiddevbr.org
59. Temos muuuuitas vagas! carreiras.99taxis.com
60. Um último lembrete: Menos as vezes é mais.
61. Muito obrigado!