[ Impressum ]

Zebra auf Geräten mit Android

www.Rozek.de > Zebra > Android
Zebra [1] läuft ohne Probleme auch auf (mobilen) Geräten mit dem Android-Betriebssystem (persönlich getestet auf einem Google Nexus 7 und einem Amazon Kindle Fire HD).

Wer das "Look-and-Feel" von Android nachbilden möchte, sollte sich unbedingt das (unter der "Creative Commons Attributions 2.5" stehende) "Android Design Stencil" [2] ansehen.

Schriften

Für Beschriftungen innerhalb der Benutzeroberfläche werden gerne die Schriften "Roboto" [3] und "Roboto Condensed" [4] verwendet. Das "Android Design Stencil" enthält die Schriften

Roboto-Black <link href='http://fonts.googleapis.com/css?family=Roboto:900' rel='stylesheet' type='text/css'>
Roboto-BlackItalic <link href='http://fonts.googleapis.com/css?family=Roboto:900italic' rel='stylesheet' type='text/css'>
Roboto-Bold <link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
Roboto-BoldItalic <link href='http://fonts.googleapis.com/css?family=Roboto:700italic' rel='stylesheet' type='text/css'>
Roboto-Italic <link href='http://fonts.googleapis.com/css?family=Roboto:400italic' rel='stylesheet' type='text/css'>
Roboto-Light <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
Roboto-LightItalic <link href='http://fonts.googleapis.com/css?family=Roboto:300italic' rel='stylesheet' type='text/css'>
Roboto-Medium <link href='http://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
Roboto-MediumItalic <link href='http://fonts.googleapis.com/css?family=Roboto:500italic' rel='stylesheet' type='text/css'>
Roboto-Regular <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
Roboto-Thin <link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
Roboto-ThinItalic <link href='http://fonts.googleapis.com/css?family=Roboto:100italic' rel='stylesheet' type='text/css'>

sowie

RobotoCondensed-Bold <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>
RobotoCondensed-BoldItalic <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic' rel='stylesheet' type='text/css'>
RobotoCondensed-Italic <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic' rel='stylesheet'type='text/css'>
RobotoCondensed-Light <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'>
RobotoCondensed-LightItalic <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
RobotoCondensed-Regular <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400' rel='stylesheet' type='text/css'>

Rechts neben dem Schrift-Namen finden Sie das <link>-Element, mit dessen Hilfe Sie die jeweilige Schrift im Kopfbereich einer Web-Seite (oder -Anwendung) anfordern können.

Nota bene: diese Anforderung sollte aber nur erforderlich sein, wenn Sie davon ausgehen müssen, dass Ihre Web-Seite/-Anwendung - obwohl für Android konzipiert - auf einer anderen Plattform als Android geladen wird.

Icons

Das "Android Design Stencil" enthält auch eine Reihe von Icons, sortiert nach den Bedienelementen, in denen sie zum Einsatz kommen sollten:

Core Icons

Action Bar Icons (Holo Dark)


(Die beiden nicht-weißen Icons ic_action_mic.png und ic_action_settings.png scheinen übrigens in der Tat fehlerhaft zu sein)

Action Bar Icons (Holo Light)

Navigation Drawer Indicator (Holo Dark)

Navigation Drawer Indicator (Holo Light)


Viel Spaß damit!

Literaturhinweise

[1]
Andrei Vishneuski
HTML5 Rich UI JavaScript Library
Zebra ist eine noch relativ neue JavaScript-Bibliothek für grafische Benutzeroberflächen in Web-Anwendungen. Diese Seite ist der primäre Anlaufpunkt, wenn Sie sich für Zebra interessieren.
[2]
(Google Inc.)
Android Design Stencil
Die "Android Design Stencils" enthalten eine Fülle von (unter der Creative Commons Attribution 2.5 stehenden) Materialien, die für die Entwicklung von Web-Anwendungen nützlich sein können.
[3]
Christian Robertson
Google Fonts Roboto
Android verwendet häufig die Schriften "Roboto" und "Roboto Condensed" - hier können Sie die Schrift "Roboto" betrachten und auf Ihren Rechner herunterladen.
[4]
Christian Robertson
Google Fonts Roboto Condensed
Android verwendet häufig die Schriften "Roboto" und "Roboto Condensed" - hier können Sie die Schrift "Roboto Condensed" betrachten und auf Ihren Rechner herunterladen.