Material Theming + Material Components: Conhecendo na prática as novidades do Material Design para Android

This talk was first held during Android Meetup São Paulo #66, that happened on February 5th, 2019, in São Paulo, Brazil.

I've talked about what's new on Material Design with Material Theming and Components, showed how to implement it on a project and had a demonstration with open source components in a live coding presentation.

The content is in pt-BR.

More info: https://www.meetup.com/pt-BR/GDG-SP/events/258531691/

Transcript

1. Material Theming + Material Components: Conhecendo na prática as novidades do Material Design para Android. Walmyr Carvalho Founder, Developer & Designer @ Kusudama
 Google Developer Expert, Android
2. Olá, meu nome é Walmyr Carvalho! :)
3. E vocês, quem são? :)
4. Material Design: Um leve flashback… ⏳
5. O Material Design é um design language criado pelo Google em 2014, com o objetivo de se unificar experiências entre produtos para mobile, tablet, desktop e até mesmo wearables, carros e TVs.
6. Fonte: Google
7. Os resultados foram excelentes, inclusive com empresas convertendo mais após adotarem o Material Design em seus projetos, por exemplo.
8. Mas um ponto que se percebeu é que algumas aplicações perdiam um pouco a sua marca no meio de tantos aplicativos similares.
10. Como flexibilizar o Material Design para resolver esse tipo de problema?
11. Material Theming: Abraçando seu branding ✨
12. O Material Theming é a possibilidade de se flexibilizar o Material Design para melhor refletir a marca do seu produto.
13. Material Design material.io
14. Utilizando o Material Theming você consegue trabalhar cores, tipografia ou formatos, aplicá-los no seu design e reforçar melhor a marca do seu produto. Fonte: Material Design (Website)
16. Muito legal! Mas como eu faço isso tudo no meu projeto?
17. Material Components: Como utilizar no meu app?
18. O Google construiu componentes open source do Material Design para Android, iOS, Web e Flutter, chamados de Material Components.
20. Material Design - Develop material.io/develop/android
21. allprojects { repositories { google() jcenter() } } build.gradle
22. build.gradle dependencies { // Material Components implementation 'com.google.android.material:material:1.0.0' // Se você ainda não quiser migrar pra esse ou androix: implementation 'com.android.support:design:28.0.0' // Importante: não é recomendado usar os pacotes // com.android support e com.google.android.material // ao mesmo tempo num projeto }
23. Importante: Lembre-se de sempre utilizar a AppCompatActivity, para garantir o funcionamento correto dos componentes.
24. Em seguida, precisamos utilizar um tema específico para os Material Components:
25. themes.xml <style name="Theme.MyApp" parent="Theme.MaterialComponents.Light"> <!-- ... --> </style> <!-- As opções de temas disponíveis são: Theme.MaterialComponents Theme.MaterialComponents.NoActionBar Theme.MaterialComponents.Light Theme.MaterialComponents.Light.NoActionBar Theme.MaterialComponents.Light.DarkActionBar -->
26. Caso você ainda não tenha migrado totalmente, você pode utilizar temas bridge, como literalmente uma ponte para a migração:
27. themes.xml <style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.Bridge"> <!-- ... --> </style> <!-- As opções de temas ponte disponíveis são: Theme.MaterialComponents.Bridge Theme.MaterialComponents.Light.Bridge Theme.MaterialComponents.NoActionBar.Bridge Theme.MaterialComponents.Light.NoActionBar.Bridge Theme.MaterialComponents.Light.DarkActionBar.Bridge -->
28. Você também testar os Material Components e utilizar um tema AppCompat, através de atributos customizados de cor e texto:
29. themes.xml <style name="Theme.MyApp" parent="Theme.AppCompat"> <!-- Original AppCompat attributes. --> <item name="colorPrimary">@color/my_app_primary_color</item> <item name="colorSecondary">@color/my_app_secondary_color</item> <item name="android:colorBackground">@color/my_app_background_color</item> <item name="colorError">@color/my_app_error_color</item> <!-- New MaterialComponents attributes. --> <item name="colorPrimaryVariant">@color/my_app_primary_variant_color</item> <item name="colorSecondaryVariant">@color/my_app_secondary_variant_color</item> <item name="colorSurface">@color/my_app_surface_color</item> <item name="colorOnPrimary">@color/my_app_color_on_primary</item> <item name="colorOnSecondary">@color/my_app_color_on_secondary</item> <item name="colorOnBackground">@color/my_app_color_on_background</item> <item name="colorOnError">@color/my_app_color_on_error</item> <item name="colorOnSurface">@color/my_app_color_on_surface</item> </style>
30. themes.xml <style name="Theme.MyApp" parent="Theme.AppCompat"> <item name="scrimBackground">@color/mtrl_scrim_color</item> <item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item> <item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item> <item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item> <item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item> <item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item> <item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item> <item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item> <item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item> <item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item> <item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item> <item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item> <item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item> <item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item> </style>
31. Certo! E os componentes, cadê?
32. Vamos ver isso na prática?
33. Material Components - GitHub github.com/material-components/material-components-android/
34. Alguém tem alguma dúvida?
35. Links úteis e materiais de estudo
36. Material Design material.io
37. Talk: Material Design Components bit.ly/2Bkstdx Fonte: Android Developers (YouTube)
38. Muito obrigado e até a próxima! ❤ @walmyrcarvalho /walmyrcarvalho walmyr@kusudama.com.br