MaterialDesingMaterialDesing (711407 byte)

Android Material
Toolbar, FAB buttons, Dailogs
Material Desing
Il Material Design è l’insieme delle linee guida dettate da Google per l’interfaccia del nuovo sistema operativo
Android «L». Il material desing non si applica solo alle applicazione per dispositivi mobile ma a tutte le realtà
informatiche dove vi è una UI (Tv, Web, Smartwatch …). Il material desing si applica alle seguenti sezioni:
Colori
A dominare saranno i colori vivaci accostati grazie ad aree tenui. E’ l’architettura contemporanea a dare lo
spunto.
Font
Sarà Roboto a dominare nel nuovo ambiente grafico con particolare attenzione al contrasto per il
raggiungimento della massima leggibilità.
Immagini
Si alla desaturazione ma stop all’utilizzo di filtri invasivi ed alle modifiche che cambiano la sostanza della
rappresentazione. L’imperativo mantenere l‘integrità originale delle immagini.
Icone
Moderne, eccentriche e minimal. Le icone tornano al significato semiotico del termine: “Il segno è icona
quando la correlazione significante/significato esiste in virtù di una similarità effettiva”. Nessuna arbitrarietà.
2
Material Desing: Toolbar
Con la nuova versione di Android «5.0» il sistema oltre ad aver
adottato una nuova grafica ha incluso dei nuovi componenti
grafici. Il primo e più importante è la Toolbar. Essa è retro
compatibile con le precedenti versioni di Android grazie alla
presenza della libreria «com.android.support:appcompat-v7»
A differenza delle precedenti versioni di Android dove vi era l’Action Bar, di default nell’ultima release di Android la
toolbar non è presente all’interno di un progetto Android. Questo perché la toolbar è diventata un componente
fluttuante all’interno di un activity. Per aggiungere quindi la toolbar alla propria activity bisogna dichiarare
all’interno del file di layout una view di tipo Toolbar.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
3
Material Desing: Toolbar
Una volta definito il file di layout della toolbar sarà necessario creare un nuovo tema
all’interno del file styles.xml per personalizzare la toolbar. Una volta scritto il tema sarà
infine necessario andare a specificare l’utilizzo del tema da noi creato all’interno del
manifest.
4
Material Desing: Toolbar
Infine sarà necessario impostare programmaticamente la toolbar all’activity, in modo che quest’ultima possa
intercettare gli eventi, come la pressione su un icona, e restituire l’azione alla nostra activity
5
Material Desing: Floating Action Button
A differenza da quanto accaduto per la toolbar gli altri componenti grafici come i pulsanti non sono stati aggiunti
da Google ma essi devono essere creati manualmente dallo sviluppatore. Vista la grande comunità di
sviluppatore di Android online si trovano diverse librerie, create anche dagli ingegneri Google, per poter
utilizzare i vari componenti grafici in stile material senza dover andar a creare una nostra implementazione.
Una di queste librerie è https://github.com/futuresimple/android-floating-action-button
6
Material Desing: Floating Action Button
Per utilizzare la libreria sopra indicata come prima cosa bisogna modificare il gradle e inserire l’url per ottenere la
libreria dal maven. Una volta aggiunta la riga «compile 'com.getbase:floatingactionbutton:1.9.0‘» all’interno
della sezione «dependencies» Il gradle una volta sincronizzato effettuerà da solo il download della libreria.
7
Material Desing: Floating Action Button
Per utilizzare i FAB all’interno di un progetto bisogna andare ad aggiungere il FAB desiderato alla view (activity o
fragment).
8
Material Desing: Dialogs
Anche le dialog con il material desing hanno subito un cambiamento in termini di ui. L’unico problema che vi è
utilizzando le dialog è che il desing material viene applicato solo per chi ha Android 5.0, sui device con Android
precedente alla 5 verrano utilizzate le dialog in stile Holo. Per mantenere uno stesso formato di ui anche per le
dialog esistono diverse librerie open source. Una di queste è https://github.com/afollestad/material-dialogs
9
Material Desing: Dialogs
Come per i bottoni una volta importato il progetto nel gradle possiamo utilizzare la libreria all’interno del nostro
progetto.
new MaterialDialog.Builder(this)
.title(R.string.title)
.content(R.string.content)
.positiveText(R.string.agree)
.negativeText(R.string.disagree)
.show();
10