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
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: