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

Material Theming + Material Components: Conhece...

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/

Walmyr Carvalho

February 05, 2019
Tweet

More Decks by Walmyr Carvalho

Other Decks in Technology

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. 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.
  3. Os resultados foram excelentes, inclusive com empresas convertendo mais após

    adotarem o Material Design em seus projetos, por exemplo.
  4. Mas um ponto que se percebeu é que algumas aplicações

    perdiam um pouco a sua marca no meio de tantos aplicativos similares.
  5. O Material Theming é a possibilidade de se flexibilizar o

    Material Design para melhor refletir a marca do seu produto.
  6. 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)
  7. O Google construiu componentes open source do Material Design para

    Android, iOS, Web e Flutter, chamados de Material Components.
  8. 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 }
  9. 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 -->
  10. Caso você ainda não tenha migrado totalmente, você pode utilizar

    temas bridge, como literalmente uma ponte para a migração:
  11. 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 -->
  12. Você também testar os Material Components e utilizar um tema

    AppCompat, através de atributos customizados de cor e texto:
  13. 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>
  14. 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>