In order to fulfill the basic functions of our service, the user hereby agrees to allow Xiaomi to collect, process and use personal information which shall include but not be limited to written threads, pictures, comments, replies in the Xiaomi Community, and relevant data types listed in Xiaomi's Private Policy. By selecting "Agree", you agree to Xiaomi's Private Policy and Content Policy .
Agree

Temi e Sfondi

[Temi] AlphaUI Backstage | Come creare un tema MIUI?

2021-07-26 02:44:53
1223 14


Ciao Mi Fans.

I più presenti di voi, sia su community che su altre piattaforme (come il telegram di MFC e Twitch), sapranno già che il primo tema #MadeByCommunity è online. Sto parlando di AlphaUI_Project, un tema MIUI a cui stavo lavorando da diverse settimane, disponibile al download già da qualche giorno sulla piattaforma ufficiale.

Probabilmente lo avrete intravisto nell’episodio [special] 30della serie sui migliori temi di Giuseppe e Mattia (e se non lo avete visto, fateci un salto QUI), entrambi soggetti importantissimi durante la costruzione di AlphaUI, vista la loro collaborazione al testing della stessa.

Questo articolo non vorrà essere una semplice guida, bensì un racconto basato sulla mia personale esperienza, con accenni base agli strumenti di sviluppo e una raccolta, per capirci, di “tutto ciò che avrei voluto sapere io prima di immergermi in questo progetto”.

(Questo potrebbe gettare le basi, assieme al vostro interesse, di un progetto che vedrebbe coinvolti VOI in maniera più diretta :D).


CREARE UN TEMA / L’APPROCCIO:


Online ci sono migliaia di temi, ognuno dei quali studiato in un modo diverso dal relativo autore. In generale però, potremmo suddividere i metodi di approccio più classici in due modi:

  • Una personalizzazione basilare: si lavora per ottenere una personalizzazione superficiale, studiando la grafica del wallpaper e delle icone principali. Più economico in termini di tempo impiegato.
  • Una personalizzazione profonda: si cerca di offrire un’elevata personalizzazione che si estenda a quanti più elementi possibili dell’interfaccia, dal design delle icone di prime e terze parti, all’implementazione di una lockscreen, della personalizzazione delle impostazioni, della bootanimation e quant’altro. Migliore nel risultato ma molto più dispendioso in termini di tempo.


Questi due approcci nella creazione vanno poi associati al tipo di supporto che intendete offrire al vostro prodotto:

  • Fatto e finito: terminate il vostro lavoro e lo pubblicate online. Non rilascerete aggiornamenti ne per la versione UI ne per risolvere eventuali bug. Insomma, “te becchi quel che l’è e bon”. Generalmente utilizzato nel caso di temi sviluppati con l’approccio 1.
  • Supporto costante: dopo aver pubblicato il vostro lavoro, scegliete di impegnarvi nella risoluzione di eventuali bug o incompatibilità, rendendo il vostro prodotto più appetibile. Generalmente preferibile nel caso di temi sviluppati con l’approccio 2, visto che è più conveniente portare avanti ciò che si ha già piuttosto che ricominciare daccapo.


Per darvi un'idea, AlphaUI è stato pensato da me con l’approccio della creazione 2 (avendo una personalizzazione abbastanza ampia) e con un supporto decente. Sto infatti già lavorando su ulteriori iconee funzionalità, nonché sulla compatibilità con MIUI 12.5 e Android 11.


CREARE UN TEMA / REQUISITI:


Diversamente da ciò che potreste credere, costruire un tema per MIUI non richiede chissà quali conoscenze tecniche, almeno per quanto riguarda l’approccio 1. Da ciò che ho potuto apprendere durante la costruzione di AlphaUI, i requisiti riguardo materiali e conoscenze sono questi:

  • Un PC (è indifferente il SO installato) :D ;
  • Java installato sul PC scelto, disponibile al download QUI;
  • Uno smartphone, preferibilmente con MIUI 12 basata di android 9/10 e debug USB attivo (impostazioni - imp.aggiuntive - opzioni sviluppatore);
  • Il tool di sviluppo ufficiale, disponibile al download QUI;
  • Un editor di immagini decente che vi permetta di gestire i png, come GIMP (niente paint qui);
  • Una conoscenza base dell’inglese;
  • Un editor di testo per ritoccare i vari file (utile soprattutto nel caso di temi sviluppati con l’approccio 2), personalmente utilizzo Atom, ma potete cavarvela anche con il Notepad Windows.
  • Una conoscenza base del linguaggio MAML/XML per le modifiche più profonde.


