material design - teoria e prática
DESCRIPTION
Apresentação feita no Meetup do GDG Poa de Novembro sobre material desingTRANSCRIPT
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/