Guida Aggiungere il Material Design alla tua applicazione Android - Con Android Studio

Stato
Discussione chiusa ad ulteriori risposte.

AlessioDP

Sviluppatore
Amministratore
30 Gennaio 2012
4,899
216
966
1,801
adcaf3ce7d.jpg

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:
MTI5MDIzOTE2MTIyNTU2NDI2.gif


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>
Sono disponibili 3 varianti del Material Design:
Chiaro: Theme.Material.Light
Chiaro con ActionBar scura: Theme.Material.Light.DarkActionBar
Scuro: Theme.Material
8e6c9db553.jpg

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
, quando lo troverete fate OK.
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>
AppTheme è il nome del tema.
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"/>
?attr/colorPrimary va a prendere il colore dallo stile
@+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);
toolbar sarà la variabile che contiene l'ActionBar
setSupportActionBar richiama una funzione da AppCompat che aggiunge l'ActionBar nel layout.

Risultato finale:
b31a24a906.png


Guida scritta interamente da AlessioDP per Inforge.net
 
Quando hai parlato di appcompat hai detto che è una libreria, dovrei aver visto una cosa del genere anche su xposed, ovviamente dopo aver installato il framework.
Controllo se esiste.
 
Stato
Discussione chiusa ad ulteriori risposte.