Apps für ChromeOS optimieren

Android-Apps spielen eine wichtige Rolle bei der Neugestaltung des modernen Computings auf großen Bildschirmen. Aber das Ausführen einer mobilen App auf einem Chromebook ermöglicht nicht die optimale Nutzererfahrung.

Auf dieser Seite werden einige Möglichkeiten beschrieben, wie Sie die Nutzererfahrung auf Laptop- und Convertible-Formfaktoren zuschneiden können. Weitere Informationen dazu, wie du deine App auf Kompatibilität mit diesen Geräten testen kannst, findest du in unserer umfassenden Testliste.

Unterstützung für Mehrfenstermodus im freien Format nutzen

Die Implementierung von Android-Apps unter ChromeOS umfasst eine grundlegende Unterstützung für den Mehrfenstermodus. Anstatt immer den gesamten Bildschirm einzunehmen, rendert Android Apps unter ChromeOS in Containern im freien Format, die für diese Geräte besser geeignet sind.

Nutzer können die Größe des Fensters, das Ihre Android-App enthält, ändern, wie in Abbildung 1 gezeigt. Damit Ihre Freiform-Fenster reibungslos angepasst werden und der gesamte Inhalt für den Nutzer angezeigt wird, lesen Sie die Richtlinien unter Fensterverwaltung.

Mit den folgenden Best Practices können Sie die Nutzerfreundlichkeit Ihrer App unter ChromeOS verbessern:

• Behandeln Sie den Aktivitätslebenszyklus im Mehrfenstermodus korrekt und aktualisieren Sie die UI auch dann, wenn sich Ihre App nicht im obersten fokussierten Fenster befindet.
• Achten Sie darauf, dass das Layout Ihrer App immer dann angepasst wird, wenn der Nutzer die Größe des Fensters ändert.
• Passen Sie die anfänglichen Abmessungen des App-Fensters an, indem Sie die Startgröße angeben.
• Beachten Sie, dass sich die Ausrichtung der Root-Aktivität der Anwendung auf alle Fenster auswirkt.

Farbe der oberen Leiste anpassen

ChromeOS verwendet das App-Design, um die obere Leiste der App farbig zu gestalten. Sie zeigt an, wenn Nutzer die Fenstersteuerelemente und die Schaltfläche „Zurück“ gedrückt halten. Damit deine App für ChromeOS optimiert und angepasst ist, musst du im Design deiner App Werte für colorPrimary und nach Möglichkeit colorPrimaryDark definieren.

Mit colorPrimaryDark wird die obere Leiste eingefärbt. Wenn nur colorPrimary definiert ist, verwendet ChromeOS in der oberen Leiste eine dunklere Version davon. Weitere Informationen finden Sie unter Stile und Designs.

Unterstützung von Tastatur, Touchpad und Maus

Alle Chromebooks haben eine physische Tastatur und ein Touchpad, manche auch einen Touchscreen. Einige Geräte lassen sich von einem Laptop in ein Tablet umwandeln.

Unterstützen Sie in Ihren Apps für ChromeOS die Eingabe über Maus, Touchpad und Tastatur, sodass die App ohne Touchscreen verwendet werden kann. Viele Apps unterstützen bereits Maus und Touchpad, ohne dass zusätzliche Arbeit erforderlich ist. Du solltest jedoch das Verhalten deiner App entsprechend für die Maus anpassen und zwischen Maus- und Touch-Eingaben unterscheiden und diese unterstützen.

Achten Sie auf Folgendes:

• Alle Ziele sind mit der Maus anklickbar.
• Alle scrollbaren Touchoberflächen, die bei Mausradereignissen sichtbar sind, scrollen wie in Abbildung 2 dargestellt.
• Hover-Zustände werden mit Bedacht implementiert, um die Erkennung über die Benutzeroberfläche zu verbessern, ohne den Nutzer zu überfordern, wie in Abbildung 3 gezeigt.

Gegebenenfalls musst du zwischen Maus und Touchscreen unterscheiden. Wenn Sie beispielsweise ein Element berühren und halten, wird möglicherweise eine Benutzeroberfläche mit Mehrfachauswahl ausgelöst. Wenn Sie mit der rechten Maustaste auf dasselbe Element klicken, wird möglicherweise ein Optionsmenü ausgelöst.

Benutzerdefinierte Cursor

