[TUTORIAL] Creazione temi EmotionUI 3.0

[PrinceEndymion88]

Salve gente. Oggi cercherò di spiegarvi come creare un tema per EmotionUI 3.0.
Iniziamo col materiale che vi servirà:

7zip: 7zip x86 oppure 7zip x64
Notepad++: npp.6.7.9.1.Installer.exe
StarterPackEmui3.0: Mirror #1 Mirror #2


Ovviamente scarichiamo tutto e installiamo 7zip (la versione a 32 o 64 bit in base al vostro sistema operativo), notepad++ ed estraiamo lo StarterPackEmui 3.0 in una cartella a vostra scelta. Io per comodità l'ho estratto in una cartella chiamata "Temi" nel Desktop.

Inizia ora la creazione...

#Passo1: Sfondi
Nella cartella wallpaper è possibile inserire tutti gli sfondi che vogliamo usare nel nostro tema. Gli sfondi usabili per la homescreen devono avere il nome in questa forma:
home_wallpaper_X (la X deve essere un numero da 0 a +∞)

Gli sfondi usabili per la lockscreen, invece, avranno il nome in questa forma:
unlock_wallpaper_X (la X deve essere un numero da 0 a +∞)

(Ho già messo due sfondi di prova nella cartella, per fare chiarezza sul nome. Gli sfondi possono avere estensione .png o .jpg)

#Passo2: Lockscreen
Apriamo la cartella unlock presente dentro lo Starter Pack e troveremo un file theme.xml. Apriamolo con notepad++ e vediamo che il suo contenuto sarà il seguente:

<?xml version="1.0" encoding="utf-8"?>
<HWTheme>
   <item style="nomeeffetto"/>
   <item wallpaper="nomewallpaper"/>
</HWTheme>

Analizziamo il codice...
<item style="nomeeffetto"/> rappesenta l'effetto della lockscreen... possiamo sostituire "nomeeffetto" con:
"" -> se lasciato vuoto avremo il classico lockscreen di huawei con le quattro shortcuts.

"amazing" -> in genere usato con le lockscreen riscritte da 0. Disabilita i comandi del lettore musicale nella lockscreen.

"Google" -> imposta una lockscreen simile a quella stock di google, ma ahimé disabilita i comandi del lettore musicale nella lockscreen.

"magazine" -> la nuova lockscreen di huawei con gli sfondi a scorrimento.

"slide" -> imposta la lockscreen con un effetto slide.

<item wallpaper="nomewallpaper"/> , invece, ci permette di scegliere lo sfondo che si imposterà in automatico nella lockscreen quando verrà scelto il tema.
Al posto di "nomewallpaper" potete inserire, ad esempio, "unlock_wallpaper_1.jpg" se volete usare questo sfondo, ricordatevi di inserire anche l'estensione (.jpg o .png).

Spenderò qualche altra parola per lo stile "magazine".
Se volete creare dei cataloghi di sfondi, scaricate il seguente file https://userscloud.com/oqws3q99q60b e sostituite la cartella unlock dello StarterKit Emui 3.0 con quella presente all'interno di questo file.
Per intenderci, un catalogo è un insieme di sfondi. Ogni volta che lo schermo si riattiverà vedrete un nuovo sfondo e l'utente che usa il tema può scegliere il catalogo che più preferisce.
In questa nuova cartella unlock troverete, oltre al file theme.xml anche altre due cartelle: drawable e layout.

Nella cartella drawable vanno inseriti TUTTI gli sfondi che comporranno i vari cataloghi.

I file theme.xml è cambiato un po':

<?xml version="1.0" encoding="utf-8"?>
<HWTheme>
   <item style="magazine"/>
   <item wallpaper="unlock_wallpaper_0.jpg"/>
   <item layout="layout_theme"/>
</HWTheme>

Come potete vedere, ora abbiamo una nuova stringa <item layout="layout_theme"/>. Questa stringa indica il layout che stiamo usando e il layout in questione si trova proprio nella cartella layout con il nome, ovviamente, layout_theme.xml. Quindi se avevate chiamato il file \layout\layoutdeltema.xml la stringa presente nel theme.xml sarebbe stata <item layout="layoutdeltema"/>.

Analizziamo il file layout_theme.xml:

