Italian Risoluzioni e densita'

[giannimaione]

Ciao gianni,

ti consiglio di cancellare questo Link, prima che ci casca qualcuno dentro

link cancellato per motivi di sicurezza!
grazie Filippo per il tuo suggerimento

 

[AlpVir]

Cliccando sul link proposto da giannimaione appare un avvertimento

Il sito web android.devapp.it è stato segnalato come sito web malevolo ed è stato bloccato sulla base delle impostazioni di sicurezza correnti.

Almeno questo è quello che capita a me; ed agli altri 21 che fino ad adesso (ore 17:04 del 26 aprile) ha letto questo intervento cosa è successo ?

 

[giannimaione]

ciao ALPVIR,
hai ragione :signOops:
comunque ho fatto un "copia/incolla" almeno della parte testo.
Pensavo di fare cosa gradita; io ho approfondito alcuni aspetti in merito alle diverse risoluzioni dei device Android.

ecco il contenuto del link (escluso le immagini)

A differenza di uno sviluppatore iOS che sa esattamente su che tipo di device/schermo verrà usata la propria applicazione, lo sviluppatore Android ha talmente tanta scelta che può quasi sentirsi a disagio. Disagio perché le centiaia di modelli di telefoni Android in commercio hanno le risoluzioni e le dimensioni degli schermi più disparate. La soluzione è davvero riscrivere la nostra applicazione per ogni risoluzione come sostengono alcuni? Mamma Google non ci lascebbe MAI (o non gli conviene lasciarci?) con una incombenza di questo tipo: la frammentazione del mondo Android infatti in questo caso risente dei suoi limiti, ma ovviamente una soluzione c’è! Cerchiamo quindi di pensare in proporzionale: abbandoniamo il “pixel” (px) e abbracciamo il “density-independent pixel” (dp)!

Risoluzioni e densità

La risoluzione standard per i telefoni attualmente in commercio è HVGA, cioè Half-size Video Grafic Array, che in numeri fa 320 x 480 pixel. Per intendersi, è quella che ha anche iPhone pre-retina display. Se si ragiona in assoluto però come si fa con iPhone, si rischia di sballare tutte le proporzioni degli elementi della nostra interfaccia su risoluzioni differenti.

Risoluzioni comuni in Android

Per semplificare le cose, gli sviluppatori Android hanno raggruppato le dimensioni degli schermi in una griglia in base alle combinazioni tra risoluzione (px) e densità dei pixel (dpi).

Griglia risoluzioni/densità

Le risoluzioni sono divise in small, normal, large e xlarge mentre le densità in ldpi (low density), mdpi (medium density), hdpi (high density) e xhdpi (extra high density).

Come avevamo accennato, anche per Google uno schermo normale è HVGA: tuttavia dalla pagina Screen Sizes and Densities su Android Developers risulta che al momento il 75% degli schermi è WVGA (Wide VGA). Riuscire a creare un layout one-size-fits-all (cioè uno per tutti, tipo i 3 moschettieri…) non è banale: per esempio conviene distinguere almeno le interfacce tablet (xlarge) da quelle degli smartphone per questioni di superficie disponibile e soprattutto di usabilità. Dal lato nostro possiamo ingegnerizzare il codice organizzandolo in Fragments (che vedremo prossimamente) e “rimontarlo” a piacimento a seconda del layout attivo in quel momento.
Dimensione vs densità

Quando sviluppiamo un’interfaccia grafica per Android, quello di cui dobbiamo preoccuparci non è tanto la dimensione dello schermo quanto la sua densità: sarà questa infatti a pilotare le dimensioni effettive di un elemento sullo schermo. L’importante però è mantenere le proporzioni. Se pensiamo alla Home per esempio, indipendentemente dalla risoluzione e delle dimensioni dello schermo, essa contiene sempre quattro icone: questo risultato si ottiene utilizzando un’unità di misura indipendente dai pixel chiamata density-independent pixel.

Un Density-Independent Pixel (dp) è equivalente ad 1px su uno schermo da 160dpi, ovvero la densità base riferita ad uno schermo a densità media. A runtime poi le dimensioni vengono scalate in base ai dp specificati e alla risoluzione effettiva. A chi piace la matemarica risulterà più chiaro che 1 pixels = DP * (DPI / 160).

Se abbiamo a che fare con immagini la situazione è più complicata perché non possiamo prescindere dalle 4 risoluzioni consigliate da Google: usare una immagine a bassa risoluzione in uno schermo ad alta infatti non è consigliabile (a meno che non vi piaccia l’effetto “pixelloni” anni ’80). Proprio per questo motivo ogni progetto Android è pronto a gestire le 4 risoluzioni! Se non stiamo attenti si rischia di avere immagini non adatte alla risoluzione corrente come in figura:

Stessa immagine, risoluzioni diverse

Inserendo una icona 100×100 px a 72 pdi su uno schermo ldpi, apparirà grande e sgranata. Al contrario, la stessa immagine su uno schermo hdpi apparirà troppo piccola!
Scalare le immagini

