Apps für ChromeOS optimieren

Android-Apps spielen eine wichtige Rolle bei der Neudefinition moderner Computer auf großen Bildschirmen. Wenn Sie Ihre mobile App nur auf einem Chromebook ausführen, profitieren Sie aber noch nicht von allen Vorteilen.

Auf dieser Seite wird beschrieben, wie du die Nutzung für Laptop- und Convertible-Formfaktoren anpassen kannst. Weitere Informationen zum Testen der App auf die Kompatibilität mit diesen Geräten findest du in unserer umfassenden Liste von Tests.

Unterstützung für das Mehrfenstermodus im freien Format nutzen

Die Implementierung von Android-Apps unter ChromeOS umfasst eine grundlegende Unterstützung des Mehrfenstermodus. Anstatt immer den gesamten Bildschirm einzunehmen, rendert Android Apps auf ChromeOS in Freiform-Containern, was für diese Geräte besser geeignet ist.

Die Nutzer können die Größe des Fensters ändern, das Ihre Android-App enthält (siehe Abbildung 1). Um sicherzustellen, dass die Größe der Freiformfenster reibungslos angepasst wird und dem Nutzer der gesamte Inhalt angezeigt wird, lesen Sie die Richtlinien unter Fensterverwaltung.

Abbildung 1: Ein App-Fenster mit anpassbarer Größe.

Mit den folgenden Best Practices können Sie die Nutzererfahrung verbessern, wenn Ihre App unter ChromeOS ausgeführt wird:

  • Behandeln Sie den Aktivitätslebenszyklus im Mehrfenstermodus korrekt und aktualisieren Sie die UI auch dann weiterhin, wenn sich Ihre App nicht im obersten fokussierten Fenster befindet.
  • Achten Sie darauf, dass das Layout Ihrer App jedes Mal korrekt angepasst wird, wenn der Nutzer die Größe des Fensters ändert.
  • Sie können die Anfangsabmessungen des App-Fensters anpassen, indem Sie die Startgröße angeben.
  • Die Ausrichtung der Stammaktivität der Anwendung wirkt sich auf alle Fenster aus.

Farbe der oberen Leiste anpassen

ChromeOS verwendet das App-Design, um die obere Leiste über der App farbig zu gestalten. Dies wird angezeigt, wenn Nutzer die Fenstersteuerelemente und die Schaltfläche „Zurück“ gedrückt halten. Definieren Sie im Design Ihrer App colorPrimary und, wenn möglich, colorPrimaryDark-Werte, damit Ihre App ausgefeilt und an ChromeOS angepasst wird.

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

Unterstützung für Tastatur, Touchpad und Maus

Alle Chromebooks haben eine physische Tastatur und ein Touchpad, einige 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 die Maus, das Touchpad und die Tastatur, damit die App auch ohne Touchscreen genutzt werden kann. Viele Apps unterstützen die Maus und das Touchpad ohne zusätzlichen Aufwand. Es empfiehlt sich jedoch, das Verhalten Ihrer Anwendung entsprechend für die Maus anzupassen und Maus- und Toucheingaben zu unterstützen und zwischen diesen zu unterscheiden.

Achten Sie auf Folgendes:

  • Alle Ziele sind mit der Maus anklickbar.
  • Alle scrollbaren Touch-Flächen werden bei Mausradereignissen gescrollt (siehe Abbildung 2).
  • Hover-Zustände werden mit Bedacht implementiert, um die Erkennung der Benutzeroberfläche zu verbessern, ohne den Nutzer zu überfordern (siehe Abbildung 3).

Abbildung 2: Scrollen mit dem Mausrad

Abbildung 3: Status der Schaltfläche, wenn der Mauszeiger darauf bewegt wird.

Unterscheiden Sie gegebenenfalls zwischen der Eingabe per Maus und per Berührung. Wenn Sie beispielsweise ein Element berühren und halten, wird möglicherweise eine Benutzeroberfläche mit Mehrfachauswahl aufgerufen, während ein Rechtsklick auf dasselbe Element stattdessen ein Optionsmenü auslösen kann.

