DevCorner: sveliamo il mistero delle risorse grafiche

I nostri lettori sicuramente sapranno che esistono migliaia di schermi sul panorama Android, con diverse risoluzioni e, di conseguenza, diverse densità. In questo contesto, chi ne risentirebbe di più sarebbero, senza dubbio, le risorse grafiche: con tutte le variabili in gioco, si riuscirebbe ad avere una determinata immagine visualizzata in maniera perfetta per pochissimi dispositivi, mentre per gli altri risulterebbe distorta, fuori fuoco oppure compressa. Per fortuna, Android si basa non tanto sulla risoluzione ma, principalmente, sulla densità dello schermo.

Cosa vuol dire questo? Significa che, quando è necessario creare delle icone o, più in generale, delle immagini, non penseremo in termini di pixel ma, più verosimilmente, di dp, ovvero l'unità di misura che non è dipendente dalla densità dello schermo. Facciamo però un esempio per chiarirci le idee: supponiamo di avere un'immagine da 100x100 px. Su un Nexus 5, con risoluzione Full HD, vedremmo un quadrato di una certa dimensione, che è circa 1/19 e 1/10 dei lati del nostro schermo.

Prendiamo invece un Nexus 4, con risoluzione HD: con un numero di pixel nettamente inferiore, nello stesso spazio, il quadrato sarà sicuramente più grande. Creare dei layout uniformi con i pixel puri sarebbe quindi estremamente complesso.

Per questo motivo, Android si basa su fasce di densità: generalmente gli schermi medi (MDPI) sono quelli che hanno una densità che varia intorno ai 160 dpi, si passa poi agli schermi HDPI (240 dpi), XHDPI (320 dpi), XXHDPI (480 dpi) e, a breve, anche XXXHDPI. Grazie a questa suddivisione, è molto più semplice creare delle risorse che si vedano in maniera più nitida su ogni tipo di schermo.

Dalle linee guida, estraiamo poi le dimensioni che Android si aspetta per le immagini: ad esempio, l'icona per il launcher dovrebbe essere un quadrato di 48 dp per lato. Ma come arriviamo ai pixel che ci servono su Illustrator? Tramite una semplice formula matematica!

px = dp × density ÷ 160

Quindi, prendendo l'esempio del XHPDI, con una densità di 320 dpi, otterremo

px = 48dp x 320dpi ÷ 160 = 96px

Fortunatamente, non dovremo realizzare a mano tutte le dimensioni che ci interessano, ma ci basterà creare un'immagine sufficientemente grande e sfruttare un tool open source messo a disposizione da Roman Nurik, Android Asset Studio, per avere a portata di mano un comodo archivio contenente le differenti versioni delle immagini suddivise nelle cartelle pronte da incollare tra le risorse del progetto.

Abbiamo appena iniziato a scalfire la superficie di quello che è il supporto a differenti schermi su Android, ma non mancheremo di esplorarne altri meandri.