9-Patch Splashscreens für Android-Apps mit PhoneGap Build erstellen

Beim Start einer App werden zur optischen Überbrückung der Ladezeiten und um den Nutzer zu informieren, dass die App überhaupt startet, häufig sogenannte Splashscreens eingesetzt. Diese können bspw. aus dem Logo der App oder Firma bestehen und verschwinden im Regelfall, wenn die App geladen ist. Das Einbinden und die Nutzung dieser Splashscreens ist bei Apps, die über PhoneGap Build erstellt werden, sehr unkompliziert.

Ablauf

Nach Integration des entsprechenden PhoneGap-Plug-ins werden die Bilddateien einfach über ein Tag unter Angabe des Quellpfades eingebunden. Für iOS Geräte ist dies nicht problematisch, da es nur wenige, festgelegte Displaygrößen bzw. -auflösungen gibt und somit ein Splashscreen für jede Auflösung und Geräteausrichtung hinterlegt werden kann. Unter Android ist die Vielfalt deutlich größer, allerdings können für das Plug-in lediglich vier Splashscreens in eher allgemein gültigen Auflösungen hinterlegt werden. Das Problem hierbei ist, dass bei der Nutzung von herkömmlichen Bilddateien eine äußert unschöne Streckung der Splashscreens ensteht, wenn die Auflösung des Gerätes nicht  der des Splashscreens entspricht oder sich die Geräteausrichtung ändert. Um dieses Problem zu umgehen, sollten für Android Apps 9-Patch Bilder als Splashscreens verwendet werden. Bei diesen Bilddateien sind zusätzliche Informationen über streckbare Bereiche im Bild hinterlegt. Das bedeutet, dass bei der Erstellung Bereiche angegeben werden, welche bei den vorher erwähnten, zur Streckung des Bildes führenden, Szenarien automatisch gestreckt werden. Somit bleibt der eigentliche Bildinhalt unangetastet und wird nicht verzerrt dargestellt. Die Erstellung eines solchen 9-Patch Bildes ist mit einem entsprechenden Tool recht einfach. Im Beispiel wird das Tool “draw9patch” verwendet, welches ein Bestandteil des Anroid SDK ist. Nach dem Starten über die Konsole besteht die Möglichkeit, ein Bild über den Menüpunkt “File” zu öffnen oder einfach per Drag & Drop auf die Programmoberfläche zu ziehen.

1

Nach dem Öffnen befindet sich auf der linken Seite des Fensters der Editor mit welchem man die Bereiche festlegt und auf der rechten Seite eine Vorschau des Bildes, wie es ohne die eingerichteten streckbaren Bereiche auf einem Gerät aussehen würde (da diese ja noch nicht festgelegt wurden).

2

Nun kann mit dem Festlegen der Bereiche begonnen werden. Am einfachsten ist es, diese je nach Größe des Bildteils, der ungestreckt erhalten bleiben soll, möglichst weit am Rand zu platzieren. Das Setzen der Markierungen erfolgt einfach durch “Ziehen” der Grenzen der grauen Fläche. Weitere Markierungen können erstellt werden, indem diese  am Rand des Bildes, innerhalb der karierten Fläche, “aufgezogen” werden. Sind alle notwendigen Markierungen platziert und die Bereiche somit festgelegt, kann man das Ergebnis noch einmal auf der rechten Seite ansehen. Die im Editorbereich grün dargestellten Flächen sind dabei diejenigen, die gestreckt werden. Beachtet werden sollte hierbei allerdings, dass es auf bestimmten Android-Geräten zu unschönen Streckungseffekten kommen kann sofern das Ausgangsbild nicht quadratisch ist. Deshalb wird empfohlen, falls möglich, immer ein quadratisches Bild zu nutzen. 3

Anschließend kann das Bild als .9.png-Datei gespeichert und auf übliche Weise in der config.xml der App als Splashscreen eingebunden werden.

Ein flexibler Splashscreen und nun? Lassen Sie auch den Rest der App so flexibel sein, wie Sie möchten – Mit einer Multi-Channel-App fit für die Zukunft!

Gemeinsam etwas starten?
Einfach Kontakt aufnehmen:

FLYACTS Anne

NEUKUNDEN & ANFRAGEN

ANNE SCHULZE

+49 3641 55 987 92
hallo@flyacts.com

FLYACTS Christin

PR & MARKETING

CHRISTIN DOMIN

+49 3641 55 987 93
presse@flyacts.com

Share This