Die Erstellung eines Launcher-Logos für die eigene mit NetBeans generierte hybride Web-App ist etwas hakelig. Die Dokumentation von Cordova diesbezüglich lässt an Klarheit zu wünschen übrig und unsere Debug-Möglichkeiten sind in solchen Fällen sehr beschränkt.
Wir werden später noch Möglichkeiten kennenlernen, wie man Icons für verschiedene Zwecke für hypbride Apps sinnvoll organisiert. In diesem Beitrag wird eine schnelle Alternative vorgestellt, die ohne viel Theorie den Spaß am Entwickeln durch ein schönes Launcher-Icon erhöht, ohne dafür in die Tiefe gehen zu müssen.
Bild-Ressourcen für eine App werden in einer Cordova-Applikation gespeichert in verschiedenen Auflösungen in folgenden Ordnern:
- <Projekt>\platforms\android\res
- <Projekt>\platforms\android\ant-build\res
Wir sehen verschiedene Ordner für verschiedene Auflösungen (vgl. Abb. 1):
Abb. 1: Ressourcen für das Launcher-Icon in einer Cordova-Applikation
In den drawable-Ordnern sind die Launcher-Icons mit folgenden Auflösungen jeweils mit dem Namen icon.png gespeichert.
- drawable: 96x96
- drawable-xdpi: 96x96
- drawable-hdpi: 72x72
- drawable-mdpi: 48x48
- drawable-ldpi: 36x36
Dies sind die wichtigsten Icons. Es kann sein, dass bei einem Build der Android-Applikation durch NetBeans noch weitere Ordner angelegt werden. Für unsere Zwecke können alle übrigen drawable-Ordner gelöscht werden.
Es ist so, dass normalerweise für eine App alle grafischen Ressourcen für die unterschiedlichsten Zwecke mehrfach in jeweils dafür eingerichteten Ordnern vorhanden sein sollten. Es gibt Launcher-Icons, Notify-Icons, Dialog-Icons, List-Icons, Menu-Icons, Tab-Icons, Market-Icons, usw. Das alles will in einer nativen App wohl organisiert sein und alle diese Icons müssen in verschiedenen Auflösungen zur Verfügung stehen.
Für unsere hybride App brauchen wir vorerst nur das Launcher-Icon und dort kommen wir mit den fünf Ordnern oben aus.
Wichtig: Wir werden hier keine Konfigurationsfiles ändern, sondern nur die Android-Standard-Icons mit dem Namen icon.png in diesen 2 x 5 Ordnern austauschen, d.h. in beiden oben aufgelisteten res-Ordnern!
Warum verwenden wir nicht den res-Ordner im Root des Projekts und tragen dort in config.xml unsere Ressourcen ein?
Weil es extrem nervig ist, die Konfigurations-Formate immer wieder zu aktualisieren, die sich bei einem Wechsel der Cordova- bzw. NetBeans-Versionen leider permanent ändern. Man findet im Web Konfigurationsbeispiele, die aber mit großer Wahrscheinlichkeit nicht für die eigene Konfiguration funktionieren. Es ist halt im Moment noch zuviel in der Entwicklung, als dass sich hier schon ein konstanter Standard herausgebildet hätte. Deshalb machen wir es hier quick & dirty.
Um das Problem etwas abzumildern, kann man sich die Builds für Cordova natürlich auch selbst ohne NetBeans aufbauen.
TIPP: Da es häufiger vorkommt, dass man die Ordner <project> / platforms / android und <projekt> / plugins löschen muss, etwa wenn man von einer Cordova-Version oder NetBeans-Version auf eine andere wechselt, sollte man sich die erstellten Icon-Ressourcen gut außerhalb des Projektordners sichern.
Ich habe für meine Blog-App zunächst ein Icon 300x300 mit Gimp gemalt und im png-Format exportiert. Die Größe ist dabei zunächst einmal unerheblich. Für eine gute Qualität für verschiedene Einsatzbereich darf dieses Image ruhig 500x500 Pixel groß sein.
Dann habe ich diesen praktischen Online-Icon-Generator im Netz gefunden, auf den man sein Icon hochladen kann und dann in alle benötigten Android und iOS-Formate konvertieren kann.
Das Ergebnis ist recht brauchbar. Die gerundeten Ecken sowie die Farbabstufungen der Grundfarbe werden vom Generator geliefert. Hochladen habe ich nur ein unifarbenes Quadrat mit der Beschriftung in den gewünschten Farbe Schwarz, Rot und Blau.
Abb. 4: Mit einem App-Icon-Online-Generator erstelltes Launcher-Icon für dieses Weblog
Alle denkbaren Formate kann man sich danach in einem Rutsch als zip-Datei herunterladen und findet dort irgendwo unter icon/android/ic_launcher_icon die vier drawable-Ordner mit den Icons für verschiedene Auflösungen.
Den Ordner drawable sollte man sich sicherheitshalber aus einer Kopie des drawable-xhdpi-Ordners zusätzlich erzeugen.
Nicht vergessen: Die Icons in den Ordnern haben eigene Namen und müssen alle in icon.png umbenannt werden, es sei denn, man will config.xml im Root-Verzeichnis des Projekts anpassen. Aber darauf verzichten wir ja hier vorerst, um die Sache so einfach wie möglich zu halten.
Nach diesen anstrengenden Vorarbeiten können wir nun unser Icon auf einem mobilen Endgerät ausprobieren, wenn wir eines zur Hand haben und zwar in folgenden Schritten:
- Die Caches und Daten der alten Anwendung auf dem Handy am besten alle löschen (Menu: Anwendungen verwalten).
- Die alte App auf dem Endgerät komplett deinstallieren.
- clean build in NetBeans ausführen (einfaches Build reicht nicht).
- run --device, entweder per NetBeans, was bei mir im Moment wegen eines NetBeans-Bug der neuesten Version nicht funktioniert oder über eine Windows-Console im Ordner <project>\platforms\android\cordova.
Danach kann man sein Weblog über einen attraktiven Launcher-Button auf seinem mobilen Endgerät starten.
Update: Das komplette Deinstallieren der alten App ist gar nicht so einfach. Man sollte im Falle der Änderung eines Launcher-Icons absolut sicher gehen, dass keine Ressourcen der alten Version sich noch auf einem Emulator befinden. Hierzu gibt es neben dem Deinstallieren der alten App noch folgende Möglichkeiten:
1. Möglichkeit: Beim Start des Emulators kann man die Checkbox Wipe user data (vgl. Abb. 5) aktivieren. Damit werden dann alle Anwendungen und Einstellungen zurückgesetzt.
Abb. 5: Android Virtual Device Manager / Device Start / Launch Options
Dies reicht aber für das komplette Löschen des alten Launcher-Icons oft nicht. Deshalb bleibt als radikale Lösung die Löschung der Image-Dateien des Emulators.
2. Möglichkeit: Man kann einen schon erstellten Emulator komplett zurücksetzen, indem man alle .img-Files einer Emulatordefinition löscht (nur diese). Manchmal findet man diese Datein dort auch als .zip-Dateien und zwar in folgendem Verzeichnis (z.B. für einen Android 2.2 - Emulator):
- C:\Users\<user>\.android\avd\Nexus7Android22.avd
Wenn man jetzt die App neu aufspielt, findet man garantiert das neue Launcher-Icon in der App-Liste.