Passen Sie die Mauscursor Ihrer Apps an, um anzugeben, mit welchem Element der Benutzeroberfläche der Nutzer wie interagieren kann. Sie können die PointerIcon festlegen, die verwendet werden soll, wenn Nutzer mit einer Ansicht interagieren, indem Sie die Methode setPointerIcon() aufrufen.

Zeigen Sie in Ihren Apps Folgendes an:

• I-Balken-Zeiger für Text
• Ziehpunkte an anpassbaren Ebenenkanten
• Zeiger mit offener und geschlossener Hand für Inhalte, die durch Klicken und Ziehen geschwenkt oder gezogen werden können
• Rotierende Ladesymbole

Die Klasse PointerIcon stellt Konstanten bereit, mit denen Sie benutzerdefinierte Cursor implementieren können.

Tastenkombinationen und Navigation

Da jedes Chromebook über eine physische Tastatur verfügt, sollten Sie Hotkeys bereitstellen, damit Ihre Nutzer produktiver arbeiten können. Wenn Ihre App beispielsweise das Drucken unterstützt, können Sie mit Strg + P ein Druckdialogfeld öffnen.

Auf ähnliche Weise lassen sich alle wichtigen UI-Elemente mithilfe der Tab-Navigation verarbeiten. Dies ist besonders wichtig für die Barrierefreiheit. Um die Standards für Barrierefreiheit zu erfüllen, müssen alle UI-Oberflächen offensichtliche und barrierefreie fokussierte Status haben, wie in den folgenden Abbildungen gezeigt:

Achte darauf, Tastatur- oder Mausalternativen für Hauptfunktionen zu implementieren, die bei Touch-Aktionen wie „Berühren und halten“, Wischen oder anderen Multi-Touch-Gesten verborgen sind. Eine Beispiellösung besteht darin, Schaltflächen bereitzustellen, die auf einer Oberfläche angezeigt werden, wenn der Mauszeiger darauf bewegt wird.

Weitere Informationen zur Unterstützung von Tastatur, Touchpad und Maus findest du unter Eingabekompatibilität auf großen Bildschirmen.

Nutzereingabe weiter verbessern

Berücksichtigen Sie die folgenden produktivitätsorientierten Eingaben, um eine Desktop-Funktionalität für Ihre Anwendung zu erreichen.

Kontextmenüs

Android-Kontextmenüs sind ein weiterer Beschleuniger für die Weiterleitung von Nutzern zu Funktionen deiner App. Sie können durch einen Mausklick, die sekundäre Taste des Touchpads oder durch Berühren und Halten auf einem Touchscreen aufgerufen werden:

Drag-and-Drop

Wenn Sie Drag-and-drop-Interaktionen wie in der folgenden Abbildung erstellen, können Sie Ihre App effizient und intuitiv nutzen. Weitere Informationen finden Sie unter Drag-and-drop.

Eingabestift-Unterstützung

Für Apps zum Zeichnen und zum Erstellen von Notizen ist die Unterstützung des Eingabestifts sehr wichtig. Bessere Unterstützung für Chromebooks und Tablets mit Eingabestift, indem Interaktionen implementiert werden, die auf die Nutzung der Eingabestifte zugeschnitten sind

Berücksichtigen Sie beim Entwerfen Ihrer Interaktionen mit Eingabestiften mögliche Variationen der verschiedenen Hardware für den Eingabestift. Eine Übersicht über die Eingabestift-APIs finden Sie unter Eingabekompatibilität auf großen Bildschirmen.

Layouts responsiv machen

Nutzen Sie den verfügbaren Platz auf dem Bildschirm Ihrer App unabhängig vom visuellen Zustand (Vollbild, Hochformat, Querformat oder Fenster). Hier einige Beispiele für eine gute Speicherplatznutzung:

