Material Design

In Android

Introduzione
Principi del Material Design
Componenti del Material Design
Implementarlo in un'app
Risorse utili

Design Language

Presentato da Google al suo evento I/O il 25 Giugno 2014
Finalmente degli standard di unificazione
Dall' uscita di Lollipop, più del 40% delle app nello store sono in Material Design
Attualmente implementato sulla maggior parte delle applicazioni ufficiali di Google

WebDesign

La maggior parte dei concetti possono essere applicati anche nel Web Design
Esistono versioni di framework appositamente per il material design
Polymer, Bootstrap Material, Angular Material
Da qualche giorno una nuova libreria in CSS da Google

I principi del material Design

Tutta la parte statica del nostro design:

Le cards,
I colori,
le immagini,
la tipografia

Material

Le cards

Le card sono come "fogli di carta" intelligenti

Spessore

Le card hanno larghezza e lunghezza variabile
Spessore sempre 1dp

L' asse Z

Hanno una relazione spaziale fra di loro fisica: le cuciture e le ombreggiature ci permettono di capire il rapporto che hanno fra di loro.

L' asse Z

Hanno una relazione spaziale fra di loro fisica:
Non possono passare attraverso altre cards

Material is the metaphor

Sono "tecnologicamente avanzati": possono dividersi e unirsi

Material is the metaphor

Possono espandersi, cambiare forma e restringersi

Material is the metaphor

Possono mostrare immagini e essere colorate:

"Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch."
Matías Duarte

Material?

I colori

Influenzano profondamente come gli utenti vedono la nostra App.
Nelle specifiche sono presenti delle palette con codici di colori pronte da usare

Tipografia

Roboto è il font principale di Android
E' stato ripensato per il Material Design

Nel dettaglio:

Motion

Tutta la parte dinamica del design
Feedback e Surface Reaction, activity transition

Feedback

Ogni elemento dovrebbe dare un feedback visivo
Effetto ripple sugli elementi: l'utente "rompe" lo stato di quiete dell' interfaccia

Activity Transition

Meaningful transition tra schermate, forzano il focus dell' utente sul contenuto e non sulla transizione, rendendo più facile immaginare cosa aspettarsi dalla schermata successiva.
Disponibili da Android Lollipop (API 21) in su

(Alcuni) Componenti del Material Design

Cards
Griglie
Bottoni
Toolbar
Bottom Sheets
Snackbar

Cards

Componente conveniente per mostrare contenuto composto da elementi differenti.
Ideale per mostrare elementi la cui dimensione o azioni possono variare.

Griglie

Usato per mostrare un insieme di dati omogenei caratterizzato da un'immagine
Se il contenuto principale è il titolo (testo) allora conviene usare una lista
Se bisogna visualizzare più di 3 righe di contenuto, usiamo le Cards

I Bottoni:

Floating Action Button

Rappresenta l'azione principale della nostra applicazione
Non è necessario averne uno in ogni schermata
Solo azioni "positive"
Rotondo, e più in alto di tutto

Esempio di FAB:

FAB con menu:

Raised Button:

Flat Button:

Solitamente rettangolari
"Sono pesanti": aggiungono un livello di elevazione
Facilmente individuabili in una ui piena di elementi

Bottoni più "leggeri", non aggiungono layers
Appropriati per dialogs, cards e toolbar

Raised Button:

Flat Button:

Toolbar

Sostituisce la ActionBar
Appena "sopra" la card su cui la toolbar ha effetto
Una striscia di carta su cui possiamo aggiungere azioni

Bottom sheets

Un foglio di carta che esegue uno slide-in da sotto (Bottom)
Almeno tre o più opzioni che non richiedono spiegazioni
Entry point per altre applicazioni

Snackbar

Un "feedback" leggero riguardo un'operazione appena effettuata.
Un breve messaggio dal basso
Possono contenere un'azione.
La differenza coi toast è che è possibile eseguire lo swipe-to-dismiss.

Originale: http://codepen.io/nw/pen/rVdPQW

Implementarlo in un' app

Material Design == Solo specifiche

Con l' uscita di Lollipop, riguardo al MD sono state aggiunte solo due classi (CardView e RecyclerView)
Sono nate moltissime librerie che permettono di usare widgets in Material Design retrocompatibili

Design Support Library

Al Google I/O di quest'anno hanno rilasciato una libreria che rende retrocompatibili i nuovi elementi del Material Design
Ancora un po' acerba, ma consigliata per le nuove applicazioni

 compile 'com.android.support:design:22.2.0'

Navigation View

Implementa il Navigation Drawer pattern
Permette di aggiungere elementi come se fosse un menu

TextInputLayout

La EditText secondo le specifiche material
Una volta inserito il primo carattere, il suggerimento "naviga" sopra all' input in modo da non perdere il riferimento al contesto

FloatingActionButton

Implementa il Floating Aciton button.
Un bottone rotondo contentente un'azione primaria dell' interfaccia.

Fab in different Android Versions

https://medium.com/android-bites/first-steps-with-the-design-support-library-8dcf06230ddd

SnackBar

Feedback rapido e leggero sull'esito di una operazione

Snackbar.make(
      parentLayout, 
      R.string.snackbar_text,
      Snackbar.LENGTH_LONG)
  .setAction(R.string.snackbar_action, 
    myOnClickListener)
  .show(); // Don’t forget to show!