CM-Themes mit der neuen Theme Engine entwickeln

CyanogenMod hat vor geraumer Zeit seine neue Theme Engine vorgestellt. Seit Mai ist diese nun fester Bestandteil von CM11. Dazu wurde vom CM-Team ebenso ein neuer Theme Manager entwickelt und der Funktionsumfang der Designs aufgestockt. In der Vergangenheit konnte nur das Aussehen des Systems, von Apps und den Anwendungs-Icons angepasst werden. Jetzt kommen Schriften, Bootanimationen sowie Töne hinzu. Die Entwicklung soll zudem wesentlich einfacher sein. Themes lassen sich modularer zusammenstellen. Eine Win-win-Situation für Themedesigner und Anwender. Ich habe mittlerweile auch die Zeit gefunden, mir die überarbeitete Theme Engine genauer anzuschauen. Nachfolgend möchte ich euch eine kurze Einführung geben.

CyanogenMod macht Designen zum Kinderspiel

Um starten zu können, braucht es die gleiche Ausgangsbasis, wie bei der alten Theme Engine. Also JRE installieren, anschließend Apktool und APK-Signer. Beides entpacken und aus einem aktuellen CM11-Release die framework-res.apk herauskopieren. Diese dann per Kommandozeile im Apktool registrieren. Etwas genauer habe ich das bereits in einem früheren Artikel beschrieben. CyanogenMod bietet für die neue Theme Engine auf GitHub eine Vorlage an. In der README.md erklärt das CM-Team den Aufbau. Ladet das Theme-Template für ein erstes eigenes Projekt herunter. Der Entwurf verrät schon eine ganze Menge über die neuen Möglichkeiten. Beispielsweise zeigt der Ordner assets welche Ressourcen künftig in den Designs eingebettet werden können und wie dies geschieht. Wer möchte, kann sich das Beispiel als APK kompilieren.

neue Möglichkeiten für CyanogenMod-Themer
neue Möglichkeiten für CyanogenMod-Themer

CyanogenMod hat die neue Theme Engine deutlich verschlankt. Die neue Struktur ist nun bedeutend übersichtlicher. Der Ordner res dient dem Theme jetzt nur noch als Basis für das App-Icon und den Theme-Namen. Die AndroidManifest.xml wurde stark reduziert. Es bedarf lediglich folgender Angaben: Paketbezeichnung, Versionsnummer, Theme-Name und Ersteller.

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

Inhalt der AndroidManifest.xml

Alle relevanten Änderungen durch das Design sind ausschließlich im Ordner assets abgelegt. Dort könnt ihr zum Beispiel direkt eine Bootanimation, Schriftarten oder Klänge hinterlegen. App-Icons lassen sich natürlich wie vorher tauschen. Gerade das Gestalten des Android-Designs wurde um einiges erleichtert. Unnötiges Verlinken der Anpassungen entfällt mit der neuen Engine. Entsprechend für jede Anwendung wird dessen Struktur einfach nachgebildet. Auf die Art kommt mehr Übersicht in den Themingprozess.

├──overlays/
│	├──foo.package.name/
│	│	└──res/
│	│		├──drawable-{ hdpi, xhdpi, ... }/
│	│		│	├──some_resource.{ jpg, png, ... }
│	│		│	└──{ ... }
│	│		├──{ ... }
│	│		├──drawable/
│	│		│	├──some_resource.xml
│	│		│	└──{ ... }
│	│		└──values/
│	│			├──colors.xml
│	│			└──styles.xml

Auszug aus der README.md

Vorher war ja alles quasi in einer App in den passenden Ordnern im Verzeichnis res. Um das Theme zu finalisieren, geht ihr genauso vor, wie bisher beim Erstellen von CM-Themes. Schaut dazu in meine kleine Anleitung vom April.

Stell dir dein Android-Design frei zusammen

Neben der neuen Theme Engine hat CyanogenMod seiner Custom ROM auch einen aufgebohrten Theme Chooser verpasst. Dieser kann jetzt erheblich mehr, als einfach nur ein Design anwenden. Der Nutzer hat die freie Wahl zwischen Designpaketen oder deren einzelnen Modulen. So könnt ihr alles individuell festlegen. Hier ein Beispiel: Stil aus Theme A, Bootanimation aus Theme B, Klänge aus Theme C, Schrift aus Theme D, Icons aus Theme E, Wallpaper für Homescreen und Lockscreen legt ihr selbst fest. Der Theme Manager unterstützt ebenso Icon-Packs von Drittanbietern. Daher funktionieren genauso Sets, die eigentlich für Launcher gedacht sind. Alte CM-Themes laufen auch mit dem neuen Theme Chooser. Allerdings nur das Design. Natürlich sollte man beachten, dass der Theme auf die neusten Änderungen von CyanogenMod angepasst wurde. Ansonsten treten Darstellungsfehler auf.

