Material design - Teoria e prática

Material Design:Teoria e prática

Eduardo Costa

@eduardoscosta

Sobre...

Talvez já tenha sido colega de vocês...

Com isso, provavelmente tive contato com um pouco de cada tecnologia e linguagem que se trabalha por ai...

Instrutor de cursos de iOS, Android e Windows Phone...

Organizer do GDG POA

Material Design?

Desenvolvimento de um sistema único que possibilita experiências similares nas diversas plataformas e dispositivos.

Conceitos

Aceleradoras e

investidores

Superfícies tangíveis

Animações

Experiência multiplataforma

Print like design

Superfícies Tangíveis

Eixo Z

O ambiente do Material é 3D, logo todos objetos tem dimensões x, y, e z

Cada “folha” tem espessura de 1dp

A tela pode ser vista como um conjunto de folhas de papel

Folhas criam sombra nas folhas abaixo

Evitar muitas superfícies, entre 2 e 10 é o recomendado

Elementos de uma lista, ao serem tocados, podem sofrer uma animação de elevação

<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_enabled="true" android:state_pressed="true">

<objectAnimatorandroid:duration="@android:integer/config_shortAnimTime"android:propertyName="translationZ"android:valueTo="@dimen/touch_raise"android:valueType="floatType" />

</item><item>

<objectAnimatorandroid:duration="@android:integer/config_shortAnimTime"android:propertyName="translationZ"android:valueTo="0dp"android:valueType="floatType" />

</item></selector>

Exemplo de animação

Elevação no click

Luz e sombra

No ambiente Material temos luzes virtuais que iluminam o ambiente, permitindo assim que objetos tenham sombras

A sombra é composta em conjunto com o novo eixo Z

Permite criar um ambiente de sobreposição de superficies

Dar diferentes importâncias para cada superfície

Cards

Cards são um agregador que estende FrameLayout e representam um conjunto de informações.Os Cards da support lib já trazem elevação, sombra e cantos arredondados

Uso exagerado de cards é ruim, eles devem ser colocados onde o conteúdo exija maior número de ações, informações, etc…

Para conteúdo com menos informações, com foco em imagens ou muito homogêneas temos as Listas e Grids

Print like Design

Tipografia

Foi criada uma Escala tipográfica, onde você pode verificar qual melhor estilo para sua Titulo, Sub Titulo, conteúdo, etc…

android:textAppearance= “@style/TextAppearance.AppCompat.Title”

Keylines

O uso de espaço em branco para criar estruturas é incentivado, assim como a utilização de cores vibrantes e de grande contraste (primary e accent)

Cores

Idealmente a cor primária e a de destaque (accent) devem possuir grande contraste, possibilitando maior destaque para os elementos chave da UI como FAB, aba selecionada e campos de formulário

Material theme

Material theme <style name="Theme.MyTheme" parent="Theme.AppCompat.Light">

<item name="colorPrimary">@color/my_awesome_color</item>

<item name="colorPrimaryDark">@color/my_awesome</item>

<item name="colorAccent">@color/accent</item>

</style>

@android:style/Theme.Material (dark version)

@android:style/Theme.Material.Light (light version)

@android:style/Theme.Material.Light.DarkActionBar

Paletas

Permite extrair cores das imagens

Palette.generateAsync(bitmap,new Palette.PaletteAsyncListener() {

@Overridepublic void onGenerated(Palette palette) {

Palette.Swatch vibrant =palette.getVibrantSwatch();

if (swatch != null) {// If we have a vibrant color// update the title TextViewtitleView.setBackgroundColor(

vibrant.getRgb());titleView.setTextColor(

vibrant.getTitleTextColor());}

}});

Imagens

Imagens, icones e fotos não deveriam ter sombra, nem elevação em relação a superfície

Imagens devem ser imersivas, de preferência

ocupando de ponta a ponta

Animações

O que fazer?

Elementos nunca aparecem e desaparecem, todos agem em harmonia com animações que fazem “sentido” para o usuário.

Ajudam a dar maior noção do que está acontecendo para o usuário.

Não fazer animação sem uma razão.

Transition Animation

na origem:

ActivityOptionsCompat options =ActivityOptionsCompat.makeSceneTransitionAnimation(

getActivity(), view.findViewById(R.id.icon), Constantes.EXTRA_IMAGE);

ActivityCompat.startActivity(getActivity(), intent, options.toBundle());

no destino:

ViewCompat.setTransitionName(icon, Constantes.EXTRA_IMAGE);

E mais...

Ripple

Podem ser usadas em mudança de estado de ícones (um “+” virando um “x”)

AnimatedStateListDrawable

Animações não deveriam durar mais do que 300 ms

Multiplataforma

Experiência

Torna a aplicação mais simples de ser utilizada independente da plataforma, usuário consegue aplicar seu conhecimento de usabilidade em qualquer dispositivo.

A experiência do usuário deve ser consistente entre todas as Telas (phone, tablet, laptop, TV, relogio, carros...

Na prática...

Sai ActionBar, entra ToolBar

ActionBar- é dificil de manipular- não faz parte da hierarquia de views

ToolBar- fácil de usar- emula todo comportamento da actionbarantiga- é uma view dentro da hierarquia que pode ser manipulada e estilizada como qualquer ViewGroup

ToolBar <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/drawer_layoutandroid:layout_width="match_parentandroid:layout_height="match_parenttools:context=".MainActivity

<LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"

android:orientation="vertical"><android.support.v7.widget.Toolbar

android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:minHeight="?attr/actionBarSize"android:background="?attr/colorPrimary"app:theme="@style/ThemeOverlay.AppCompat"/>

<outros controles> ...</LinearLayout>

</android.support.v4.widget.DrawerLayout>

ToolBar <android.support.v7.widget.Toolbarandroid:layout_height="wrap_content"android:layout_width="match_parent"android:minHeight="@dimen/triple_height_toolbar"app:theme="@style/ThemeOverlay.AppCompat.ActionBar"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

import android.support.v7.widget.Toolbar;

@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.my_layout);

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);setSupportActionBar(toolbar);

}

Navigation Drawer

Navigation Drawer

Tela toda!

Referências Guideline Oficial

http://www.google.com/design/spec/material-design/introduction.html

Android Developers Guide

https://developer.android.com/training/material/index.html

Android Checklist

http://android-developers.blogspot.com.br/2014/10/material-design-on-android-checklist.html

Chris Banes - appCompat v21

https://chris.banes.me/2014/10/17/appcompat-v21/

Eduardo [email protected]

@eduardoscosta

craftbox.com.br

Obrigado!