Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Olá, meu nome é Walmyr Carvalho! :)

Slide 3

Slide 3 text

E vocês, quem são? :)

Slide 4

Slide 4 text

Material Design: Um leve flashback… ⏳

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

Fonte: Google

Slide 7

Slide 7 text

Os resultados foram excelentes, inclusive com empresas convertendo mais após adotarem o Material Design em seus projetos, por exemplo.

Slide 8

Slide 8 text

Mas um ponto que se percebeu é que algumas aplicações perdiam um pouco a sua marca no meio de tantos aplicativos similares.

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Como flexibilizar o Material Design para resolver esse tipo de problema?

Slide 11

Slide 11 text

Material Theming: Abraçando seu branding ✨

Slide 12

Slide 12 text

O Material Theming é a possibilidade de se flexibilizar o Material Design para melhor refletir a marca do seu produto.

Slide 13

Slide 13 text

Material Design material.io

Slide 14

Slide 14 text

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)

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Muito legal! Mas como eu faço isso tudo no meu projeto?

Slide 17

Slide 17 text

Material Components: Como utilizar no meu app?

Slide 18

Slide 18 text

O Google construiu componentes open source do Material Design para Android, iOS, Web e Flutter, chamados de Material Components.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Material Design - Develop material.io/develop/android

Slide 21

Slide 21 text

allprojects { repositories { google() jcenter() } } build.gradle

Slide 22

Slide 22 text

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 }

Slide 23

Slide 23 text

Importante: Lembre-se de sempre utilizar a AppCompatActivity, para garantir o funcionamento correto dos componentes.

Slide 24

Slide 24 text

Em seguida, precisamos utilizar um tema específico para os Material Components:

Slide 25

Slide 25 text

themes.xml <!-- ... -->

Slide 26

Slide 26 text

Caso você ainda não tenha migrado totalmente, você pode utilizar temas bridge, como literalmente uma ponte para a migração:

Slide 27

Slide 27 text

themes.xml <!-- ... -->

Slide 28

Slide 28 text

Você também testar os Material Components e utilizar um tema AppCompat, através de atributos customizados de cor e texto:

Slide 29

Slide 29 text

themes.xml <!-- 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>

Slide 30

Slide 30 text

themes.xml <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>

Slide 31

Slide 31 text

Certo! E os componentes, cadê?

Slide 32

Slide 32 text

Vamos ver isso na prática?

Slide 33

Slide 33 text

Material Components - GitHub github.com/material-components/material-components-android/

Slide 34

Slide 34 text

Alguém tem alguma dúvida?

Slide 35

Slide 35 text

Links úteis e materiais de estudo

Slide 36

Slide 36 text

Material Design material.io

Slide 37

Slide 37 text

Talk: Material Design Components bit.ly/2Bkstdx Fonte: Android Developers (YouTube)

Slide 38

Slide 38 text

Muito obrigado e até a próxima! ❤ @walmyrcarvalho /walmyrcarvalho [email protected]