Per comodità vostra, ho organizzato in modo efficiente i file nello ZIP, così da avere il tutto più ordinato possibile. E’ incluso nello ZIP anche il codice sorgente di AlphaUI 1.0, il quale può esservi utile per capire la struttura del progetto che andrete a creare.


CREARE UN TEMA / L’INIZIO:


Dopo aver installato tutti i software citati nel paragrafo precedente, sarete pronti per entrare nel vivo. Recatevi nella cartella dove avete scaricato i vari file, cercate lo zip relativo al MIUI Theme Editor ed estraetelo.

Fatto ciò avrete a disposizione una cartella contenente il tutto che (essendo l’editor un programma Java Portable) sarà fruibile anche da diversi PC, a patto di rispettare gli altri requisiti di compatibilità (Java installato su tutti).

Ovviamente dovrete trovare un’unità USB/rete su cui copiare i vari file, io personalmente l’ho buttato sul disco del mio PC principale e l’ho utilizzato solo lì.

Organizzato il tutto recatevi nella cartella/editor/, quindi premete su MIUINewThemeEditor.exe in caso fosse su PC Windows, altrimenti recatevi nella cartella /20.7.10.altrinumeri/ed aprite MIUINewThemeEditor.jar.

Fatto ciò attendete qualche secondo per il caricamento dell’editor, il quale si mostrerà in una schermata identica a quella mostrata sopra. Premete ora su “new” per entrare nella configurazione iniziale, dove dovrete inserire i dati descrittivi del vostro tema (l’ultimo elemento riguarda la versione UI; Le anteprime dell’editor varieranno a seconda della versione scelta; Per ora impostate V12).

*vedi paragrafo “ultimi passi” per ulteriori informazioni


Fate attenzione anche al percorso di salvataggio. Per comodità, salvate nella cartella /Project/ che trovate nella root del file ZIPche avete estratto poco fa. Mi riferirò sempre a questo percorso in caso di modifiche.


EDITOR / LOGICA:


Essenzialmente, MIUI Theme Editor si divide in 3 macro categorie (selezionabili a destra), rispettivamente suddivise in altre categorie. Ogni categoria è composta da un menù a tendina, che svelerà altre sezioni inerenti alla categoria stessa.

Ogni sezione contiene dei moduli, ovvero dei componenti creati dagli sviluppatori pronti all’uso. Potete facilmente visionarli premendoci sopra, per inserirli premendo sul tasto “Insert” presente sulla loro sezione. Potete gestire i vari moduli inseriti nel menù a destra.


Nel caso andaste a modificare delle icone, come nel caso di schermata home, impostazioni o moduli lockscreen, è sufficiente trascinare l’immagine .png che volete utilizzare sull’apposito quadratino grigio, come quello mostrato in foto. Una volta posizionata la nuova immagine, potete fare un click sinistro per entrare nel percorso dove è stata salvata (utile nel caso di home e impostazioni). Con un click destro invece, cambiate lo sfondo del quadratino.

Potete esportare il tema tramite l'opzione “export” presente in alto, oppure applicarlo al volo sullo smartphone di debug collegato con l’icona presente in basso a sinistra.


EDITOR / LOCKSCREEN:


Ora arriva il bello. La prima sezione visualizzata all’apertura sarà relativa alla customizzazione della lockscreen, sia nello sfondo che nelle funzionalità.

L’editor permette di fare il minimo indispensabile, come modificare il wallpaper, la struttura (che si occupa dello sblocco, come il classico swipe up), il widget relativo all’orologio, le notifiche, il player musicale e poco altro.

Prestate solamente attenzioneall’ordine con il quale inserite i vari elementi (visualizzabile nel menù a destra), potrebbe portare a errori nella visualizzazione degli stessi. Generalmente, l’ordine migliore è questo:

  • Frame: contiene il metodo di sblocco e il wallpaper;
  • Clock: il widget relativo all’orologio;
  • Altri elementi: notifiche, player musicale, toggle rapidi e quant’altro.


L’ordine degli elementi dipende dal loro inserimento, ma tutto può essere modificato tramite i pulsanti presenti in fondo a destra. Altre modifiche (più profonde) possono essere apportate al file di configurazione in /Project/nometema/lockscreen/advance/manifest.xml.

Non c’è molto altro da spiegare, provate a sbizzarrirvi inserendo i diversi elementi disponibili!


EDITOR / HOMESCREEN:


