Stili e temi

Cos'è che trasforma questa lista:

in quest'altra ?

Risposta: l'applicazione di uno stile.

Tra le due immagini non ci sono differenze “strutturali”. Si tratta della medesima combinazione di ListView e ArrayAdapter usata nei capitoli precedenti.

Il layout usato per raffigurare la singola riga è il seguente:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/rowtext"/>

Quindi anche questo molto elementare.

In questo capitolo impareremo ad usare gli stili nelle interfacce Android. A livello concettuale, non si tratta altro che del porting dei CSS all'interno del framework e solitamente questo è ancora un elemento che fa contenti gli sviluppatori web.

Definire uno stile

Uno stile è una risorsa. Pertanto deve riuscire a trovare il suo posto all'interno della cartella res. Normalmente gli stili vengono ospitati nella sottocartella res/values e codificati mediante il tag XML <style>.

Lo stile che ha trasformato la lista delle figure precedenti è questo:

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="rowstyle">
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:textSize">25sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:background">@drawable/row_background</item>
        <item name="android:paddingLeft">15dp</item>
    </style>
</resources>

È contenuto nel file res/values/row_style e come si vede dimostra che la creazione di uno stile è abbastanza intuitiva:

• si crea un nodo <style>;
• si assegna un attributo name per il nodo <style> e questo diverrà il nome dello stile nel progetto;
• per ogni aspetto dello stile che si vuole curare si aggiunge un sottonodo <item> in cui l'attributo name definirà l'aspetto cui assegnare un valore ed il contenuto del nodo costituirà il valore assegnato.

Nell'esempio ciò che interessava era:

• rendere il testo di colore bianco, in grassetto e leggermente più grande del normale:
  

  <item name="android:textColor">#FFFFFF</item>
  <item name="android:textSize">25sp</item>
  <item name="android:textStyle">bold</item>

• distanziarlo a sinistra dal bordo aggiungendo un po' di padding che potremmo definire un margine interno all'elemento:
  

  <item name="android:paddingLeft">15dp</item>

• dotare ogni TextView di angoli leggermente arrotondati e di un colore di sfondo, sfumato centralmente, che si muove tra le due tonalità di verde
  impiegate nell'interfaccia:
  

  <item name="android:background">@drawable/row_background</item>

Per quanto riguarda i primi due punti non c'è molto da dire. Infatti in questi casi si deve solo cercare nella documentazione il nome dell'attributo che regola un aspetto e dimensionarlo appositamente, ad esempio textColor rappresenta il colore del testo e gli assegniamo il valore esadecimale che rappresenta il bianco. Da notare che come unità di misura del font non è stato usato il dp ma sp. Il concetto alla base di sp è identico a quello dei dp ma è più rispettoso delle problematiche dei font.

Ciò che è particolare è il terzo punto, la creazione dello sfondo. Come si vede rimanda ad un'altra risorsa, di tipo drawable, e di nome row_background. Per fare ciò creeremo un file in una cartella drawable, ad esempio: res/drawable-mdpi/row_background.xml.

Ecco il suo contenuto:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:startColor="#008577"
        android:endColor="#00574B"
        android:gradientRadius="240"
        android:type="radial"/>
    <corners android:radius="5dp"/>
</shape>

Contiene un nodo <shape> che, anche se può sembrare strano, serve a disegnare in XML. Uno shape è una forma, di default rettangolare, che può essere configurata mediante i suoi sottonodi.

Questo shape ha due sottonodi:

• <gradient> che realizza la sfumatura definendo i codici esadecimali dei colori di partenza e di arrivo;
• <corners> indica di quanto devono essere arrotondati gli angoli.

Questo del disegno in XML è uno dei settori più vasti in assoluto tra le risorse Android quindi è necessario studiare la documentazione per ulteriori approfondimenti. Ciò che conta qui è dimostrare come la creazione di uno stile possa essere rapida.

Appena creati questi due file (res/values/row_style.xml e res/drawable-mdpi/row_background.xml) si può applicare il nuovo stile, di nome rowstyle, alla TextView del layout precedente semplicemente assegnando il nome dello stile all'attributo style:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="@style/rowstyle"/>

Ereditarietà tra stili

Un aspetto importante degli stili Android è l'ereditarietà. Non dobbiamo necessariamente partire da zero nel creare uno stile ma possiamo renderli, per così dire, uno il derivato di un altro.

L'esempio precedente potrebbe essere rivisto così:

<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="rowstyle" parent="@style/rowbackground">
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">25sp</item>
<item name="android:textStyle">bold</item>
</style>
<style name="rowbackground">
<item name="android:background">@drawable/row_background</item>
<item name="android:paddingLeft">15dp</item>
</style>
</resources>

Esistono ora due stili:

• rowbackground che gestisce solo il background;
• rowstyle che contiene le proprietà relative al testo ma con l'attributo parent dichiara di essere “figlio di rowbackground”. Per questo rowstyle includerà in sé tutte le valorizzazioni espresse nello stile-padre.

Il vantaggio di ciò è che si può stratificare la creazione di stili evitando di ripetere configurazioni simili in stili diversi. Potremmo, ad esempio, creare un altro stile per il testo ma sempre figlio di rowbackground. Questo nuovo stile creerebbe testo diverso da rowstyle ma con lo stesso sfondo.

Temi

Per tema, si intende in Android nient'altro che uno stile applicato ad un'Activity o all'intera applicazione. Il modo in cui si fa questo consiste nell'inserire l'attributo android:Theme nel file AndroidManifest.xml all'interno di un nodo <activity> o <application>.

Il valore di android:Theme sarà l'id di una risorsa stile definita come precedentemente spiegato.

Non si può parlare di temi Android, al giorno d'oggi, senza citare tutto ciò che l'affermazione del Material Design ha portato con sè a partire dalla versione 5.0 del sistema. Questa nuova generazione ha condizionato fortemente lo sviluppo delle interfacce utente, e se ne può approcciare lo studio con la nostra guida appositamente dedicata.