EMUI5-Theme Tutorial
Die Themes bei Huawei, welche man mit EMUI einsetzen kann, können das Aussehen der grafischen Oberfläche komplett ändern. Viele nutzen den ThemeEditor aus dem Playstore, dieser ermöglicht aber nur eine bedingte Einstellungsmöglichkeit. Ich zeige Euch heute, wie Ihr am PC komplette Themes selbst erstellen könnt.
Inhaltsverzeichnis show
1. Vorbereitung
Wir benötigen zuerst einige Programme um die Erstellung durchführen zu können. Da wir verschiedene Dateitypen bearbeiten werden, brauchen wir folgende Programme:
- Notepad++ für die XML-Bearbeitung ( Download )
- 9Patch-Editor für die Bearbeitung von 9.png-Dateien ( Download )
- xUltimate-9Patch für die Konvertierung der 9.png-Dateien ( Download – Nur entpacken )
- Ein Grafikprogramm Eurer Wahl ( ich nutze PhotoImpact X3 )
- 7Zip zum entpacken und packen des Themes ( Download )
Nutzt Ihr Linux oder OSX als Betriebssystem, müsst Ihr Euch Alternativen zu diesen Programmen suchen. Habt Ihr all diese Programme installiert können wir nun mit der Erstellung loslegen.
2. Hell oder Dunkel (oder: Vorbereitungen)
Damit Ihr alles bereits als Vorlage habt, könnt Ihr eine meiner zwei Vorlagen verwenden, welche auch Whatsapp, Youtube und den Playstore beinhalten. Folgende Vorlagen habe ich Euch zur Verfügung gestellt:
- Helles Design: RedLines ( Download: https://goo.gl/tbUuEr )
- Dunkles Design: FlatDark ( Download: https://goo.gl/6vBS6T )
Öffnet nun den Dateimanager und erstellt zwei neue Order. Einen nennt Ihr „OrigTheme“ und den anderen „Work“. In diesen zwei Ordnern werden wir die komplette Erstellung bearbeiten.
Klickt mit der rechten Maustaste auf das von Euch gewählte Theme und klickt dann auf „7Zip → öffnen“. Ihr erhaltet nun die Übersicht aller beinhalteten Themedateien. Markiert nun alles, haltet die linke Maustaste gedrückt und schiebt die Dateien in den Dateimanager → Ordner „OrigTheme“.
Das Programm 7Zip dürfte nun noch offen sein – markiert darin nun alle Dateien außer:
- preview
- wallpaper
- unlock
- description.xml
- icons
Alle markierten Dateien könnt ihr nun löschen indem Ihr die Taste „Entf“ drückt. Keine Angst, wir haben ja die notwendigen Dateien im Ordner „OrigTheme“ gesichert. Wir werden Punkt für Punkt abarbeiten, damit keinerlei Fehler im neuen Theme entstehen.
Jede Datei welche wir bearbeiten wollen kopieren wir immer in den Ordner „Work“, damit wir nicht aus Versehen eine „alte“ Datei einfügen und unsere Arbeit damit zerstören. Haben wir eine Datei fertig bearbeitet, „schieben“ wir diese in das geöffnete 7Zip. Ihr könnt dann jederzeit Euer Theme auf Euer Smartphone kopieren und ausprobieren.
3. Arbeitsweise
Damit es nicht zu Missverständnissen kommt erkläre ich Euch erst einmal die Vorgehensweise bei der Erstellung. Folgendes erwähne ich nur – erkläre es nicht extra im nachfolgenden Text. Daher diesen Bereich genau lesen:
- Entpacken: Die gewünschte Datei mit rechter Maustaste anklicken, „7Zip → Entpacken nach [Name]“ in den Ordner „Work“. Nach Abschluss der Bearbeitung einer Datei löschen wir immer alles aus dem Ordner außer „framework-res-hwext“
- In das Theme übernehmen: In dem geöffneten Theme mit 7Zip doppelklicken auf die entsprechende Datei und den Inhalt des Ordners „Work“ darau schieben. Dann auf den Pfeil nach oben (unterhalb des Buttons „+ Hinzufügen“ in 7Zip klicken und das Aktualisieren bestätigen.
- Zum Theme hinzufügen: Datei aus dem Ordner „OrigTheme“ auswählen und in das mit 7Zip geöffnete Theme schieben → Aktualisierung bestätigen.
4. Name des Themes und Informationen bearbeiten
Öffnet die „description.xml“ mit dem Programm Notepad++. Ändert nun nachfolgende Bereiche nach Euren Wünschen:
- „title“ und „title-cn“: Dies ist der Name Eures Themes
- „author“ und „designer“: Euer Name ( ich persönlich erwähne dort immer auch EMUI )
- „briefinfo“: Die Beschreibung Eures Themes
- „version“: Die Version Eures Themes. Wenn Ihr eine grobe Änderung macht, solltet Ihr die Versionsnummer ändern, damit der ThemeManager neu initialisiert
Kopiert nun die Datei „description.xml“ in das mit 7Zip geöffnete Theme. Wenn Ihr alles richtig gemacht habt ( ich empfehle in den Texten keine Sonderzeichen zu verwenden) zeigt der ThemeManager nun Euer Theme mit den von Euch gemachten Angaben an.
5. Wallpaper und Preview
Da wir uns am Anfang auf die einfachen Dinge konzentrieren, beginne ich mit Euch das Theme nun von „oben“ nach „unten“ durchzuarbeiten. Die Preview-Bilder: Die im ThemeManager angezeigten Screenshoots liegen in dem Ordner „preview“. Ändert auf KEINEN Fall die Namen der Dateien, da diese sonst nicht angezeigt werden! Am Ende der Erstellung ersetzt Ihr einfach diese Grafiken mit Screenshoots aus Eurem Theme.
Wallpaper: Da gibt es mehrere – behaltet die Größen und Namen bei, damit diese auch vom System übernommen werden. Ihr könnt ansonsten diese verändern wie Ihr wollt – sucht Euer Lieblingswallpaper heraus und fügt diese ein. Wenn ihr nun das Theme anwendet, wird der Hintergrund auf dem Homescreen, Lockscreen und Cover nun geändert. Einfach oder?
6. Das Framework
Das Framework ist die Grundlage für alle Einstellungen. Die Datei „framework-res“ könnt Ihr missachten (nicht löschen!). Diese hat nur kleine Grundeinstellungen die in jedem Theme gleich sind. Wichtig für uns ist die Datei „framework-res-hwext“. Kopiert die Datei in den Ordner „Work“ und wieder mit der rechten Maustaste: 7Zip → öffnen. Folgende Struktur findet Ihr nun vor:
- Ordner: res/drawable-xxhdpi
- Datei: theme.xml
Erstellt im Ordner „Work“ nun einen Ordner namens „framework-res-hwext“ ( diesen benötigen wir später noch ) und entpackt alles in disen Ordner. Öffnet nun die Datei „theme.xml“ mit Notepad++. Wenn Ihr ein wenig Englisch könnt, dürften die nun zu sehenden Bereich klar sein. Ändert nun die Farben nach Euren Wünschen. Dabei ist folgendes zu beachten:
Immer im HEX-Format! Farbcodes könnt Ihr beispielsweise von hier nehmen https://material.io/guidelines/style/color.html#color-color-palette
Transparenz: einige Farbcodes haben nicht das Format #000000 sondern #FF000000. Hier wird mit den ersten zwei Zeichen die Transparenz eingestellt. „00“ ist durchsichtig und „ff“ ist 100% Deckstärke. Angaben erfolgen wie bei den HEX-Farbcodes – also „0-9“ und „A-F“
Widmen wir uns nun dem Ordner „res/drawable-xxhdpi“. In diesem Ordner findet Ihr nun drei Dateitypen: „*.xml“, „*.png“ und „*.9.png“. Die „xml“-Dateien sind nichts weiter als PNG-Grafiken! Diese einfach mit dem Grafikprogramm öffnen, bearbeiten und dann speichern. Beachtet hierbei: Verwendet immer die „xml“ als Grundlage, da einige Zusatzinfos darin vorhanden sind, welche bei der Neuerstellung eines PNG nicht dabei sind!
Die PNG-Grafiken könnt Ihr nach Lust und Laune ändern. Da sind keinerlei Grenzen gesetzt. Jedoch bei den „*.9.png“-Dateien benötigen wir etwas mehr Aufwand.
7. „*.9.png“-Dateien bearbeiten
Ich erkläre Euch erst einmal die Vorgehensweise und dann warum dies so gemacht werden muss. Öffnet diese erst einmal mit dem Grafikprogramm Eurer Wahl. Speichert diese nach der Bearbeitung ab. Öffnet nun „9Patch-Editor“ (Java muss installiert sein) und sucht in der linken Dateistruktur die gewünschte Grafik aus. Ihr habt nun acht gestrichelte Linien, wie sie auf dem nachfolgenden Bild zu sehen sind. Diese verschiebt Ihr nun so wie auf dem Bild und klickt dann oben auf das „Speichern“-Symbol.
Zur Erklärung: Diese „*.9.png“-Dateien sind Grafiken, welche nach Bedarf gestreckt werden können. Die eben festgelegte Markierung übermittelt dem Theme, welche Bereiche gestreckt werden können und welche nicht. Der mittlere Bereich der bei dem Einstellen entseht wird dann bsp. für Text verwendet. Nutzt Ihr beispielsweise einen Kreis, müsstet Ihr die Linien so verschieben, dass in der Mitte nur ein Feld von 1×1 Pixel bleibt.
Nun wandeln wir diese Grafik noch um, damit diese „schwarzen Striche“ verschwinden und alle Angaben vom Theme übernommen werden können. Kopiert die bearbeitete Datei in den Ordner „xUltimate-9Patch/Originals/res/drawable-hdpi/“. Geht nun zurück in den Hauptordner „xUltimate-9Patch“ und klickt doppelt auf die Datei „xUltimate-d9pc.exe“. Es wird nun ein Ordner „done“ automatisch erstellt, indem Ihr die umgewandelte Datei findet. Kopiert diese nun in Euer Theme.
8. Bearbeitung Framework beenden
Wenn Ihr alles fertig habe, kopiert alles in Euer Theme in die Datei „ framework-res-hwext“. Das war’s erst mal – Scheint doch einfacher als gedacht.
9. Bearbeitung aller weiteren Dateien
Außer die Datei „icons“ werden alle anderen Dateien genauso verändert. Es ist immer eine „theme.xml“ in der Ihr die Farbcodes ändert und zusätzliche Ordner, in denen Ihr alle Grafiken findet. Beachtet da einfach immer nur den Typ der Grafik und es kann nix schief gehen.
ABER: besonders für dunkle Themes benötigt Ihr immer das Framework in dem zu ändernden Bereich. Daher lassen wir in unserem „Work“-Ordner immer den Ordner „ framework-res-hwext“ bestehen. Den einfach immer mitkopieren – fertig.
10. Die Icons ändern
Dies nimmt leider die meiste Zeit in Anspruch. In der Datei „icons“ findet Ihr schon einmal eine Unmenge an derzeit aktuellen Icons. Wollt Ihr diese ändern, nutzt einfach ein Iconpack Eurer Wahl, entpackt die Icons davon (geht wunderbar mit 7Zip) und benennt diese wie in der Vorlage um. Kopiert dann die neuen Icons in die Datei „icons“ und diese dann in Euer Theme.
11. Schriften und Neustart-Screen
Für diese Bereiche kann ich Euch leider noch keine Anleitung geben. Die Schriftart ändern ist immer etwas heikel, da hier richtig viel schief gehen kann. Die Schriftart müsste 100% kompatibel sein, damit alles dargestellt wird. Ich empfehle davon die Finger zu lassen. Bei den Neustart-Symbolen habe ich selbst noch keine Änderungsmöglichkeit gefunden – wenn Ihr eine habt, postet es doch einfach mal in die Kommentare.
Das war es eigentlich schon. Durch die Anzahl der Dateien ist es zwar schon aufwendig ein neues Theme zu erstellen ( wenn man wirklich alles ändert benötigt mann 3-4 Stunden ), aber die Mühe lohnt sich allemal, da Ihr genauere Einstellungen vornehmen könnt, als mit dem Theme-Editor.
Wenn Ihr Euer erstes Theme fertig habt, kontaktiert uns doch einfach mal und zeigt uns, was Ihr erstellt habt. Wir sind sehr gespannt!