<?xml version="1.0" encoding="utf-8"?>
<layout version="1.0.001.lp" updatetime="20150401">
	<switch>
		
		<type id="01" src="wallpaper0.jpg" title="Catalogo1" selected="true">
			<image src="wallpaper0.jpg" title="" content="" cpname="" download="" contenturl="" packagename=""/>
			<image src="wallpaper1.png" title="" content="" cpname="" download="" contenturl="" packagename=""/>
			<image src="wallpaper2.png" title="" content="" cpname="" download="" contenturl="" packagename=""/>
			<image src="wallpaper3.jpg" title="" content="" cpname="" download="" contenturl="" packagename=""/>
			<image src="wallpaper4.jpg" title="" content="" cpname="" download="" contenturl="" packagename=""/>
		</type>
		
		<type id="02" src="wallpaper5.jpg" title="Catalogo2" selected="false">
			<image src="wallpaper5.jpg" title="" content="" cpname="" download="" contenturl="" packagename=""/>
			<image src="wallpaper6.jpg" title="" content="" cpname="" download="" contenturl="" packagename=""/>
			<image src="wallpaper7.jpg" title="" content="" cpname="" download="" contenturl="" packagename=""/>
			<image src="wallpaper8.jpg" title="" content="" cpname="" download="" contenturl="" packagename=""/>
			<image src="wallpaper9.jpg" title="" content="" cpname="" download="" contenturl="" packagename=""/>
		</type>

	</switch>
</layout>

<layout version="1.0.001.lp" updatetime="20150401"> indica la versione del layout e il suo ultimo aggiornamento (nella forma annomesegiorno).

Tra <switch> e </switch> vanno inseriti i catagoli che si creano in questo modo:
<type id="01" src="wallpaper6.jpg" title="Catalogo1" selected="true">
type id="": l'id del catalogo
src="": il primo sfondo che appare
title="": il titolo del catalogo (potrebbe essere ad esempio Natura, Città, Fantascienza, Cartoni etc... insomma quello che volete)
selected="": può essere true(se il catalogo è impostato alla selezione del tema) o false (se non lo è)

dopo questa stringa vanno inserite le stringhe inerenti agli sfondi che faranno parte di ogni catalogo:
<image src="wallpaper0.jpg" title="" content="" cpname="" download="" contenturl="" packagename=""/>
vi interessa solo cambiare image src="" con il nome dello sfondo (e la relativa estensione del file) che avete inserito nella cartella drawable.
Ripetete l'intera stringa tante volte quanti saranno gli sfondi che faranno parte del catalogo.
Dopo che avrete inserito tutte le immagine chiudete il tipo di catalogo con </type>

Un consiglio: se avete creato un catalogo Natura, inserite solo sfondi a tema Natura.

#Passo 3: Le icone
Ora ci occuperemo delle icone. Ogni icona deve avere come nome, il nome del pacchetto dell'applicazione della quale vogliamo cambiare l'icona. Le icone devono essere in formato PNG e non JPG, perché quest'ultimo non supporta le trasparenze.
Ad esempio, se volete cambiare l'icona dell'applicazione Impostazioni, dovrete chiamare l'icona com.android.settings.png che è appunto il nome del pacchetto impostazioni. In alcuni casi, come per esempio per il playstore, vi servirà anche il nome dell'attività per far si che l'icona cambi ad esempio com.android.vending.AssetBrowserActivity.png permette di cambiare l'icona del Playstore.
Ovviamente non posso elencarvi tutti i nomi dei pacchetti però il metodo che uso io è il seguente:
Andate su AndroidActivities e in Search and find inserite il nome dell'applicazione della quale volete cambiare l'icona ad esempio Play music e cliccate Search.
Vi spunteranno delle info tra le quali:
Play Music
Packagename:
com.play.music

ComponentInfo:
com.play.music/com.play.music.LibraryActivity

IconUrl:
http://placehold.it/430x430/E67E22/F...t=Play%20Music

Quello che interessa a noi è Packagename. Quindi l'icona deve avere il nome com.play.music.png. Se ciò non dovesse modificare l'icona vi consiglio di provare usando la parte dopo / in ComponentInfo. Quindi il nome dell'icona sarà com.play.music.LibraryActivity.png

In genere con il packagename non avrete problemi e di seguito vi elenco alcuni nomi che vi serviranno per le icone dei contatti o messaggi:
com.android.contacts.activities.DialtactsActivity. png (telefono)
com.android.contacts.png (rubrica)
com.android.mms.ui.ComposeMessageActivity.png (messaggi)
com.android.mms.ui.ConversationList.png (messaggi)

