Hardware Skins für virtuelle Mobilgeräte

Apps für Mobilgeräte werden – wie andere Software auch – auf Desktop-Rechnern entwickelt. Um eine App während der Entwicklung nicht laufend auf ein Mobilgerät aufspielen zu müssen, benutzen Entwickler Emulatoren, die das Aussehen und Verhalten solcher Geräte auf dem Desktop nachbilden (Bild 1).

Das Emulatorenfenster für ein Android-Smartphone
Bild 1: Das Emulatorfenster für ein Android-Smartphone


Einen Emulator kann man optional mit einem Skin ausstatten, so dass auch Hardware-Buttons (Tasten oder eine Tastatur) grafisch emuliert werden können (Bild 2). Dies ist besonders nützlich, wenn die zu entwickelnde App auf Hardware-Ereignisse reagieren soll, da man die Buttons mit der Maus bedienen kann.

Hardware-Skin des Google Nexus One
Bild 2: Das gleiche Gerät wie in Bild 1, aber mit Hardware-Skin des Google Nexus One

In diesem Artikel zeige ich, wie Sie einen Hardware-Skin für ein Android-Gerät (Samsung Galaxy S6) mit dem Grafikeditor paint.net1) erstellen und im AVD Manager2), der mit Android Studio3) ausgeliefert wird, einsetzen. Einen ausführlichen Artikel zum Thema habe ich in der web & mobile developer 8/20154) veröffentlicht.

Erstellen der Hintergrundgrafik

Zuerst fertigen Sie eine Grafik des Mobilgeräts auf Basis eines Produktfotos an:

  1. Laden Sie ein passendes Produktfoto von der Website des Herstellers herunter.
  2. Öffnen Sie die Grafik in paint.net, messen Sie mit dem Werkzeug Rechteckige Auswahl den Bildschirmbereich aus, und rechnen Sie den Faktor zur Größenanpassung der Grafik aus.
    Beispiel:
    Groessenanpassung Bild


  3. Anschließend skalieren Sie das Bild über Bild, Größe ändern um den errechneten Faktor, so dass der Bildschirmbereich das gleiche Format und die gleiche Pixelanzahl hat wie das physikalische Gerät.
  4. Stellen Sie die Grafik frei. Produktfotos stehen meist vor einfarbigem Hintergrund, so dass einfaches Zuschneiden ausreicht. Dazu setzen Sie mit dem Werkzeug Zauberstab eine Maske auf den Hintergrund, wählen Bearbeiten, Auswahl umkehren und schließlich Bild, Auf Markierung zuschneiden. Darauf setzen Sie im Fenster Farben die Sekundärfarbe auf transparent (Transparent-Alpha = 0) und fügen über Bild, Leinwandgröße jeder Seite einen Leerraum von circa fünf Prozent der längsten Seite der Grafik hinzu.
  5. Bei Bedarf können Sie das Bild über Korrekturen oder Effekte anpassen – so lassen sich über Effekte, Unschärfe und Weichzeichner, Oberflächenunschärfe Artefakte beseitigen, die durch eine Bildvergrößerung entstehen können.
  6. Legen Sie anschließend mit dem Werkzeug Rechteck eine schwarze Fläche über den Bildschirmbereich. Wenn alles stimmt, hat diese Fläche die genauen Pixelmaße des Zielgeräts (kleine Abweichungen sind nicht tragisch). Notieren Sie sich bei dieser Gelegenheit die Koordinaten der linken oberen Ecke des Rechtecks – die Angabe wird später bei der Konfiguration benötigt. Sie können diese Werte in der Statusleiste des Grafikeditors ablesen, wenn Sie eine Rechteckmaske (Werkzeug Rechteckige Auswahl) über die Fläche legen (Bild 3).
  7. Speichern Sie die fertige Grafik unter dem Namen background.png in einem neuen Ordner galaxy_s6 ab. Für das Querformat drehen Sie das noch geöffnete Bild nach links (Bild, Um 90° entgegen dem Uhrzeigersinn drehen) und speichern es unter background_land.png ab.

Beachten Sie, dass Sie so erstellte Grafiken nicht ohne Zustimmung des Urhebers weitergeben dürfen.