Passiamo ora alla seconda sezione del tool. Qui potete modificare il wallpaper(scegliendo tra statico e animato), lo stile dell’orologio, del meteo e, ovviamente, delle icone. Queste ultime vengono suddivise per importanza(preinstallate, altre) e per risoluzione(720p, 1080p). Assicuratevi sempre di trascinare i png che volete usare sempre in entrambe le caselle disponibili.


Purtroppo, non c’è modo di sincronizzare le app di terze parti installate sullo smartphone ed aggiungerle nel tool, quindi vanno inserite “a mano” nel loro percorso /Project/nometema/Icons/Res/, dove troverete le cartelle drawable xhdpi (720p) e xxhdpi (1080p).

Per essere riconosciute da MIUI, le icone inserite dovranno essere rinominate con il nome del pacchetto dell’app relativa. Niente “Instagram.png” o “Instagram_Icon.png”, piuttosto “com.instagram.android.png”. Potete trovare il nome del pacchetto di un'app android con una veloce ricerca online.

Riguardo l’ultima sezione (filter icon), avrete a disposizione degli strumenti per la modifica del colore e dello stile delle icone, anche se sconsiglio di utilizzarlo, visto che causa seri problemi di prestazioni al PC in uso (ho avuto problemi di freeze del tool anche su un Core i7-9750H, figuriamoci su altre piattaforme).


EDITOR / ULTIMA SEZIONE:


Qui si entra nella terza macro categoria, e quindi, nell’approccio 2 discusso nel primo paragrafo dell’articolo, che richiede competenze più elevate. Dal tool potete personalizzare l’app telefono, contatti e messaggi MIUI (le modifiche non vengono applicate alle app Google preinstallate sui nuovi Xiaomi Global), le impostazioni e il pannello notifiche.

Qui l’organizzazione del theme editor viene un pò modificata, visto che scompare il menu laterale dei moduli in favore di una personalizzazione di colori e parametri. Ogni sezione viene ora divisa in diverse schede, generalmente icone/immagini, colori e funzionalità.

Qui posso darvi solo un GRANDE, GrAnDdIsSiMoH avviso: ogni qualvolta voi decidiate di accedere ad una nuova sezione per personalizzarla, il tool vi chiederà quale template usare; Voi selezionate sempre il tema chiaro (per primo), altrimenti il tool utilizzerà il font bianco anche su sfondi chiari (e viceversa) , quindi non si vedrà nulla e dovrete ricominciare daccapo!

In caso incappaste in questo problema dovrete recarvi in /Project/nometema/ e poi nella cartella relativa all’applicazione modificata (contacts, mms, settings o systemUI) e CANCELLARNE tutto il contenuto, per riottenere la possibilità di selezionare il template.

In caso vogliate applicare la personalizzazione anche in modalità scura è necessario creare una cartella “nightmode” nel percorso relativo all’app da modificare, quindi inserire i file immagine e la configurazione XML adeguata (non dovete copiare la stessa che avete creato per il tema chiaro, altrimenti incapperete nel problema descritto prima).

Per ottenere un file pulito occorre creare un nuovo tema, modificare l’app desiderata scegliendo il template dark e modificare i vari parametri. Una volta terminato recatevi nella cartella /Project/nometema2/, entrate nella cartella dell’app modificata e copiate il file theme-values.xml nella cartella nightmode che avrete creato precedentemente nel sorgente del tema principale.

Diverse modifiche avanzate (sconsigliate agli utenti sprovvisti di conoscenze XML/MAML) possono essere applicate ai vari file di configurazione, fate riferimento allo stesso file “theme-values.xml” presente nelle varie cartelle in /ResourceCatalog_V12/ per le modifiche possibili.


ULTIMI PASSI:


Dopo aver terminato il lavoro sul vostro tema, è giunto il momento di esportarlo. Prima di fare ciò, è però necessario apportare una modifica al file description.xml presente in /Project/nometema/.

A causa di un bug nella piattaforma dei temi Xiaomi, il tema può dare problemi di compatibilità se mappato come V12. Per evitare questi problemi, chiudete il tool (tranquilli, salva sempre in automatico ad ogni modifica), recatevi nel file descritto sopra e cambiate il parametro di version da 12 a 10.


Ora riaprite il theme editor, selezionate l’opzione open, recatevi nella cartella del vostro tema e premete sul tasto in basso “apri” di esplora risorse. Il tool ricaricherà il vostro progetto, voi premete sull’opzione “export” in alto ed attendete la costruzione del file .mtz relativo al tema. Quest’ultimo verrà salvato in /Project/ ed avrà lo stesso nome del progetto.