Vi elenco questi perché huawei ha messo tutto (telefono, rubrica e messaggi) in un'unica apk, quindi sarebbe difficile trovare le relative attività.
Col tempo prenderete dimestichezza e sarà semplice.

Ci sono alcune icone particolari come:
icon_background_01.png
icon_border.png
icon_mask.png
icon_shortcut.png
icon_shortcut_arrow.png
icon_shortcut_mask.png
portal_ring_inner_holo.png

Che rappresentano o lo sfondo per le icone non modificate dal tema o (nel caso di icon_mask o icon_shortcut_mask) la forma dell'icona. Ad esempio potete far si che tutte le icone abbiano forma circolare, quadrata, triangolare etc... Smanettate con Photoshop e fate delle prove.

Quando avrete creato tutte le vostre icone aprite, con 7zip, il file icons che avete estratto dallo StartePack e trascinate al suo interno tutte le icone create. Una volta inserite chiudetelo dalla x.
Nel file icons già sono presente alcune icona di prova, per fare chiarezza su quanto detto finora.

Continua nella seconda pagina...

[PrinceEndymion88]

#Passo 4: Descrizione del tema
Ora aprite, con notepad++, il file description.xml e vediamo insieme il contenuto:

<?xml version="1.0" encoding="UTF-8"?>
<HwTheme>
    <title>Titolo del tema</title>
    <title-cn>Titolo del tema in lingua cinese</title-cn>
    <author>Autore del tema</author>
    <designer>Designer del tema</designer>
    <screen>HD</screen>
    <version>1.0.0</version>
    <font>Default</font>
    <font-cn>默认</font-cn>
    <transition>None</transition>
</HwTheme>

<title>Titolo del tema</title> sostituire Titolo del tema con il nome del vostro tema
<title-cn>Titolo del tema in lingua cinese</title-cn> sostituire Titolo del tema in lingua cinese con la versione cinese del nome del vostro tema, io in genere la metto comunque in italiano XD
<author>Autore del tema</author> cambiate Autore del tema con il vostro nome o nickname
<designer>Designer del tema</designer> cambiate Designer del tema con il nome o nickname di chi ha disegnato le icone o altre parti del tema.
<screen>HD</screen> il G7 (che è il mio smartphone) ha risoluzione HD quindi io tengo sempre quella, ma se avete uno smartphone in FULL HD e avete creato un tema in FULL HD cambiate HD con FHD
<version>1.0.0</version> mettele la vostra versione del tema
<font>Default</font> va cambiato SOLO se vengono inseriti nuovi font nel tema.
<font-cn>默认</font-cn> versione cinese del nome del font.
<transition>None</transition> mai usata nel mio tema, credo permetta di impostare transizioni alternative.

Una volta modificati i campi, salvate e uscite.
#Passo 5: Creiamo il tema
Come potete notare, ho inserito un file ilmiotema.hwt. I temi di huawei DEVONO avere estensione .hwt.
Cambiate il nome (ilmiotema) con uno a vostro piacimento, ricordandovi però di mantenere intatta l'estensione del file.
Ora aprite il file .hwt con 7zip.
Una volta fatto ciò selezionate tutto il contenuto del vostro tema (preview, unlock, wallpapers, icons, description.xml etc... tranne il file .hwt ovviamente) e trascinatelo all'interno del file .hwt aprito con 7zip.

Chiudete dalla X e il vostro tema sarà stato creato


#Passo 6: Impostare le anteprime
Non ho parlato finora della cartella preview. Bene questa cartella contiene le anteprime del tema che verranno visualizzate dall'applicazione Temi del vostro huawei. Ovviamente per inserirli dovrete prima di tutto inserire il tema creato nel vostro smartphone ed impostarlo e poi dovete fare degli screenshots dal telefono. Con il G7 gli screenshots si vanno col tasto VOL- e POWER premuti insieme. Fate uno o più screenshot delle icone e della lockscreen, copiateli nella cartella preview e rinominateli come segue:

I preview essenziali sono:
cover.jpg (è la cover del vostro tema)
preview_icons_X.jpg (X deve avere un valore numerico da 0 a salire ed sono gli screenshots delle icone)
preview_unlock_X.jpg (X deve avere un valore numerico da 0 a salire ed sono gli screenshots della lockscreen)

Una volta inserite le anteprime, rieseguite il passo 5.
Ora il vostro tema è davvero pronto, uppatelo quindi nel vostro host preferito e potete condividerlo con chi volete!

