[GUIDA] Creare temi CM12, modificare xml, png e 9.png

[minar]

Non che io sia il genio dei temi, ma visto che ho avuto il piacere di farne cinque ed ho imparato tutto con taaaanta pazienza, allora ho pensato di mettere a vostra disposizione ciò che so, così che chi vuole possa contribuire a questo mercato in espansione.

Innanzitutto tenete conto che se volete fare un bel tema non potete farne uno compatibile al 100% sia con cm11 e cm12. Teoricamente si può, ma fidatevi, meglio scegliere il theme engine più recente e dedicarsi solo a quello!

Organizzo in capitoli:
1) prima di cominciare
2) primi passi
3) come procedere con ordine
4) gli xml
5) i png
6) i 9.png
7) le animazioni
8) template e link

1. PRIMA DI COMINCIARE

Vi servono principalmente cinque cose:

- un ide. Io uso eclipse con il plugin adt, ma se preferite c'è anche il più immediato android studio. Guide su come impostare l'ambiente di sviluppo ce ne sono millemila, per cui non lo scrivo qui.

- un editor di immagini che supporti i png. Io uso Photoshop, paint.net (che occhio è un programma e non un sito, trovate il link alla fine), ma soprattutto Photoshop touch per android che in accoppiata con la s-pen è uno spettacolo.

- un telefono con cm12 o rom che supportino il nuovo theme engine (madddai)

- un template da cui partire. Io ho preso quello ufficiale, ma potete scopiazzare qualsiasi tema se la vostra coscienza ve lo permette. Potreste anche partire completamente da 0 decompilando gli apk, ma ve lo ipersconsiglio.

