Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

B567f69eed037ed20536fc825305a38d?s=128

Walmyr Carvalho

February 05, 2019
Tweet

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.
  9. None
  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)
  15. None
  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.
  19. None
  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