Benutzerdefinierte Cursor

Sie können die Mauscursor in Ihrer App anpassen, 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 den anpassbaren Ebenenrändern anpassen
  • Zeiger mit geöffneter und geschlossener Hand für Inhalte, die mit einer Click-and-Drag-Geste geschwenkt oder gezogen werden können
  • Rotierendes Ladesymbol

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

Tastenkombinationen und Navigation

Da jedes Chromebook eine physische Tastatur hat, können Sie Hotkeys verwenden, damit Ihre Nutzer produktiver arbeiten können. Wenn Ihre Anwendung beispielsweise das Drucken unterstützt, können Sie mit Strg + P ein Druckdialogfeld öffnen.

Alle wichtigen UI-Elemente lassen sich auf ähnliche Weise über die Tabnavigation verwalten. Das ist besonders wichtig für die Barrierefreiheit. Um die Standards für Barrierefreiheit zu erfüllen, müssen alle UI-Oberflächen einen offensichtlichen und barrierefreien Zustand haben, der die Barrierefreiheit erfüllt, wie in den folgenden Abbildungen dargestellt:

Abbildung 4: Transversale Tabbing

Abbildung 5: Eine Wischgeste wird durch ein Steuerelement ersetzt, das beim Bewegen des Mauszeigers angezeigt wird.

Implementieren Sie Tastatur- oder Mausalternativen für Hauptfunktionen, die unter Touch-spezifischen Interaktionen verborgen sind, wie z. B. Touch- und Halte-Aktionen, Wischen oder andere Multi-Touch-Gesten. Eine Beispiellösung ist die Bereitstellung von Schaltflächen, 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.

Die Nutzereingabe weiter verbessern

Damit Sie für Ihre App Funktionen wie Desktop-Computer erhalten, sollten Sie die folgenden produktivitätsorientierten Eingaben in Betracht ziehen.

Kontextmenüs

Android-Kontextmenüs sind ein weiterer Beschleuniger, mit dem Nutzer zu Funktionen deiner App gelangen. Sie können durch Klicken mit der Maus, über die sekundäre Taste des Touchpads oder durch Berühren und Halten auf einem Touchscreen ausgelöst werden:

Abbildung 6: Ein Kontextmenü, das beim Rechtsklick angezeigt wird.

Drag-and-Drop

Durch das Erstellen von Drag-and-drop-Interaktionen, wie in der folgenden Abbildung gezeigt, können Sie Ihrer App effiziente, intuitive Produktivitätsfunktionen bieten. Weitere Informationen finden Sie unter Drag-and-drop.

Abbildung 7: Drag-and-drop in die Oberfläche eines Dateibaums.

Eingabestift-Unterstützung

Die Eingabestift-Unterstützung ist für Apps zum Zeichnen und für Notizen unerlässlich. Verbesserte Unterstützung für Chromebooks und Tablets mit Eingabestift, indem Interaktionen implementiert werden, die auf die Verwendung des Eingabestifts zugeschnitten sind

Berücksichtige die möglichen Variationen der verschiedenen Hardwareoptionen für Eingabestifte, wenn du die Interaktion mit dem Eingabestift gestaltest. Eine Übersicht über die Eingabestift-APIs finden Sie unter Eingabekompatibilität auf großen Bildschirmen.

Layouts responsiv gestalten