Nel caso si abbia a che fare con una immagine da 100×100 px, è necessario che venga riadattata per le 4 densità secondo il rapporto 3:4:6:8 tra le 4 densità. Se quindi la risoluzione base (100) è mdpi (che corrisponde al rapporto 4) si ottiene:

ldpi: 75 × 75, cioè 3/4 della risoluzione base (100 * 3 / 4 = 75);
mdpi: 100 × 100;
hdpi: 150 × 150, cioè una volta e mezzo la risoluzione base (100 * 6 / 4 = 100 * 3 / 2 = 100 * 1,5 = 150);
xhdpi: 200 × 200, cioè il doppio della risoluzione base (100 * 8 / 4 = 100 * 2 = 200) a queste risoluzioni dovrebbe corrispondere Google TV, non gli smartophones.

Dovremo quindi produrre 4 immagini:

Immagini necessarie per copire le 4 densità

Ok, abbiamo creato le immagini. E adesso? Come faccio a dire ad Android quale usare? Fortunatamente questo non spetta a noi. Basta infatti creare nella cartella res del progetto Android opportune sotto-cartelle che seguono la seguente nomenclatura:

drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi

E la prima cartella cosa conterrà? Come è facile intuire, in essa verranno inseriti tutti i file che non dipendono dalla risoluzione. Gli unici in grado di poter scalare senza sgranare sono i file SVG o le shape drawable.
Conclusioni

La diversificazione ha portato Android a crescere notevolmente in un breve arco di tempo. Ha portato però anche noi sviluppatori a doverci preoccupare di gestire le diverse tipologie di schermo di cui sono dotati i telefoni Android. Grazie però ad un efficiente sistema di gestione delle risorse, si riesce ad aggirare il problema in diversi modi, sfruttando i formati scalabili o creando diverse versioni di una immagine. A mio avviso conviene imparare a sfruttare, dove possibile, uno strumento come le shape drawable per la grande flessibilità che comportano. Ringraziamo Smashing Magazine per aver ispirato questo post.

 

[giannimaione]

strano ?
Firefox avverte che c'è un pericolo
google chrome invece va spedito.

In ogni caso utilizzate la massima cautela.

 

[AlpVir]

Con Chrome il mio antivirus Avast interviene e segnala un cavallo di Troia.
Di bene in meglio !
Al di la di tutto questo le informazioni riportate (solo in testo) da giannimaione mi interessano particolarmente perchè finora non ho mai affrontato il problema relativo ai dpi ed alle diverse risoluzioni dei vari device.
Conosci (conoscete) altri documenti su questo argomento, magari persino più approfonditi e con immagini esemplificative ? (possibilmente nella lingua di Manzoni)

 

[maxware]

Ciao Raga
Confermo sul mio google crome mi segnala la stessa cose di AlpVir
Mamo

 

[Dominex]

Con Chrome il mio antivirus Avast interviene e segnala un cavallo di Troia.
Di bene in meglio !
Al di la di tutto questo le informazioni riportate (solo in testo) da giannimaione mi interessano particolarmente perchè finora non ho mai affrontato il problema relativo ai dpi ed alle diverse risoluzioni dei vari device.
Conosci (conoscete) altri documenti su questo argomento, magari persino più approfonditi e con immagini esemplificative ? (possibilmente nella lingua di Manzoni)

Anche il mio NOD32 segnala un cavalluccio Troiano...

 

[Deleted member 103]

Ciao gianni,

ti consiglio di cancellare questo Link, prima che ci casca qualcuno dentro.


Ciao,
Filippo

 

[timo]

Da me sono stati segnalati 2 troyans e 2 non meglio definiti malwares.
Non ero comunque sicuro prevenissero da li.

 

[ivanomonti]

help --

Riesci a fare un esempio pratico da studiarci, questo articolo e molto importante secondo me, e vale spendere 10 minuti del tuo tempo per fare un esempio concreto.

Se vuoi te lo pago, penso che vale e chiarire molti aspetti.

Ivano Monti ( nuovo di B4A )

ciao ALPVIR,
hai ragione :signOops:
comunque ho fatto un "copia/incolla" almeno della parte testo.
Pensavo di fare cosa gradita; io ho approfondito alcuni aspetti in merito alle diverse risoluzioni dei device Android.

ecco il contenuto del link (escluso le immagini)

A differenza di uno sviluppatore iOS che sa esattamente su che tipo di device/schermo verrà usata la propria applicazione, lo sviluppatore Android ha talmente tanta scelta che può quasi sentirsi a disagio. Disagio perché le centiaia di modelli di telefoni Android in commercio hanno le risoluzioni e le dimensioni degli schermi più disparate. La soluzione è davvero riscrivere la nostra applicazione per ogni risoluzione come sostengono alcuni? Mamma Google non ci lascebbe MAI (o non gli conviene lasciarci?) con una incombenza di questo tipo: la frammentazione del mondo Android infatti in questo caso risente dei suoi limiti, ma ovviamente una soluzione c’è! Cerchiamo quindi di pensare in proporzionale: abbandoniamo il “pixel” (px) e abbracciamo il “density-independent pixel” (dp)!

Risoluzioni e densità