Ora avrete creato il vostro tema, potete provarlo con il ChaoMe Theme Editor (scaricabile dal Play Store) oppure condividerlo con i vostri amici.

Purtroppo la pubblicazione sullo store dei temi ufficiale richiede un account autorizzato, ma voi non fatevi scoraggiare e divertitevi, abbiamo in mente qualcosa che potrebbe agevolare il tutto in futuro!


Siamo giunti alla fine di questo titanico articolo sulla creazione dei temi. Vi ringrazio per avermi seguito fin qui, mi auguro di essere riuscito a spiegarmi in maniera decente e, si spera, di essere stato utile a qualcuno.

In base al riscontro ottenuto da voi, Mi Fans, decideremo come muoverci per i famosi “progetti futuri” che io, Giuseppe e Mattia abbiamo in serbo per voi ;)




Rate

Number of participants 1 Experience +20 Pack Reason

View Rating Log

2021-07-26 02:44:53
Favorites7 RateRate

Mi Blogger

Mattia Mingardi | from app

#1

È attualmente, perlomeno per i miei gusti, uno degli articoli più interessanti di tutta la community. Sinceramente io stesso non avrei mai saputo come iniziare a muovermi per iniziare un progetto simile, ma questo articolo è talmente chiaro e diretto che mi ha fatto venire voglia di iniziare subitissimo! Bravissimo Vik, davvero
2021-07-26 03:35:55

Mi Blogger

Viktor Koca Author | from app

#2

Mattia Mingardi
È attualmente, perlomeno per i miei gusti, uno degli articoli più interessanti di tutta la community. Sinceramente io stesso non avrei mai saputo come iniziare a muovermi per iniziare un progetto simile, ma questo articolo è talmente chiaro e diretto che mi ha fatto venire voglia di iniziare subitissimo! Bravissimo Vik, davvero

Grazie Matt, attendiamo fiduciosi qualche tuo progetto ❤️
2021-07-26 03:47:51
bellissimo post molto dettagliato complimenti!<br>
Buona fortuna per il futuro ;)
2021-07-26 06:10:45

Master Bunny

Ricky21 | from app

#4

Molto interessante
2021-07-26 13:00:33

Mi Fan Club

Dan300694 | from app

#5

daje Vik!
2021-07-26 13:09:04

Mi Fan Club

SimonaCira | from app

#6

Vik sei una stellina bravissima! (sappi che ho messo il tuo tema nel mio RN10)
2021-07-26 13:33:07

Mi Blogger

Viktor Koca Author | from app

#7

SimonaCira
Vik sei una stellina bravissima! (sappi che ho messo il tuo tema nel mio RN10)

Orgoglioso di te ❤️
2021-07-26 16:18:31

Pro Bunny

Nini' | from app

#8

D' accordo condividere... però io i trucchi del mestiere  nn li svelerei mai.... comunque articolo davvero ben fatto..di solito capisco solo Gius. Grazie.
2021-07-26 20:10:41
vediamo se più avanti potrò fare un tema anche io... comunque molto bravi
2021-07-27 23:05:44

Mi Blogger

Viktor Koca Author |

#10

Davide Patrucco replied at 2021-07-27 17:05:44
vediamo se più avanti potrò fare un tema anche io... comunque molto bravi

Daje ;)
2021-07-27 23:20:38
please sign in to reply.
Sign In Sign Up

Viktor Koca

Mi Blogger

  • Followers

    338

  • Threads

    164

  • Replies

    5117

  • Points

    15857

3 Days Check-In
7 Days Check-In
21 Days Check-In
40 Days Check-In
70 Days Check-In
100 Days Check-In
1 Year Check-In
Community Advisor
20k
Throw Back with Mi 2018
ALITA
MIUI
Spazio
Halloween
200mila Mi Fans
MIUI 12
2 anni insieme
BEST Mi Blogger
MIBAND4
Survey2020
Magazzino in Italia
Monitor
Mi TWS 2 Bacis
Mi Scooter Pro 2
Mi Smart Band 5
Mi Tv Stick
K2K
300K
1 milione
Mi 11 lancio
Calendar
Redmi Note 10 Pro
Redmi Note 10 lancio
400K
#1 Italia

Read moreGet new

Xiaomi Comm APP

Stay updated on Mi Products and MIUI

Copyright©2010-2021 Xiaomi.com, All Rights Reserved
Quick Reply To Top Return to the list