Bild 3: Nachdem in paint.net eine Rechteckmaske platziert wurde (1), lassen sich die Koordinaten (2) und Dimensionen (3) des Bildschirms ablesen.

Nachdem in paint.net eine Rechteckmaske platziert wurde (1), lassen sich die Koordinaten (2) und Dimensionen (3) des Bildschirms ablesen.


Erstellen der Button-Grafiken

Für die Hardware-Buttons benötigen Sie teiltransparente Overlay-Grafiken, die vom Emulator bei einem Mouseover-Ereignis eingeblendet werden. Ein guter Ausgangspunkt sind die Grafiken im Plugin-Verzeichnis von Android Studio (…\Android Studio\plugins\android\lib\device-art-resources\), die Sie bei Bedarf mit paint.net weiter anpassen oder ergänzen müssen. Um beispielsweise eine Overlay-Grafik für den Menü-Button zu erstellen, gehen Sie wie folgt vor:

  1. Öffnen Sie die Hintergrundgrafik (background.png oder background_land.png) und wählen Sie Ebenen, Neue Ebene hinzufügen.
  2. Öffnen Sie die Grafik button.png aus dem Nexus-One-Skin von Android Studio und kopieren Sie sie in die neu erzeugte Ebene.
  3. Ziehen Sie die Grafik auf die gewünschte Größe und verschieben Sie sie an den Zielort auf der Hintergrundgrafik. Nun können Sie wiederum die Zielkoordinaten ablesen (Bild 4).
  4. Da der Farbkontrast in diesem Fall sehr schwach ist, ändern Sie über Korrekturen, Farbton/Sättigung die Werte für Farbton und Helligkeit.
  5. Kopieren Sie die Button-Grafik in die Zwischenablage, wählen Sie Datei, Neu, OK, fügen Sie die Grafik ein, und speichern Sie sie im Ordner galaxy_s6 ab. Die fertigen Grafiken zeigt Tabelle 1.

Bild 4: Ablesen der Koordinaten (2) für die Overlay-Grafik des Menü-Buttons (1)

Ablesen der Koordinaten (2) für die Overlay-Grafik des Menü-Buttons (1)


 

Tabelle 1: Die angefertigten Grafiken

Grafik Hochformat Grafik Querformat Funktion

background.png

background

background_land.png

background_land

 

Hintergrund

button.png

button

(wie Hochformat)

Button „Menü“, Button „Zurück“

home.png

home

home_land.png

home_land

Button „Startseite“

power.png

power

power_land.png

power_land

Button „Ein/Aus“

volumedown.pngvolumedown

volumedown_land.png

volumedown_land

Button „Lautstärke verringern“

volumeup.png

volumeup

volumeup_land.png

volumeup_land

Button „Lautstärke erhöhen“

Konfiguration

Die Konfiguration des Skins erfolgt über die Datei layout (Listing 1). Sie gliedert sich in einen Abschnitt parts, in den Werte über den Bildschirm und die Anordnung der Buttons relativ zum Hintergrund eingetragen werden, und einen Abschnitt layouts mit Angaben zur Gestaltung des Emulatorfensters. Die meisten Werte sind selbsterklärend. Welche Buttons emuliert werden können, ersehen Sie aus Tabelle 2. Sie sind nicht offiziell dokumentiert und müssen bei Bedarf aus dem Android-Quellcode ermittelt werden (suchen Sie in github.com/android/platform_external_qemu/blob/master/android/skin/file.c nach dem Array keyinfo_table).

Beachten Sie, dass der Menü-Button über soft-left emuliert wird. Wenn Grafikelemente rotiert werden, verändern sie ihre x-/y-Koordinaten. Im Beispiel erfolgt eine Rotation des Bildschirmbereichs um 270° im Uhrzeigersinn ins Querformat. Da die Rotation um den linken oberen Punkt erfolgt, muss der Bildschirm anschließend um seine eigene Breite nach unten verschoben werden; addieren Sie also zum y-Wert die Bildschirmbreite in Pixeln.

Listing 1: Die Konfigurationsdatei layout

Tabelle 2: Emulierbare Hardware-Buttons