La risoluzione standard per i telefoni attualmente in commercio è HVGA, cioè Half-size Video Grafic Array, che in numeri fa 320 x 480 pixel. Per intendersi, è quella che ha anche iPhone pre-retina display. Se si ragiona in assoluto però come si fa con iPhone, si rischia di sballare tutte le proporzioni degli elementi della nostra interfaccia su risoluzioni differenti.

Risoluzioni comuni in Android

Per semplificare le cose, gli sviluppatori Android hanno raggruppato le dimensioni degli schermi in una griglia in base alle combinazioni tra risoluzione (px) e densità dei pixel (dpi).

Griglia risoluzioni/densità

Le risoluzioni sono divise in small, normal, large e xlarge mentre le densità in ldpi (low density), mdpi (medium density), hdpi (high density) e xhdpi (extra high density).

Come avevamo accennato, anche per Google uno schermo normale è HVGA: tuttavia dalla pagina Screen Sizes and Densities su Android Developers risulta che al momento il 75% degli schermi è WVGA (Wide VGA). Riuscire a creare un layout one-size-fits-all (cioè uno per tutti, tipo i 3 moschettieri…) non è banale: per esempio conviene distinguere almeno le interfacce tablet (xlarge) da quelle degli smartphone per questioni di superficie disponibile e soprattutto di usabilità. Dal lato nostro possiamo ingegnerizzare il codice organizzandolo in Fragments (che vedremo prossimamente) e “rimontarlo” a piacimento a seconda del layout attivo in quel momento.
Dimensione vs densità

Quando sviluppiamo un’interfaccia grafica per Android, quello di cui dobbiamo preoccuparci non è tanto la dimensione dello schermo quanto la sua densità: sarà questa infatti a pilotare le dimensioni effettive di un elemento sullo schermo. L’importante però è mantenere le proporzioni. Se pensiamo alla Home per esempio, indipendentemente dalla risoluzione e delle dimensioni dello schermo, essa contiene sempre quattro icone: questo risultato si ottiene utilizzando un’unità di misura indipendente dai pixel chiamata density-independent pixel.

Un Density-Independent Pixel (dp) è equivalente ad 1px su uno schermo da 160dpi, ovvero la densità base riferita ad uno schermo a densità media. A runtime poi le dimensioni vengono scalate in base ai dp specificati e alla risoluzione effettiva. A chi piace la matemarica risulterà più chiaro che 1 pixels = DP * (DPI / 160).

Se abbiamo a che fare con immagini la situazione è più complicata perché non possiamo prescindere dalle 4 risoluzioni consigliate da Google: usare una immagine a bassa risoluzione in uno schermo ad alta infatti non è consigliabile (a meno che non vi piaccia l’effetto “pixelloni” anni ’80). Proprio per questo motivo ogni progetto Android è pronto a gestire le 4 risoluzioni! Se non stiamo attenti si rischia di avere immagini non adatte alla risoluzione corrente come in figura:

Stessa immagine, risoluzioni diverse

Inserendo una icona 100×100 px a 72 pdi su uno schermo ldpi, apparirà grande e sgranata. Al contrario, la stessa immagine su uno schermo hdpi apparirà troppo piccola!
Scalare le immagini

Nel caso si abbia a che fare con una immagine da 100×100 px, è necessario che venga riadattata per le 4 densità secondo il rapporto 3:4:6:8 tra le 4 densità. Se quindi la risoluzione base (100) è mdpi (che corrisponde al rapporto 4) si ottiene:

ldpi: 75 × 75, cioè 3/4 della risoluzione base (100 * 3 / 4 = 75);
mdpi: 100 × 100;
hdpi: 150 × 150, cioè una volta e mezzo la risoluzione base (100 * 6 / 4 = 100 * 3 / 2 = 100 * 1,5 = 150);
xhdpi: 200 × 200, cioè il doppio della risoluzione base (100 * 8 / 4 = 100 * 2 = 200) a queste risoluzioni dovrebbe corrispondere Google TV, non gli smartophones.

Dovremo quindi produrre 4 immagini:

Immagini necessarie per copire le 4 densità

Ok, abbiamo creato le immagini. E adesso? Come faccio a dire ad Android quale usare? Fortunatamente questo non spetta a noi. Basta infatti creare nella cartella res del progetto Android opportune sotto-cartelle che seguono la seguente nomenclatura:

drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi

E la prima cartella cosa conterrà? Come è facile intuire, in essa verranno inseriti tutti i file che non dipendono dalla risoluzione. Gli unici in grado di poter scalare senza sgranare sono i file SVG o le shape drawable.
Conclusioni

La diversificazione ha portato Android a crescere notevolmente in un breve arco di tempo. Ha portato però anche noi sviluppatori a doverci preoccupare di gestire le diverse tipologie di schermo di cui sono dotati i telefoni Android. Grazie però ad un efficiente sistema di gestione delle risorse, si riesce ad aggirare il problema in diversi modi, sfruttando i formati scalabili o creando diverse versioni di una immagine. A mio avviso conviene imparare a sfruttare, dove possibile, uno strumento come le shape drawable per la grande flessibilità che comportano. Ringraziamo Smashing Magazine per aver ispirato questo post.