Draw 9-patch: le immagini auto-adattanti di Android

Qualche tempo fa – dopo mesi di sviluppo multi-piattaforma su Titanium per una sola piattaforma (iOS) – finalmente mi è capitato di dover mettere mano anche al lato verde dello sviluppo mobile, quello della piattaforma Android.

Su un progetto mi è stato mostrato un tool presente solo su Android per generare immagini auto-adattanti al contenuto e al contenitore – il Draw 9-patch – utilizzato in un progetto per generare l’immagine “splash” dell’applicazione. Ora finalmente mi sono ricordato che mi ero detto di approfondire un po’ la cosa, e ho notato che non c’è molta documentazione al riguardo (almeno in italiano), quindi eccomi qui.

La “tecnologia”

Quelli di Google non hanno badato a spese per progettare e realizzare questo formato di file… si tratta infatti di una semplice immagine png con estensione .9.png, e contenente delle righe nere all’interno del file.
Sviluppando in nativo questi immagini devono essere piazzate dentro la directory res/drawable, utilizzando Titanium invece vanno dentro assets/android.

Esempio di immagine 9-patch

Esempio di immagine 9-patch


Sui lati dell’immagine si possono tracciare delle righe nere (solid) di un pixel, ciascuna delle quali ha un significato. Quelle sui bordi superiore e sinistro definiscono la/le superfici che possono essere “stirate” (stretched), mentre sulla destra e sotto si possono (opzionalmente) tracciare le righe che definiscono le aree che possono essere riempite – adattandone le dimensioni – con del contenuto, come ad esempio testo o altre icone.
I bordi superiore e sinistro sono fondamentali quando si vogliono creare degli splash screen adattivi, quelli destro e inferiore al contrario servono soltanto se l’immagine che si sta creando serve da sfondo per pulsanti o contenitori, all’interno dei quali si dovranno inserire testo e/o altre immagini.
Questi bordi, presenti nell’immagine “sorgente”, saranno poi naturalmente eliminati dall’immagine risultante.

Da notare come l’intersezione dei bordi superiore e sinistro, e quella dei bordi inferiore e destro formino delle superfici, superfici che chiaramente non possono essere “negative”. Queste immagini possono quindi adattarsi soltanto aumentando di dimensione, e non scaleranno mai più dell’immagine originaria, che deve quindi essere considerata come caso “più piccolo”.

Il tool Android fornito con l’SDK

All’interno dell’SDK di Android, e più precisamente nella directory sdk/tools, si può trovare il potentissimo strumento per gestire questi tipi di file. Su Windows si lancia con il bat draw9patch.bat.
Draw9patch - Tool
Trattasi di un eseguibile java che prende in ingresso un file png e – attraverso opportuni trascinamenti dei bordi – permette di definire quali aree sono adibite allo “stretching” (stiramento) e quali al “filling” (riempimento).

Senza scomodare tool sconosciuti: Gimp

Stiamo lavorando con un’immagine png, nessuno ci vieta quindi di utilizzare il nostro editor di immagini preferito, nel mio caso Gimp.
Draw9patch - Gimp
Se decidiamo di utilizzare un editor, qualunque esso sia, bisogna però fare attenzione che questo non aggiunga artefatti, trasparenze non volute o anti-aliasing che possano “rompere” le convenzioni del 9-patch Android. Una volta modificata l’immagine forse conviene quindi andare a testarla su dispositivi diversi per verificare che il risultato sia sempre quello atteso.

Test su emulatore Genymotion

Test su emulatore Genymotion

2 pensieri su “Draw 9-patch: le immagini auto-adattanti di Android

  1. paolo

    salve, è poco chiaro il passaggio tra l’editor e gimp, l editor 9 patch utilizza un programma di grafica esterno? grazie

    Rispondi
    1. mpic Autore articolo

      Ciao Paolo, per prima cosa ti chiedo scusa per questa risposta sicuramente tardiva, eri finito nello spam e non controllo quasi mai.
      In sintesi direi che il 9-patch te lo puoi generare come ti pare, potenzialmente anche con il paint, ma è meglio usare un editor apposito come quelli che si trovano online perché non è semplicissimo posizionare i bordi per ottenere il risultato voluto. Fatto questo puoi usare qualunque programma di grafica per modificare l’immagine, quindi anche il Gimp, ma bisogna stare attenti a non toccare il bordo di 1 pixel perché quel bordo deve seguire le convenzioni suddette per rendere l’immagine una 9-patch, e se metti un pixel nel posto sbagliato “rompi” il meccanismo.

      Rispondi

Rispondi a paolo Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.