03.09.2015

Hardware Skins

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).

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.

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.net erstellen und im AVD Manager, der mit Android Studio ausgeliefert wird, einsetzen. Einen ausführlichen Artikel zum Thema habe ich in der web & mobile developer 8/2015 veröffentlicht.

Erstellen der Hintergrundgrafik

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

Laden Sie ein passendes Produktfoto von der Website des Herstellers herunter.
Ö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:

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.
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.
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.
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).
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.

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:

Öffnen Sie die Hintergrundgrafik (background.png oder background_land.png) und wählen Sie Ebenen, Neue Ebene hinzufügen.
Öffnen Sie die Grafik button.png aus dem Nexus-One-Skin von Android Studio und kopieren Sie sie in die neu erzeugte Ebene.
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).
Da der Farbkontrast in diesem Fall sehr schwach ist, ändern Sie über Korrekturen, Farbton/Sättigung die Werte für Farbton und Helligkeit.
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.

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 - 2c. 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

# Bildschirm und Anordnung der Buttons
parts {
       # Physikalische Eigenschaften des Geräts
       device {
              # Bildschirm
              display {
                      width  1440 # Breite des Bildschirms in Pixeln
                      height 2560 # Höhe des Bildschirms in Pixeln
              }
       }
 
 # Layout im Hochformat
 portrait {
       # Hintergrundgrafik
       background {
               image background.png
       }
 
       # Buttons
       buttons {
 
       # Button "Ein/Aus"
       power {
               image power.png
               x     1738
               y     1226
       }
 
       # Button "Lautstärke erhöhen"
       volume-up {
              image volumeup.png
              x     35
              y     516
       }
 
       # Button "Lautstärke verringern"
       volume-down {
              image volumedown.png
              x     35
              y     903
       }
 
       # Button "Startseite"
       home {
              image home.png
              x     787
              y     3157
       }
 
       # Button "Zurück"
       back {
              image button.png
              x     1349
              y     3147
       }
 
       # Button "Menü"
       soft-left {
              image button.png
              x     437
              y     3147
       }
   }
 }
 # Layout im Querformat
 landscape {
       background {
                   image background_land.png
       }
       buttons {
             power {
                   image power_land.png
                   x     1226
                   y     43
            }
 
            volume-up {
                   image volumeup_land.png
                   x     516
                   y     1746
            }
 
            volume-down {
                   image volumedown_land.png
                   x     903
                   y     1746
            }
 
            home {
                 image home_land.png
                 x     3157
                 y     787
            }
 
            back {
                 image button.png
                 x     3147
                 y     422
            }
 
            soft-left {
                image button.png
                x     3147
                y     1331
            }
        }
    }
 }
 # Layout des Emulatorfensters
 layouts {
        # Hochformat
        portrait {
               width  1946       # Breite der Hintergrundgrafik in Pixeln
               height 3574       # Höhe der Hintergrundgrafik in Pixeln
               color  0x00ffffff # Hintergrundfarbe im hex ARGB-Format
 
               part1 {
                     name portrait
               }
 
               part2 {
                     name device
                     # Verschiebung des Bildschirms innerhalb der Hintergrundgrafik
                     x    252
                     y    512
               }
        }
 }
 # Querformat
 landscape {
        width  3574
        height 1946
        color  0x00ffffff
 
        part1 {
              name landscape
        }
        part2 {
              name device
              x    512
              y    1694  # Ausgemessener Wert (254) + Display-Breite (1440)
              rotation 3 # Rotation um 3 * 90° = 270° im Uhrzeigersinn
        }
    }
 }

Tabelle 2: Emulierbare Hardware-Buttons - Mobilgeräte

Name des Buttons	Beschreibung
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

Tabelle 2a: Emulierbare Hardware-Buttons - Standard- und Telefon-Tastatur

Name des Buttons	Beschreibung
(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

Tabelle 2b: Emulierbare Hardware-Buttons - Direktionales Steuer-Pad (D-Pad)

Name des buttons	Beschreibung
dpad-center	Mitte
dpad-down	Ab
dpad-left	Links
dpad-right	Rechts
dpad-up	Auf

Tabelle 2c: Emulierbare Hardware-Buttons - Audio/Video

Name des Buttons	Beschreibung
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:

layouts {
  portrait_keyboard_closed
  {
    ...
    # Linux Event Code für "Hardware-Tastatur geschlossen"
    event  EV_SW:0:1
    ...
  }
  portrait_keyboard_open
  {
    ...
    # Linux Event Code für "Hardware-Tastatur geöffnet"
    event  EV_SW:0:0
    ...
  }
}

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 Specification 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.

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.

Martin Gossen

Jetzt teilen:

Zurück zur Übersicht