#PASSO AVANZATO:
Oltre alle icone, lockscreen e sfondi si può modificare qualsiasi parte del sistema. Ad esempio potete modificare elementi della sistemUI o del framework. Per farlo però dovete avere le relative apk e scompattare ogni singola apk per vedere quali elementi modificare. Se non sapete dove mettere mani evitate!
Ad esempio, potete scaricare questo ulteriore file https://userscloud.com/yymhxfs2kpy7 inerente alla systemUI. Aprendol con 7zip noterete una cartella res-> drawable xhdpi e dei files .png all'interno. Questi sono i file dei toggle della barra di stato, se modificati vi permetteranno di modificare la grafica della barra di stato. Ovviamente il file com.android.systemui va inserito poi nel tema .hwt.
Ho inserito questo file per permettere agli smanettoni di studiarci un po' sopra, gli altri si limitino a fermarsi al passo 6. Inoltre penso che un buon passo per iniziare sia studiare gli altri temi già esistenti!

[FDMtSburro]

Ottima guida, ho solo una domanda: come faccio a mettere la lock screen AOSP di Lollipop al posto di quella di JB/KK?

[Vobiscum]

@PrinceEndymion88 Ciao scusa volevo una info sulle modifiche della sistemUi e frameworkres.. nel momento che modifico le icone nelle apk e le inserisco nel tema. sul device quando applico il tema va a sostituire solo le icone o sostituisce l'apk? te lo chiedo per capire se il tema creato è compatibile con tutti i device o solo con quello dove ho estratto le apk.

grazie



EDIT:

Solved

[PrinceEndymion88]

Ottima guida, ho solo una domanda: come faccio a mettere la lock screen AOSP di Lollipop al posto di quella di JB/KK?

Non puoi. Se hai KitKat non puoi usare, a prescindere, la lockscreen lollipop. Se hai lollipop, invece, e ti spunta la lockscreen di KitKat evidentemente è una limitazione, stupida, di huawei!

@PrinceEndymion88 Ciao scusa volevo una info sulle modifiche della sistemUi e frameworkres.. nel momento che modifico le icone nelle apk e le inserisco nel tema. sul device quando applico il tema va a sostituire solo le icone o sostituisce l'apk? te lo chiedo per capire se il tema creato è compatibile con tutti i device o solo con quello dove ho estratto le apk.

grazie



EDIT:

Solved

Modifica solo le icone non le apk. Infatti se usi un altro launcher probabilmente vedrai le icone standard non modificate

[frailfigo]

Non puoi. Se hai KitKat non puoi usare, a prescindere, la lockscreen lollipop. Se hai lollipop, invece, e ti spunta la lockscreen di KitKat evidentemente è una limitazione, stupida, di huawei!

Possiedo il P8 Lite con Android 5.0

[PrinceEndymion88]

Possiedo il P8 Lite con Android 5.0

Ringrazia huawei allora.... 😔😔😔

[wegdesign]

Non riesco a settare l'icona di Google Maps e Google Photo, sapete qual'è il nome da assegnare?

[amicog]

Ciao avrei bisogno di un aiutino
Vorrei modificare il colore dei font dei toggle di scelta rapida dentro la tendina delle notifiche ed anche il background della tendina stessa... qualcuno sa aiutarmi? immagino si tratti, almeno per il colore del font, di un xml... ma quale?
Grazie a tutti!

[amicog]

Non riesco a settare l'icona di Google Maps e Google Photo, sapete qual'è il nome da assegnare?

Ciao,
per Google Foto devi creare 9 png identiche ed associargli questi nomi:
-com.google.android.apps.photos.app.PhotosApplicati on.png
-com.google.android.apps.photos.home.HomeActivity.p ng
-com.google.android.apps.photos.phone.PhotosLaunche rActivity.png
-com.google.android.apps.photos.phone.SendContentAc tivityAlias.png
-com.google.android.apps.photos.phone.SetWallpaperA ctivity.png
-com.google.android.apps.photos.phone.SetWallpaperA ctivityAlias.png
-com.google.android.apps.photos.png
-com.google.android.apps.photos.viewer.pager.HostPh otoPagerActivity.png
-com.google.android.apps.plus.phone.ConversationLis tActivity.png

Per Google Maps, invece, 3 png con i nomi:
-com.google.android.apps.maps.png
-com.google.android.apps.gmm.car.firstrun.GmmProjec tedFirstRunActivity.png
-com.google.android.apps.gmm.navigation.ui.guidenav .BlackScreenActivity.png