• Architektur der Display-App
• Beschränken Sie Textlänge und Bildgröße auf eine maximale Breite.
• Nutzen Sie den Platz in der Symbolleiste der App besser.
• Du kannst die Platzierung von UI-Angeboten verbessern, indem du die App an die Mausnutzung anpasst.
• Optimieren Sie die Größe von Videos und Bildern, legen Sie eine maximale Breite und Höhe für alle Medien fest und maximieren Sie die Lesbarkeit und Lesbarkeit.
• Implementieren Sie ein responsives Spaltensystem. Weitere Informationen findest du unter Responsives Layoutraster.
• Passen Sie bei Bedarf mithilfe des Spaltensystems die Größe der Benutzeroberfläche an und ändern Sie sie. Öffnen Sie nach Möglichkeit keine neuen Fenster.
• Entfernen oder reduzieren Sie die Bedeutung von Komponenten mit horizontalem Scrollen.
• Vermeiden Sie eine modale Vollbild-Benutzeroberfläche. Verwenden Sie für alle nicht kritischen Aktionen eine Inline-UI wie Fortschrittsanzeigen und Benachrichtigungen.
• Verbesserte UI-Komponenten wie Uhrzeit- und Datumsauswahl, Textfelder und Menüs, die für Maus, Tastatur und größere Bildschirme entwickelt wurden
• Verwenden Sie für ein kleines bis mittelgroßes Bearbeitungselement Inline-Bearbeitungen, zusätzliche Spalten oder eine modale Benutzeroberfläche anstelle einer neuen Aktivität.
• Entfernen oder ändern Sie unverankerte Aktionsschaltflächen (UAS) für eine bessere Tastaturnavigation. Standardmäßig befindet sich eine UAS an letzter Stelle in der Reihenfolge der Tabulatortaste. Er sollte stattdessen an erster Stelle stehen, da es sich dabei um die primäre Aktion handelt, oder ersetzen Sie ihn durch ein anderes, übergeordnetes Angebot.

Navigationsmuster ändern

Eine Schaltfläche „Zurück“ auf Systemebene ist ein Muster, das von den Handheld-Root-Geräten von Android übernommen wurde – eines, das in einem Desktop-Kontext nicht so gut passt.

Da Ihre App zunehmend an eine Laptop-Umgebung angepasst wird, sollten Sie zu einem Navigationsmuster wechseln, das die Schaltfläche „Zurück“ weniger betont. Überlassen Sie der App die Verwaltung ihres eigenen Verlaufs-Stacks, indem Sie in der App auf der Benutzeroberfläche des großen Bildschirms Schaltflächen wie „Zurück“, Navigationspfade oder andere Escape-Routen wie Schaltflächen zum Schließen oder Abbrechen bereitstellen.

Sie können festlegen, ob im Fenster Ihrer Anwendung die Schaltfläche „Zurück“ angezeigt wird. Dazu legen Sie im Tag <activity> eine Einstellung fest. Bei der Einstellung true wird die Schaltfläche „Zurück“ ausgeblendet:

<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />

Probleme mit Vorschaubildern der Kamera beheben

Kameraprobleme können auftreten, wenn die App nur im Hochformat ausgeführt werden kann, der Nutzer aber ein Querformat hat. In diesem Fall wird die Vorschau oder das erfasste Ergebnis möglicherweise falsch gedreht.

Der Kompatibilitätsmodus bestimmt, wie das System Ereignisse in ChromeOS verarbeitet, z. B. Änderungen der Ausrichtung. Dadurch werden Probleme vermieden, wenn die Kamera im falschen Ausrichtungsmodus verwendet wird. Wenn Sie den Kompatibilitätsmodus aktivieren möchten, müssen Sie die folgenden Kriterien erfüllen:

• Nehmen Sie mindestens Android 7.0 (API-Level 24) vor. Das minimale SDK-Level kann niedriger sein.
• Die Größe der App anpassen.

Geräteeinstellungen verwalten

Beachten Sie die folgenden Geräteeinstellungen für Apps, die unter ChromeOS ausgeführt werden.

Lautstärke ändern

ChromeOS-Geräte sind Geräte mit fester Lautstärke: Apps, die Ton wiedergeben, haben eine eigene Lautstärkeregelung. Beachte die Richtlinien unter Mit Geräten mit festem Volumen arbeiten.

Bildschirmhelligkeit ändern

Sie können die Gerätehelligkeit unter ChromeOS nicht anpassen. Aufrufe der system settings und WindowManager.LayoutParams werden ignoriert.

Zusätzliche Lernmaterialien

Weitere Informationen zur Optimierung deiner Android-Apps für Chromebooks findest du in den folgenden Ressourcen:

• Lesen Sie den Beitrag Bring your Android App to Chromebooks im Blog für Android-Entwickler.
• Sehen Sie sich die Session Android-Apps für Chromebooks und Geräte mit großem Bildschirm von der Google I/O 2017 an.