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

http://www.google.com/design/spec/style/color.html



Tema Material

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

https://github.com/google/iosched

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)

http://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager

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



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


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

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

Toolbar e Scroll

● Lib no github:

● https://github.com/ksoichiro/Android-ObservableScrollView


https://github.com/ksoichiro/Android-ObservableScrollView

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

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

https://plus.google.com/+RicardoLecheta



https://www.facebook.com/ricardolecheta

https://www.facebook.com/ricardolecheta

http://twitter.com/rlecheta

Material design - AndroidosDay 2015

Software

Transcript of Material design - AndroidosDay 2015