Material Design
In questa guida vi spiegherò come utilizzare un tema Material Design nella vostra applicazione Android con "Android Studio" (IDE di sviluppo Android)
Nella precedente guida abbiamo visto come creare la nostra prima applicazione Android.
Cos'è il Material Design?
Il Material Design è un linguaggio visivo ideato da Google. Il suo obbiettivo non è altro che:
"Creare un linguaggio visivo che sintetizzi i principi classici di buon design con l'innovazione e le possibilità delle scienza."
Un applicazione per esser definita "Material Design" deve seguire diversi punti guida, fra cui:
- Gli input non possono passare attraverso il Material Design
- Gli oggetti Material Design devono avere lo spessore di 1dp
- Le ombre sono definite dalla posizione dell'oggetto sull'asse Z
- etc...
Un esempio di Material Design:
Le basi del Material Design
Il Material Design in un'applicazione Android non è altro che un tema, che modifica le meccaniche degli oggetti, è supportato solamente da Android Lollipop+ (Android 5.0+), quindi questo metodo su altri dispositivi non funziona.
Per aggiungere questo tema andiamo a modificare lo stile nel file styles.xml (Dentro res > values).
Aggiungiamo il tema con questo codice:
Codice:
<style name="AppTheme" parent="android:Theme.Material.Light">
</style>
Chiaro: Theme.Material.Light
Chiaro con ActionBar scura: Theme.Material.Light.DarkActionBar
Scuro: Theme.Material
Così facendo abbiamo inserito il nostro Material Design nell'applicazione, ma solo per versioni Android 5.0 o maggiori.
Ma chi non ha Lollipop? (Android 5)
Nel caso non aveste la possibilità di sviluppare l'applicazione solamente per dispositivi Android 5+ è possibile usare un'alternativa. Casa Google ha rilasciato una libreria di supporto per aggiungere il Material Design a dispositivi pre-Lollipop, sto parlando di AppCompat v7. (Supporta dispositivi con API 7+)
Aggiungiamo la libreria
Per aggiungere la libreria al vostro progetto dovete cliccare con il destro sul progetto e selezionare "Open Module Settings", aprite la scheda "Dependencies" e, cliccando il + verde a destra, aggiungete:
Codice:
com.android.support:appcompat-v7
Così facendo abbiamo importato la libreria AppCompat v7.
Inserire il Material Design nel progetto
Prima di tutto abbiamo bisogno di aggiungere lo stile nel progetto, aprendo styles.xml (res > values) e aggiungendo questo codice:
Codice:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#bababa</item>
</style>
</resources>
Theme.AppCombat.Light.NoActionBar è "il nome dello stile" (Leva Light per la versione dark)
E' necessario lasciare NoActionBar (La aggiungeremo successivamente)
colorPrimary è il colore della ActionBar (Toolbar)
Nel layout invece, andiamo ad aggiungere l'ActionBar, apriamo il activity_main.xml (res > layout) ed aggiungiamo:
Codice:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"/>
@+id/toolbar serve per dare un id (Codice indentificativo) all'oggetto
Parte codice
Passiamo alla parte codice, qui aggiungeremo la nostra ActionBar.
Aggiungiamo un extends di "ActionBarActivity" al nostro class principale:
Codice:
public class MainActivity extends ActionBarActivity {
Per inizializzare l'ActionBar, aggiungete nel metodo onCreate:
Codice:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setSupportActionBar richiama una funzione da AppCompat che aggiunge l'ActionBar nel layout.
Risultato finale:
Guida scritta interamente da AlessioDP per Inforge.net