Nutzen Sie die für Ihre App verfügbare Fläche auf dem Bildschirm gut aus, unabhängig von ihrem visuellen Zustand (Vollbild, Hochformat, Querformat oder Fenster). Hier einige Beispiele für eine gute Speicherplatznutzung:

  • Architektur der Display-App
  • Begrenzen Sie Textlänge und Bildgröße auf eine maximale Breite.
  • Nutzen Sie den verfügbaren Platz in der Symbolleiste der App besser.
  • Verbessern Sie die Platzierung von UI-Angeboten, indem Sie die App an die Mausnutzung statt an die Nutzung des Daumens anpassen.
  • 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 Scanbarkeit.
  • Implementieren Sie ein responsives Spaltensystem. Weitere Informationen finden Sie unter Raster für responsives Layout.
  • Passen Sie mithilfe des Spaltensystems bei Bedarf die Größe und die Größe der Benutzeroberfläche an. Öffnen Sie nach Möglichkeit keine neuen Fenster.
  • Entfernen oder reduzieren Sie die Wichtigkeit horizontaler Scroll-Komponenten.
  • Verwenden Sie keine modale Vollbild-UI. Verwenden Sie für alle nicht kritischen Aktionen eine Inline-UI wie Fortschrittsanzeigen und Benachrichtigungen.
  • Verwenden Sie verbesserte UI-Komponenten wie Uhrzeit- und Datumsauswahl, Textfelder und Menüs, die für Maus, Tastatur und größere Bildschirme entwickelt wurden.
  • Verwenden Sie Inline-Bearbeitungen, zusätzliche Spalten oder eine modale Benutzeroberfläche anstelle einer neuen Aktivität für eine kleine bis mittlere Bearbeitungsfunktion.
  • Unverankerte Aktionsschaltflächen (FABs) für eine bessere Tastaturnavigation entfernen oder ändern Standardmäßig werden FAB-Positionen in der transveralen TAB-Reihenfolge zuletzt angezeigt. Platziere sie stattdessen an erster Stelle, da sie die primäre Aktion ist, oder ersetze sie durch eine andere, übergeordnete Aktion.

Abbildung 8: Beispiele eines responsiven Layouts auf einem Smartphone- und Desktop-Bildschirm.

Eine Zurück-Schaltfläche auf Systemebene ist ein Muster, das von den Handheld-Root-Geräten von Android übernommen wird und in einen Desktop-Kontext weniger gut passt.

Wenn Ihre App zunehmend an eine Laptop-Umgebung angepasst wird, sollten Sie erwägen, zu einem Navigationsmuster zu übergehen, bei dem die Schaltfläche „Zurück“ weniger betont wird. Die App kann ihren eigenen Verlaufsstack verwalten, indem Sie in der App Schaltflächen zum Zurückgehen, Navigationspfade oder andere Escape-Routen wie Schließen- oder Abbrechen-Schaltflächen als Teil der Benutzeroberfläche des großen Bildschirms bereitstellen.

Sie können festlegen, ob in Ihrer App eine Schaltfläche „Zurück“ in ihrem Fenster angezeigt werden soll, indem Sie eine Einstellung innerhalb des Tags <activity> festlegen. Bei der Einstellung true wird die Schaltfläche „Zurück“ ausgeblendet:

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

Probleme mit Kameravorschaubildern beheben

Kameraprobleme können auftreten, wenn die App nur im Hochformat ausgeführt werden kann, der Nutzer sie jedoch auf einem Bildschirm im Querformat ausführt. In diesem Fall wird die Vorschau oder das erfasste Ergebnis möglicherweise falsch gedreht.

Mit dem Kompatibilitätsmodus wird festgelegt, wie das System Ereignisse wie etwa Ausrichtungsänderungen unter ChromeOS verarbeitet. So lassen sich Probleme vermeiden, wenn die Kamera mit der falschen Ausrichtung verwendet wird. Wenn Sie den Kompatibilitätsmodus aktivieren möchten, müssen folgende Kriterien erfüllt sein:

  • Verwenden Sie mindestens Android 7.0 (API-Level 24). Das minimale SDK-Level kann niedriger sein.
  • Passen Sie die Größe Ihrer App an.

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 abspielen, haben eine eigene Lautstärkeregelung. Beachten Sie die Richtlinien unter Mit Geräten mit festem Volume arbeiten.

Bildschirmhelligkeit ändern

Die Gerätehelligkeit kann unter ChromeOS nicht angepasst werden. Aufrufe von 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:

Zurück
Building apps for ChromeOS
Weiter
Preparing your development environment