Name des Buttons Beschreibung
Mobilgeräte
back Zurück
camera Kamera
home Startseite
power Ein / Aus
search Suche
soft-left Von Software belegte Taste links (meist „Menü“)
soft-right Von Software belegte Taste rechts
volume-down Lautstärke verringern
volume-up Lautstärke erhöhen
Standard- und Telefon-Tastatur
(0 – 9, a – z) Ziffern und Buchstaben (ohne Umlaute)
ALT Alt links
ALT2 Alt rechts
AT „@“
CAP Umschalten (Shift) links
CAP2 Umschalten (Shift) rechts
COMMA „,“
DEL, del Rücktaste (Backspace)
ENTER Eingabe (Return)
PERIOD „.“
phone-dial Anrufen
phone-hangup Anruf beenden
pound „#“
SLASH „/“
SPACE Leerzeichen
star „*“
SYM Symbole umschalten
Direktionales Steuer-Pad (D-Pad)
dpad-center Mitte
dpad-down Ab
dpad-left Links
dpad-right Rechts
dpad-up Auf
Audio/Video
bookmarks Lesezeichen / Favoriten
channel-down Vorheriger Kanal
channel-up Nächster Kanal
dvr Digitaler Videorekorder
epg Elektronisches Programmverzeichnis
ffwd Vorspulen
next Nächste Aufnahme
pause Pause
play Abspielen
prev Vorherige Aufnahme
rev Zurückspulen
stop Anhalten
tv Fernseher
window Fensterfunktionen

Hoch- und Querformat

Neben den üblichen Layouts für Hoch- und Querformat können Sie weitere Layouts definieren. Für Geräte mit Hardware-Tastatur wären beispielsweise getrennte Layouts für Hochformat mit geöffneter Hardware-Tastatur und Hochformat mit geschlossener Hardware-Tastatur sinnvoll. Damit der Emulator zwischen diesen beiden Zuständen unterscheiden kann, müssen Sie im Abschnitt layouts das Hardware-Ereignis EV_SW wie folgt definieren:

Das Ereignis wird dann bei Initialisierung des Layouts ausgelöst. EV steht für event, SW bedeutet stateful binary switches. Das Ereignis wird zum Beispiel auch bei Laptop-Computern ausgelöst, wenn das Gerät zugeklappt wird.

Die erste Ziffer bezeichnet die Art des Ereignisses, die zweite den Wert (hier: 1 = wahr, 0 = falsch). Der Emulator kann weitere Hardware-Ereignisse auslösen, von denen aber die wenigsten eine Bedeutung für Hardware-Skins haben. Sie können eine Liste dieser Ereignisse über die Kommandozeile des Emulators abrufen, indem Sie sich per Telnet mit dem emulierten Gerät verbinden (telnet localhost 5554) und anschließend den Befehl event types ausführen. Weitere Details erfahren Sie über das Kommando help event. Die komplette Spezifikation zur layout-Datei können Sie in der Android Emulator Skin File Specification5) einsehen.

Anwenden des Skins

Benutzen können Sie den Skin, indem Sie ihn einem virtuellen Gerät zuweisen. Öffnen Sie dazu im AVD Manager die Eigenschaftsseite des Geräts, klicken Sie auf Show Advanced Settings und wählen Sie den Ordner galaxy_s6 aus (Bild 5). Anschließend erscheint das Gerät im neuen Gewand.

Zuweisen des Skins im AVD-Manager
Bild 5: Zuweisen des Skins im AVD-Manager

Fazit

Ein virtuelles Android-Gerät mit passendem Hardware-Skin sieht schön aus, emuliert alle Hardware-Buttons und vermittelt einen plastischen Eindruck einer laufenden App. Der Aufwand für die Erstellung eines Skins ist besonders bei Geräten mit wenigen Buttons relativ gering. Berücksichtigen Sie aber beim Erstellen von Bildern das Urheberrecht.

Links   [ + ]

1. http://www.getpaint.net
2. http://developer.android.com/tools/help/avd-manager.html
3. http://developer.android.com/sdk/index.html
4. http://www.webundmobile.de/Aktuelles-Heft/Inhalt-web-mobile-developer-8-2015-11460.html
5. https://android.googlesource.com/platform/external/qemu.git/+/master/docs/ANDROID-SKIN-FILES.TXT

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.