- un tool per decompilare apk, come puó essere apktool e simili (da usare solo come supporto pero')

- tanta, ma tanta, ma tanta pazienza. Davvero. E molto tempo.

Se avete tutto, allora possiamo cominciare.

2 PRIMI PASSI

Create un nuovo progetto. Userò da esempio eclipse, ma potete usare anche android studio come ho gia detto.

Chiamate il progetto come vi pare (non Zenith, Antares o Rotanev pero', perchê quelli sono gia presi ) e mettete come target le ultime api, quelle di lollipop.
Non create alcuna activity, e non preoccupatevi di mettere l'icona dell'app, potrete farlo in un secondo momento.

Ora dovete eliminare qualche cartella di troppo e sistemare il progetto. Bisogna ricordarsi che un tema cm non è un'app nel senso puro del termine, quindi ha delle risorse poco comuni.

Cominciate eliminando la cartella res/ldpi (più per questioni di pulizia che altro) e cancellando tutto ciò che è scritto nel file androidmanifest.xml, per sostituirlo con questo!

<?xml version="1.0" encoding="utf-8"?>
<manifest android:versionCode="versione" android:versionName="nome." package="com.vostronome.nomeapp"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-feature android:name="org.cyanogenmod.theme" android:required="true" />
    <application android:label="nomeapp" android:icon="@drawable/ic_launcher" android:hasCode="false" />
    <meta-data android:name="org.cyanogenmod.theme.name" android:value="nomeapp" />
    <meta-data android:name="org.cyanogenmod.theme.author" android:value="vostronome" />
</manifest>

Occhio a mettere il nome della vostra app e del vostro package correttamente, dal manifest dipendono molte cose, inclusa la compatibilità della vostra app!
il version name va per numeri interi solitamente, il version name sarà all'inizio 1.0 (se non volete partire da 0.1 per fare i modestoni ovviamente).

Ora dovete creare il percorso in cui metterete le vostre risorse grafiche e gli xml. Senza entrare troppo in tecnicismi, sappiate che un tema cyanogenmod per sostituire le varie risorse e colori di sistema attua una sorta di sovrascrizione temporanea delle stesse con quelle del tema applicato (chi capisce questa frase ha la mia stima)

Dunque la cartella intorno alla quale ruota tutto il vostro lavoro si chiama assets, e nel progetto esiste già.
Ora, dentro assets vanno create un bel po' di cartelle, che saranno lo scheletro del tema.
Vi suggerisco di gestire questo aspetto con un normale file manager di Windows, e non dall ide, perche secondo me risulta più ordinato.

Create queste cartelle:

- Wallpaper
- Lockscreen
- Images
- Overlays
- Ringtones
- Alarms
- Notifications
- Fonts
- Icons
- Bootanimation

All interno di wallpaper posizionate il vostro sfondo. Occhio a non farlo troppo grande, vi consiglio un 1980*1600 o giù di li. Può essere in qualsiasi formato e va rinominato in "wallpaper1".

Stessa cosa per la lockscreen, rinominate e inserite il vostro wallpaper destinato alla lockscreen.

La sezione images credo non serva più, una volta conteneva le anteprime mostrate dal theme engine, ora.. Bho. Tanto quello mostra quello che gli pare ._.
Ci andrebbero tre immagini illustrative del tema chiamate wallpaper_preview, lockscreen_preview e styles_preview.

Le sezioni ringtones, alarms e notifications conterranno i suoni di sistema, in formato mp3 o ogg.

La cartella fonts conterrà il vostro font. Sceglietene uno ma fate attenzione che contenga tutti i caratteri dell'alfabeto ascii unicode (insomma numeri lettere e simboli). A quel punto servirà un xml per coordinare le varie famiglie di font! Ma di questo parleremo nella sezione xml.

Bootanimation si commenta da solo. Usate una bootanimation non troppo defnita, altrimenti alcuni telefoni potrebbero avere problemi.

Le icone sono un capitolo a parte. Sta a voi decidere se fare solo qualche icona, fare un intero icon pack, o chiederne uno in concessione. Anche qui ci sono di mezzo gli xml, ma la maggior parte del lavoro è fare le icone e farle bene. La risoluzione dipende dal telefono, in genere si fanno xxhdpi (ossia 144*144).

La sezione overlays contiene tutti i cambiamenti ad app di sistema e non, ed è la sezione piú articolata (e fonte di errori) del tema. Per piazzare le cose in questa sezione, dovete creare al suo interno una cartella con il nome del package dell'app (es: com.android.settings che come intuirete è quello delle impostazioni) per ogni app che volete inserire.

Ora vediamo come procedere.

3 COME PROCEDERE CON ORDINE

Innanzitutto vi chiarisco le idee su alcune cose. Poi se serve farò proprio un FAQ.

Che il tema non compili è impossibile una volta che il manifest è giusto. Per cui se non compila, è nel manifest che dovete guardare.

Se installandolo il tema vi da errore (impossibile installare il tema, con tanto di triangolino), avete commesso un errore e il theme engine se n'è accorto, per cui dovete vedere dentro assets, e dei più comuni errori parleremo tra poco.

Tra una build e l'altra del vostro tema occhio a non aggiungere troppo, andate piano e gradualmente, non mettete cose a caso, almeno non troppe. Se poi non si installa perderete le ore a togliere cose e a cercare l'errore! L'ho provato sulla mia pelle -_-

Prima di iniziare a pastrocchiare con i colori, fatevi una bella palette di partenza sulla quale basarvi, inclusiva, ovviamente, di codici esadecimali dei colori. Ci sono un sacco di siti da cui prendere gli esadecimali, non devo dirvelo io
Suggerisco di prendere due colori, non troppo sparati (o almeno uno dei due), segnandovi per ogni colore una forma base, una variante chiara e una scura, vi serviranno per statusbar e particolari vari.

Fatto questo finalmente si puo cominciare, cari.

Vi consiglio, una volta inseriti sfondi e compagnia, di cominciare, negli overlays, dal temare le app di sistema che più hanno rilievo nell'uso di tutti i giorni (useró il verbo temare, fatevene una ragione).

Solitamente la prima cosa che si fa sono systemui e framework.
In fondo a questa guida troverete un template, il mio tema Zenith (o meglio la sua cartella overlays) ma STOP! Dovete usarlo pian pianino, a cominciare dalle cose basilari. Non posso certo spiegarvi ogni app, per cui nei prossimi capitoli vi darò delle linee generali. Nel mio tema sono inserite parecchie cose (nulla di così trascendentale tranquilli) ma è sempre bene iniziare dal cambiare semplicemente i colori capendo ciò che si sta facendo.

4 GLI XML

Mentre nel caso di android kitkat di xml se ne faceva scarso uso, con lollipop e l'introduzioni dei colori solidi, dei drawable-xml e del material design vedrete più xml che immagini vere e proprie!
Ci sono diversi tipi di xml, ma in generale servono a settare vari parametri ricollegandosi alle risorse grafiche del tema o del sistema. Facciamo che li distinguiamo in 3 categorie nel caso dei temi.

- L'xml dei font è abbastanza complesso, in genere dovete collegare i vostri font ai font predefiniti del sistema andando per famiglie. Mi riservo di scriverne più approfonditamente in un secondo momento, anche se su xda c'è un ottima guida su come gestirli e implementarli.

- L'xml delle icone da ciò che so va semplicemente preso e incollato brutalmente, lo trovate nei link a fine pagina, e va messo in assets/icons insieme alla cartella che contiene le icone (che se le icone sono xxhdpi si chiamerà drawable-xxhdpi)

- Gli xml della app si dividono in colors e styles. la prima categoria si limita a settare i colori, la seconda cambia anche radicalmente l'aspetto dell'app, definendo il tema usato da quest'ultima e altre cose.
Ci sono varie parole che nell'ambito della modifica dei colori vi servirà ricordare, sia che partiate da 0 sia che stiate scopiazzando allegramente. Ecco un frammento di codice per farvi capire.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="system_primary_color">#ff333335</color>
    <color name="system_secondary_color">#ff1f1f1f</color>
    <color name="system_accent_color">#ff0068ff</color>
    <color name="qs_tile_text">#ffebebeb</color>
    <color name="qs_detail_progress_track">#ffaaaaaa</color>
    <color name="notification_legacy_background_color">#bcffffff</color>
    <color name="notification_ripple_untinted_color">#ff0068ff</color>
    <color name="notification_ripple_color_low_priority">#ff0068ff</color>
    <color name="qs_tile_divider">#00000000</color>
</resources>

Ecco i colors.xml che, se state modificando il systemui, dovrete avere in assets/overlays/com.android.systemui/res/values/colors.xml

gli xml sono sempre dentro la cartella values in genere, mentro nella cartella drawable-(risoluzione png) ci sono appunto i png. Funziona così per ogni app, e anche se ogni app ha i suoi particolari tag e colori, troverete in maniera molto ricorrente diciture come:

- material_background o background: indica il colore dello sfondo
- ripple: colore dell'effetto al tocco
- primary e secondary: colori primario e secondario
- primary_dark: solitamente è il colore della statusbar
- accent: colore marginale di accento, ad esempio quello degli switch e dei particolari
- text: ovviamente il colore del testo
- qs: sta per quicksettings

Ci sono poi anche altri tipi come dimens e anim, ma lasciamoli perdere, non sono essenziali a meno di virtuosismi

[minar]

5 I PNG

Cos'è un png penso lo sappiamo tutti, e se non lo sapete siete sulla guida sbagliata ._.
Alcuni png andranno fatti da 0, altri semplicemente modificati. Alla fine della guida vi lascio anche il link a un programma molto utile che applica una stessa serie di modifiche a più file contemporaneamente, risparmiandovi parecchio lavoro.

Nel template, così come nel template ufficiale e negli apk, ci sono vari png. Anche qui ricorro ad un esempio. Le icone delle impostazioni sono png, e andranno prese e modificate facendo attenzione a rinominarle senza commettere errori. Uno degli errori più comuni è proprio il rinominare male questi png.
Nel caso in cui non riusciate proprio a trovare un'icona, probabilmente avete a che fare con un vectordrawable, particolari xml che attraverso vettori definiscono un immagine. questi xml possono essere sostituiti da png senza alcun problema purché nomi e dimensioni siano giusti. Nel template trovate già tutto il lavoro fatto (magari se lo usate datemi i crediti viste le ore che ci ho perso )

modificateli con Photoshop o paint.net facendo attenzione a non alterare dimensioni e rapporti, o potreste ottenere un simpatico schifo al posto di ciò che sperate!

6 I 9.PNG

Questi simpatici mascalzoni sono particolari png correlati di bordi neri. Ma attenzione, i bordi neri non stanno li a fare da cornicetta, ma servono in maniera molto precisa a definire come il png deve essere espanso nell'aria di applicazione!
Modificare nei colori questi png può essere fattibile, ma modificarli nella forma spesso e volentieri porta a schifi che neanche vi immaginate, o peggio ancora ad errori di installazione.

Non vanno mai ridimensionati, mai tagliati, mai modificare i bordi a caso ecc.
Per entrare un po' meglio nell'ottica della cosa ma soprattutto per creare i vostri 9.png in tutta sicurezza, o quasi, alla fine della guida vi allego una utility contenuta nell'sdk android, 9patch, che permette di creare e modificare in maniera molto precisa questi file. Usatelo, capirete subito come funzionano questo tipo di file, molto prima che spiegandolo a parole.

7 LE ANIMAZIONI

Per animazioni intendo serie di png che vengono utilizzati di default dal sistema per gestire le risorse, ad esempio checkboxes, interruttori, sliders, e tante altre cose. Qui per temare bisogna essere abbastanza bravi, ma in genere una volta rintracciata l'animazione dovete rifarla fotogramma per fotogramma (e occhio che avrete a che fare con 9.png) inserendo in maniera coerente e non troppo fuori dagli schemi (per evitare brutte sorprese) la vostra idea. Nel template trovate la mia personalissima animazione dei checkboxes e degli interruttori, anche qui se ne usate parte, crediti possibilmente, sembra facile ma mi ci è voluto tempo!

Altre cose, come le icone animate presenti nel mio tema, fanno uso di xml di supporto oltre che di una serie di fotogrammi. Essendo una cosa più avanzata e particolare, nel template li ho omessi, magari chiedetemelo in pm!

AL PROSSIMO POST LA MEGALISTA CON TUTTI I LINK DI COSE UTILI. SONO TUTTE CARICATE SUL MIO GOOGLE DRIVE, PER CUI I LINK FUNZIONERANNO IN ETERNO TEORICAMENTE!

[minar]

DOWNLOAD VARI:
- TEMPLATE: https://drive.google.com/file/d/0B-E...ew?usp=sharing
- 9PATCH: https://drive.google.com/file/d/0B-E...ew?usp=sharing
- PAINT.NET: http://www.getpaint.net/download.html
- PHOTOSHOP TOUCH: cercatelo sul play store, non sono ammessi link di app a pagamento che io sappia

[luigi997]

Mettiamo caso che io volessi modificare i colori dell'applicazione di whatsapp, potresti spiegare i vari procedimenti?

[minar]

whatsapp è una delle poche che è difficile modificare radicalmente. ad ogni modo ogni app ha le sue peculiarità e usa le sue risorse. nel template che ho allegato trovi anche whatsapp se non erro

[luigi997]

whatsapp è una delle poche che è difficile modificare radicalmente. ad ogni modo ogni app ha le sue peculiarità e usa le sue risorse. nel template che ho allegato trovi anche whatsapp se non erro

Allora qualche altra app? In generale, almeno per potermi orientare con tutte le altre

[wakedown]

Che il tema non compili è impossibile una volta che il manifest è giusto. Per cui se non compila, è nel manifest che dovete guardare.
Se installandolo il tema vi da errore (impossibile installare il tema, con tanto di triangolino), avete commesso un errore e il theme engine se n'è accorto, per cui dovete vedere dentro assets, e dei più comuni errori parleremo tra poco.

Ciao, prima di tutto complimenti per la guida, molto utile...

Sto cercando di compilare con apk tool ma non compila...aprendo il log mi da queste informazioni

------------------------------------------------------

Exception in thread "main" brut.androlib.AndrolibException: brut.directory.DirectoryException: java.io.FileNotFoundException: C:\Users\davide\Desktop\AdvancedApkTool\3-Out\Game (Impossibile trovare il file specificato)
at brut.androlib.Androlib.readMetaFile(Androlib.java: 247)
at brut.androlib.Androlib.build(Androlib.java:266)
at brut.androlib.Androlib.build(Androlib.java:258)
at brut.apktool.Main.cmdBuild(Main.java:240)
at brut.apktool.Main.main(Main.java:89)
Caused by: brut.directory.DirectoryException: java.io.FileNotFoundException: C:\Users\davide\Desktop\AdvancedApkTool\3-Out\Game (Impossibile trovare il file specificato)
at brut.directory.ZipRODirectory.<init>(ZipRODirector y.java:54)
at brut.directory.ZipRODirectory.<init>(ZipRODirector y.java:37)
at brut.androlib.res.util.ExtFile.getDirectory(ExtFil e.java:55)
at brut.androlib.Androlib.readMetaFile(Androlib.java: 243)
... 4 more
Caused by: java.io.FileNotFoundException: C:\Users\davide\Desktop\AdvancedApkTool\3-Out\Game (Impossibile trovare il file specificato)
at java.io.RandomAccessFile.open0(Native Method)
at java.io.RandomAccessFile.open(Unknown Source)
at java.io.RandomAccessFile.<init>(Unknown Source)
at org.apache.commons.compress.archivers.zip.ZipFile. <init>(ZipFile.java:203)
at org.apache.commons.compress.archivers.zip.ZipFile. <init>(ZipFile.java:182)
at org.apache.commons.compress.archivers.zip.ZipFile. <init>(ZipFile.java:143)
at brut.directory.ZipExtFile.<init>(ZipExtFile.java:2 8)
at brut.directory.ZipRODirectory.<init>(ZipRODirector y.java:52)
... 7 more

------------------------------------------------------


Cosa significa?