Warp: portiamo colori e popup nella nostra Home Screen (foto e video)

Ben trovati al consueto appuntamento settimanale con Warp, per una nuova dimostrazione dell'alta personalizzazione dell'interfaccia grafica dei nostri dispositivi Android. Il tema che vi andiamo a mostrare (e a realizzare) oggi è Popup Colour, da un'idea dell'utente Vivek S (di cui vi avevamo già mostrato un'altra realizzazione) di MyColorScreen:

Come forse avrete notato dalle immagini, sono presenti delle righe per alcune categorie di applicazioni, ognuna di queste è "strisciabile" e mostra le varie app principali per la categoria selezionata; se vi ha incuriosito abbastanza proseguiamo con la realizzazione passo-passo di questa colorata interfaccia, prima però vi vogliamo dire che a fondo articolo trovate anche un video illustrativo, così potete "fiutare" fin da subito se si prospetta troppo macchinosa per voi.

Nova Launcher

Dopo tutte queste puntate di Warp non dobbiamo ancora elencarvi (vero?) i motivi per cui capita spesso di utilizzarlo durante la realizzazione di queste interfacce, ma se proprio dovessimo useremmo un solo aggettivo riepilogativo: flessibile.

Zooper Pro

Idem come sopra, Zooper permette di creare (o come nel nostro caso di usufruire) di widget altamente personalizzati e personalizzabili, dal necessario utilizzo di template creati appositamente, la necessità di utilizzare la versione Pro (e quindi a pagamento) di questa ottima app dedicata ai widget.

Popup Widget

Avevamo già utilizzato questa app, che ci permette di impostare dei popup al tap di certi elementi; la volta scorsa avevamo utilizzato la versione gratuita ma ancora più in questo caso data la pubblicità abbastanza invadente consigliamo la versione completa, a pagamento, al costo di 1,10€.

Iniziamo la procedura impostando Nova Launcher come launcher predefinito e selezionando dalle sue voci di menu una griglia di 9X8; oltre a ciò dobbiamo ricordarci (all'interno della voce di menu Desktop) di disabilitare i margini, le etichette delle icone e impostare una sola Homescreen. Su Aspetto invece dovremo disabilitare la barra di notifica, ed infine togliere la spunta anche dalla voce Abilita Dock (dentro la voce di menu Dock ovviamente).

Prima di procedere oltre dovete scaricarvi un file ZIP, che trovate a questo link Dropbox, e copiarne il contenuto all'interno del vostro dispositivo (in particolare i file con estensione "zw" andranno copiati dentro la cartella \ZooperWidget\Templates\ ). Ora possiamo impostare lo sfondo bianco (il file si chiama wall.jpg e lo troviamo dentro il pacchetto precedente scaricato) e procederecon il popolamento della nostra Home con i widget predisposti (colour 1.zw, colour 2.zw e colour 3.zw) :

Anche questo (delle immagini precedenti) è un piccolo contrattempo che abbiamo visto più volte, e abbiamo ormai imparato agevolmente a risolverlo, andando a modificare il valore di scaling del widget.

La nostra Home sembrerebbe già completa, ma manca ancora del lavoro: questa interfaccia è stata strutturata in categorie, al tap sopra ognuna di esse si aprirà un piccolo menu con le relative app principali di quella stessa categoria, quindi senza questo menu a popup, che ora andremo a configurare, l'interfaccia è quasi inutilizzabile.

Andiamo quindi a impostare Popup Widget, creando un'impostazione per ognuno di quelli che saranno i widget che popoleranno la nostra Home (sono cinque voci: Notifications, Weather, Music Player, Social e Favourite).

Fra i vari parametri da impostare ricordiamo: Animation (ossia l'animazione con cui compare il popup), ci viene consigliato di scegliere "slide from left", la voce Reflection effect che andrà disabilitata  (ma ci sembrano entrambe scelte prettamente grafiche e non funzionali) e la voce Customized position, ossia il posizionamento personalizzato del popup, come vedrete fra poco dovremmo mettere mano a questo valore ma nel frattempo impostatelo come suggerito dall'autore, questi che vi andiamo ad elencare sono i valori del posizionamento relativo all'asse Y (per X lasciate zero):

• Notifications: 597
• Weather: 777
• Music: 975
• Social: 1198
• Favourites: 1400

Ora possiamo andare a selezionare per ogni categoria il relativo popup, prima di tutto dobbiamo "isolare" l'elemento a cui vogliamo far corrispondere un determinato menu a comparsa, per fare ciò tappiamo sul widget (una delle bande colorate che ora abbiamo nella nostra home), andiamo dentro la voce Aspetto e attraverso i flag cerchiamo di capire a quale voce corrisponde l'elemento di nostro interesse: andando a selezionare (e poi deselezionare) ogni singola voce vedremo cosa si "accende" e si "spegne" nell'anteprima, quando abbiamo trovato a cosa corrisponde il cerchio colorato (cui vogliamo collegare il popup) tappiamo sopra lo stesso (centralmente) e andiamo a selezionare l'azione da definirsi alla selezione dello stesso.

 Selezioniamo la voce Azione Click Modulo e dalla colonna Shortcuts selezioniamo Popup Widget e poi la relativa categoria, che abbiamo preparato in precedenza:

Ora dovremmo tappare sopra il widget (quello in grigetto, che in realtà è quello che comparirà come un popup) e selezioniamo la relativa voce (in questo caso Social):

A questo punto dovremmo avere il nostro popup configurato, se tappiamo sopra il relativo cerchio (nell'angolo a sinistra) ci appare il widget a comparsa, ma come vi avevamo anticipato i valori suggeriti prima (coordinate Y) nel nostro caso non vanno bene (e non stiamo qui a dirvi quelli che abbiamo poi individuato noi perché variano da dispositivo a dispositivo) e ce lo troviamo in una posizione errata, per correggerla dobbiamo andare dentro Popup Widget, selezionare il simbolo dell'ingranaggio di fianco alla categoria che abbiamo scelto e "aggiustare" il valore di Y, in maniera empirica, fino al raggiungimento del risultato voluto:

Una volta trovata l'altezza giusta non vi resta che ripetere la procedura per ognuna delle altre categorie, non è sicuramente l'interfaccia più semplice che abbiamo realizzato, ma l'effetto finale ripaga del tempo impiegato, l'animazione è gradevole e alla fine questa Home Screen colpisce.

Se le nostre spiegazioni non fossero sufficienti o poco chiare vi lasciamo al video, in cui vi viene illustrato come fare, se qualcuno è riuscito a completare questa interfaccia ce lo faccia sapere nel box dei commenti, in fondo non è facilissimo ma nemmeno così difficile, no?