Material design - AndroidosDay 2015

Material Design
Ricardo Lecheta - http://androidosday.com

Material Design
● Temas

RecyclerView e CardView

RecyclerView - animações

Google Wear e Cards

CardView

Material Design - Cores
● Cores

Paleta de Cores
● http://www.google.com/design/spec/style/color.html

Tema Material
● /res/values/styles.xml

Tema Material
● /res/values/colors.xml

Tema Material
● Resultado:

Material Design
● Toolbar
– Conceito genérico da Action Bar
– É uma view como outra qualquer
– Podemos animá-la: mover, redimensionar, etc

Material Design
● Floating Toolbar

Material Design
● Toolbar

Toolbar vs Action Bar
● Como utilizar a Toolbar?
● Remova a Action Bar com o tema NoActionBar

● Arquivo de layout para Toolbar:
– build.gradle: com.android.support:appcompat-v7:22+

● Faz include da Toolbar no Layout (como uma view)

● Na activity: setSupportActionBar(toolbar)

● Resultado:
● Mesmo de antes
Toolbar

Navigation Drawer
● Métricas e espaçamentos

Navigation Drawer
● Usar a Toolbar
● Menu Lateral

Navigation Drawer
● Objetivo:
● System bar translúcida
● Menu deve abrir por cima da action bar

Navigation Drawer
● /res/values/styles.xml

Navigation Drawer
● /res/values-v21/styles.xml

Navigation Drawer
● Problema:
● System bar translúcida
● Layout foi desenhado sobre a tela.

Navigation Drawer
● Problema:
– O layout está ocupando a tela inteira, pois a system bar
está translúcida
● Solução:
– Utilize o fitsSystemWindows="true” na raiz do layout

Navigation Drawer
● Resultado com
● fitsSystemWindows="true"

Navigation Drawer
● Problema:
– Voltamos ao ponto de partida.
– Precisamos desenhar o menu sobre todo o layout.
● Solução:
– Utilize o ScrimInsetsFrameLayout
– Ele deve ser o layout pai no Menu Nav Drawer

Navigation Drawer
● ScrimInsetsFrameLayout

Navigation Drawer
● Resultado com:
– ScrimInsetsFrameLayout

Navigation Drawer
● Tapa final no visual:
● Adicione o header,
● Espaçamentos
● Métricas do Material Design

Navigation Drawer
● Demo

Elevação

Elevação
● Elementos não podem ocupar o mesmo lugar

Elevação
● Elevação

Touch Feedback
● User Input – Surface Reaction

Touch Feedback
● Efeito “ripple”
● Já existe nos componentes nativos, ex: Button
● Pode ser adicionado nas views.
– ?android:attr/selectableItemBackground
– ?android:attr/selectableItemBackgroundBorderless

Efeito Ripple
● Cor: colorControlHighlight

Touch Feedback
● Efeito “ripple” customizado:
– /res/drawable/ripple.xml

Touch Feedback
● “ripple”

Floating Action Button
● Efeito “ripple” customizado para criar um FAB:
– /res/drawable/fab_oval.xml

Animate View State Changes
● User Input – Material Response

● /res/drawable/raise.xml

● /res/layout/adapter_carro.xml

● Fonte: app Google I/O 2014
● https://github.com/google/iosched

Material Design
● User Input – Radial Reaction

Material Design
● Activity Transitions

Material Design
● Views compartilhadas: No layout de ambas as activities

Material Design
● ViewCompat para manter a compatibilidade.

Activity Transitions

● Ligar pelo código

● Ou configurando o tema

Turbine a velocidade do Emulador
● Dica: Intel® Hardware Accelerated Execution Manager (Intel® HAXM)

Reveal Effect
● Animação contínua
● Para mostrar ou esconder uma view

Floating Action Button (FAB)
● Representa a ação primária do aplicativo / tela

● Nem todas as telas precisam de um FAB

● O FAB precisa ser uma ação positiva

● O FAB não “deve” ser uma ação negativa

● Não encha a tela de fabs

● Animações:

● Lib no github:
● https://github.com/makovkastar/FloatingActionButton

● Monitorar eventos de rolagem:
● Show / Hide com animação

● Lib no github:
● https://github.com/makovkastar/FloatingActionButton

● Lib no github:
● https://github.com/futuresimple/android-floating-action-button

Toolbar e Scroll
● Lib no github:
● https://github.com/ksoichiro/Android-ObservableScrollView

Toolbar e Scroll
● ObservableRecyclerView:

Toolbar e Scroll

Links
● Material Design on Android Checklist
● http://android-developers.blogspot.com.br/2014/10/material-design-on-android-
checklist.html

Obrigado 
• https://plus.google.com/+RicardoLecheta
• https://www.facebook.com/ricardolecheta
• http://twitter.com/rlecheta

Material design - AndroidosDay 2015

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to Material design - AndroidosDay 2015

Similar to Material design - AndroidosDay 2015 (20)

Recently uploaded

Recently uploaded (20)

Material design - AndroidosDay 2015