der neue Theme Chooser von CyanogendMod
der neue Theme Chooser von CyanogendMod

Die neue Theme Engine und deren Aufbau gefällt mir richtig gut. Das ist für meine Begriffe eine Option um MIUI Konkurrenz zu machen. Durch den baukastenähnlichen Aufbau bleibt für den Anwender kaum ein Wunsch offen. Vielleicht wäre es noch eine Idee, die Verwendung einzelner App-Anpassungen weiter zu modularisieren. Dann wäre die Designwahl absolut umwerfend. Das Erstellen von Themes für CyanogenMod ist jetzt wirklich ein Kinderspiel. Man braucht nur minimale Android-Erfahrungen um selbst eigene Designs zu gestalten.

Update 16.07.2014 — 20:45: Anscheinend wird mein Gedanke einer noch stärkeren Modularisierung der Theme-Komponenten bald zur Realität. Im Quellcode der CM-Nightlies wurden entsprechende Hinweise gefunden. Schauen wir mal, wann erste Ergebnisse ersichtlich sein werden.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

6 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.

  1. Kommentar von Boy2 · · #

    Hey hätte eine Frage,

    Es ist sehr gut dass du hier eine Anleitung Schreibst. Ist für manche bestimmt hilfreich. Nur ich blicke da leider nicht so durch :)? Meinst du, dass du mir es irgendwie erklären kannst? Ich besitze leider keine programmier Fähigkeiten noch verstehe ich was von dem Android system (Eigentlich nur das nötigste). Ich würde mir wirklich gerne ein eigenes Theme machen, weil ich Spass am designen habe und öfters mal Kleinigkeiten in Photoshop erstelle. Ich wusste nur leider nicht das man auch irgendwie coden muss.

    Hoffe du verstehst was ich meine und kannst mir weiter helfen.

    Ich entschuldige mich für die Rechtschreibung und die Darstellung. Der Text ist mit dem handy geschrieben und ich bin auch müde :).

    Mfg,
    Boy2

  2. Kommentar von reraiseace · · #

    Hallo Boy2, diese Frage lässt sich nicht pauschal beantworten. Schau dir in erster Linie das Beispiel-Theme an, insbesondere den Ordner overlays. Darin findest du schon viele Ansatzpunkte. Du brauchst auf jeden Fall das Wissen, um APK-Dateien zu de-/compilieren. Decompiliere dir die App, die du themen willst. Das hilft ungemein um ein Gefühl dafür zu bekommen. Meist liegen Grafikressourcen in drawable-(x, xx, xxx)hdpi oder ähnlich benannten Ordnern. Farbangaben etc. sind im Ordner values zufinden. Es ist schwierig eine Schritt für Schritt Anleitung zu erstellen, weil jede App individuell gestaltet wurde. Im Grunde braucht man als Theme-Designer weitestgehend Grafiken und Farbwerte (hex).

  3. Kommentar von Eragon · · #

    Hallo, danke für dein gutes Tutorial. Ich habe ein Problem. Icons von Apps kann ich ändern, wenn ich aber Dinge aus dem Overlays Ordner ändere passiert keinerlei änderung. Wäre cool wenn du vlt noch zeigen würdest wie man den “Alle Apps” Button ändert.
    Muss man etwas spezielles bei dem Apex Launcher beachten? (Habe das mit dem Overlay mit dem Trebuchet- und Apex Launcher an einem One Plus One getestet)
    MfG Eragon

  4. Kommentar von reraiseace · · #

    Soweit mir bekannt, muss die Bezeichnung der zu ersetzenden Ressource identisch sein. Zusätzlich musst du die Ordnerstruktur der App innerhalb des Themes nachbilden. Anhand der Design-Vorlage von CM wird dies deutlich (im Artikel verlinkt). Meinst du mit “Alle Apps” das Symbol, welches du in den Launchern findest, um den App Drawer aufzurufen? Das kann verschieden sein. Wenn es direkt in dem Launcher drinsteckt, musst du es auch dort ändern. Ansonsten ist ein Blick in die framework-res.apk meist hilfreich.

  5. Kommentar von Eragon · · #

    Danke hab alles gefunden. Mein fehler war das ich die falschen Bilder geändert habe. Eine Frage hab ich noch. Wie ändert man die Lockscreens Icons der Apps? wo die bilder sind habe ich gefunden aber nicht wo man die eintragen muss oder so?
    Danke und MfG Eragon

  6. Kommentar von reraiseace · · #

    Das dürfte nach /assets/overlays/com.android.keyguard/res/drawable-xxhdpi gehören. Man muss einfach nur die entsprechende App nachbilden und die Ressourcen mit gleichem Namen ersetzen.