Tutorial 60 - Ridimensionamento componenti in App Inventor per adattarsi a tutte le risoluzioni schermo (smartphone e tablet)

In questo tutorial affrontiamo una possibile ottimizzazione da applicare alle nostre app create con MIT App Inventor per far si che vengano visualizzate nella miglior maniera possibile su tutti i dispositivi Android.

Come ben sapete Android è una piattaforma diffusa su una miriade di dispositivi, ed a differenza di Iphone o Windows Phone (dove esistono solo un paio di risoluzioni per tutti i dispositivi), la risoluzione e la dimensione dello schermo può variare di molto da device a device.


Se si sviluppa con l'SDK di Android ci sono molti strumenti a disposizione per lo sviluppatore per far si che la propria app venga visualizzata nel migliore dei modi su tutti i dispositivi, mentre purtroppo in App Inventor ci scontriamo con dei limiti imposti dalla "semplicità" del tool e dalla necessità di renderlo compatibile anche con le versioni più vecchie di Android (dalla 1.5 in su).

Di base infatti App Inventor lavora "sempre" ad una risoluzione nativa di 320x480px, questa è la dimensione base con cui gireranno tutte le nostre app create con questo strumento.
Se compiliamo l'apk e lo installiamo sul dispositivo, la risoluzione sarà "ancora" di 320x480px con lo sgradevole inconveniente che se la faremo girare su schermi grandi tipo quelli di un tablet da 7" o 10" l'app sarà sgranata e molto brutta da vedere.

Esiste tuttavia una soluzione parziale al problema che si compone di due passi distinti:
1 - Ridimensionare tramite procedure nel blocks editor ogni elemento della nostra app (textbox, label, canvas, sprite, etc...)
2 - Preparare il nostro apk andando a modificare AndroidManifest.xml ed inserendo il tag apposito "resize=yes" per ottimizzare la visualizzazione su display da 4" in su

L'idea di base è quella di leggere le due proprietà "Screen1.Width" e "Screen1.Height" in modo da sapere qual'è la risoluzione effettiva offerta in quel momento alla nostra app (valido solo se modifichiamo il manifest altrimenti ripeto, la risoluzione sarà sempre di 320x480px su qualsiasi dispositivo)
Confrontando questo valore con il valore "base" di larghezza x altezza (l'ormai famoso 320x480px) potremmo ricavare un fattore di scala con cui andare a riscalare tutti gli elementi della nostra app.

Per fare un esempio banale, se definiamo un canvas di dimensione 100x100px (le dimensioni in design editor vanno definite in pixel) e facciamo girare l'app su un dispositivo con risoluzione 320x480px il calcolo iniziale per il fattore scala sarà = 1, infatti come vedete qui sotto Screen1.Width sarà uguale a 320 e il risultato di 320/320 è appunto 1, quindi il nostro canvas verrà ancora visualizzato a 100x100px...

Se ora la stessa app dovesse girare su un dispositivo con risoluzione doppia (640x960) il risultato del fattore scala sarebbe = 2 e riscalando il nostro canvas di questo valore avremo ora un canvas grande 200x200px.
Dai test fatti ho visto che è meglio calcolare il fattore scala solo su una dimensione (quella orizzontale) e riscalare di questo valore sia la larghezza che l'altezza del nostro elemento per non cambiare così il rapporto di forma dell'elemento.

Riapplicando lo stesso procedimento a tutti gli elementi  della nostra app avremo la possibilità di realizzare un applicazione che si vede quasi nella stessa maniera su tutti i dispositivi Android...e sopratutto con gli elementi non sgranati, non male vero!?

Se dovete creare delle grafiche vi suggerisco di lavorare ad una risoluzione abbastanza alta (diciamo 800x1200px) e caricare queste come media in App Inventor lasciando poi il compito alla nostra procedura ed ad App2Market di riscalare le grafiche a dovere.

Vi lascio ora alla visione del video dove propongo un esempio con un canvas ed alcune label, la procedura non si discosta molto se per caso usate sprite o altri elementi della palette basic, media o animation.

Per finire vi riporto i blocchi usati nella procedura di resize:

Le impostazioni che ho usato in App2Market:

Ed il risultato con il "collage" da me creato in cui si vede l'app girare sui diversi dispositivi:

Click per visualizzare a schermo intero

Se volete scaricare il sorgente dell'app lo trovate cliccando QUA
Mentre il file apk già compilato ed ottimizzato lo trovate cliccando QUA

Ogni commento è benvenuto, se avete soluzioni migliori fatemelo sapere! :)