Für ChromeOS optimieren

Android-Apps spielen eine wichtige Rolle bei der Neudefinition des modernen Computings auf großen Bildschirmen. Wenn Sie Ihre mobile App einfach auf einem Chromebook ausführen, ist das jedoch nicht optimal für Ihre Nutzer.

Auf dieser Seite werden einige Möglichkeiten beschrieben, wie Sie die Nutzererfahrung für Laptops und Convertibles optimieren können. In unserer umfassenden Liste mit Tests findest du weitere Informationen zum Testen der Kompatibilität deiner App auf diesen Geräten.

Unterstützung für den Freiform-Mehrfenstermodus nutzen

Die Implementierung von Android-Apps auf ChromeOS umfasst eine grundlegende Unterstützung des Mehrfenstermodus. Android rendert Apps unter ChromeOS in Fenstern mit freiem Format, anstatt immer den ganzen Bildschirm auszufüllen. Das ist für diese Geräte besser geeignet.

Nutzer können die Größe des Fensters mit Ihrer Android-App ändern, wie in Abbildung 1 dargestellt. Damit die Größe Ihrer Fenster im Freiformmodus reibungslos angepasst wird und der Nutzer den gesamten Inhalt sehen kann, sollten Sie die Richtlinien unter Fensterverwaltung lesen.

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

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

  • Behandeln Sie den Aktivitätslebenszyklus im Mehrfenstermodus korrekt und sorgen Sie dafür, dass die Benutzeroberfläche weiterhin aktualisiert wird, auch wenn Ihre App nicht das oberste Fenster ist.
  • Achten Sie darauf, dass das Layout Ihrer App entsprechend angepasst wird, wenn der Nutzer die Fenstergröße ändert.
  • Sie können die anfänglichen Abmessungen des App-Fensters anpassen, indem Sie die Startgröße angeben.
  • Die Ausrichtung der Root-Aktivität der App wirkt sich auf alle Fenster aus.

Farbe der oberen Leiste anpassen

In ChromeOS wird das App-Design verwendet, um die obere Leiste zu gestalten, die über der App angezeigt wird. Sie wird eingeblendet, wenn Nutzer die Fenstersteuerelemente und die Schaltfläche „Zurück“ gedrückt halten. Damit Ihre App auf ChromeOS gut aussieht und angepasst ist, definieren Sie colorPrimary- und, falls möglich, colorPrimaryDark-Werte im Design Ihrer App.

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

Tastatur, Touchpad und Maus unterstützen

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

Unterstützen Sie in Ihren Apps für ChromeOS die Eingabe über Maus, Trackpad und Tastatur, damit die App auch ohne Touchscreen verwendet werden kann. Viele Apps unterstützen die Maus- und Trackpad-Funktionen bereits ohne zusätzlichen Konfigurationsaufwand. Trotzdem solltest du das Verhalten deiner App immer für die Nutzung einer Maus anpassen und zwischen Maus- und Touch-Eingaben unterscheiden.

Stellen Sie Folgendes sicher:

  • Alle Ziele sind mit der Maus anklickbar.
  • Bei Mausradereignissen lassen sich alle scrollbaren Touchoberflächen scrollen, wie in Abbildung 2 dargestellt.
  • Mouseover-Effekte werden mit Bedacht implementiert, um die Erkennung von Elementen auf der Benutzeroberfläche zu optimieren, ohne die Nutzer zu überfordern (siehe Abbildung 3).

Abbildung 2: Scrollen mit dem Mausrad.

Abbildung 3: Mouseover-Zustände von Schaltflächen.

Unterscheiden Sie gegebenenfalls zwischen Maus- und Toucheingaben. Wenn Sie beispielsweise ein Element gedrückt halten, wird möglicherweise eine Benutzeroberfläche für die Mehrfachauswahl aufgerufen, während durch Klicken mit der rechten Maustaste auf dasselbe Element stattdessen ein Optionsmenü aufgerufen wird.

Benutzerdefinierte Cursors

Sie können die Mauszeiger Ihrer App anpassen, um anzugeben, wie Nutzer mit den UI-Elementen Ihrer App interagieren können. Sie können den entsprechenden PointerIcon festlegen, der verwendet werden soll, wenn Nutzer mit einem Element interagieren, indem Sie den Modifikator pointerHoverIcon anwenden.

In Ihren Apps muss Folgendes angezeigt werden:

  • I-Beam-Cursor für Text
  • Ziehpunkt zur Größenanpassung an den Rändern von Ebenen, deren Größe angepasst werden kann
  • Offene und geschlossene Hand als Zeiger für Inhalte, die mit einer Klick-und-Zieh-Geste geschwenkt oder gezogen werden können
  • Rotierende Verarbeitungssymbole

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

Tastenkombinationen und Navigation

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

Alle wichtigen UI-Elemente sollten ebenfalls über die Tab-Navigation zugänglich sein. Das ist besonders wichtig für die Barrierefreiheit. Um die Bedienungshilfen-Standards zu erfüllen, müssen alle UI-Oberflächen offensichtliche und bedienungshilfenkonforme Fokusstatus haben, wie in den folgenden Abbildungen dargestellt:

Abbildung 4: Transversale Tabulierung.

Abbildung 5: Ersetzen einer Wischgeste durch ein Steuerelement, das beim Hovern angezeigt wird.

Implementieren Sie Tastatur- oder Mausalternativen für Kernfunktionen, die unter berührungsspezifischen Interaktionen wie Berühren und Halten, Wischen oder anderen Multitouch-Gesten verborgen sind. Eine mögliche Lösung besteht darin, Schaltflächen bereitzustellen, die beim Hovern auf einer Oberfläche angezeigt werden.

Weitere Informationen zur Unterstützung von Tastatur, Trackpad und Maus finden Sie unter Eingabekompatibilität auf großen Bildschirmen.

Benutzereingaben weiter optimieren

Wenn Sie für Ihre App Funktionen auf Desktopniveau erreichen möchten, sollten Sie die folgenden produktivitätsorientierten Eingaben berücksichtigen.

Kontextmenüs

Android- Kontextmenüs sind eine weitere Möglichkeit, Nutzer schnell zu Funktionen Ihrer App zu leiten. Sie können durch Klicken mit der Maus oder der sekundären Taste des Trackpads oder durch langes Berühren eines Touchscreens aufgerufen werden:

Abbildung 6 Ein Kontextmenü, das bei einem Rechtsklick angezeigt wird.

Ziehen

Wenn Sie Drag-Interaktionen wie im folgenden Bild erstellen, können Sie Ihrer App effiziente, intuitive Produktivitätsfunktionen hinzufügen. Weitere Informationen finden Sie unter Drag.

Abbildung 7. Drag-and-drop in einer Dateibaumstruktur

Eingabestift-Unterstützung

Die Unterstützung von Eingabestiften ist für Zeichen- und Notizen-Apps unerlässlich. Bieten Sie eine verbesserte Unterstützung für Chromebooks und Tablets mit Eingabestift, indem Sie Interaktionen implementieren, die auf die Verwendung von Eingabestiften zugeschnitten sind.

Berücksichtigen Sie beim Entwerfen von Stylus-Interaktionen die potenziellen Unterschiede in der Stylus-Hardware. Eine Übersicht über die Stylus-APIs finden Sie unter Eingabekompatibilität auf großen Bildschirmen.

Layouts responsiv gestalten

Nutzen Sie den für Ihre App verfügbaren Bildschirmplatz unabhängig vom visuellen Status (Vollbild, Hochformat, Querformat oder Fenster). Hier einige Beispiele für eine gute Nutzung des Platzes:

  • App-Architektur anzeigen
  • Textlänge und Bildgröße auf eine maximale Breite beschränken.
  • Bessere Nutzung des Bildschirmplatzes in der Symbolleiste der App
  • Verbessern Sie die Platzierung von UI-Elementen, indem Sie die App an die Verwendung mit der Maus anpassen, anstatt an die Verwendung mit dem Daumen.
  • 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.
  • Verwenden Sie Fenstergrößenklassen und Bereichslayouts, um adaptives Design zu implementieren.

Beachten Sie außerdem Folgendes:

  • Entfernen oder reduzieren Sie die Bedeutung von horizontalen Scrollkomponenten.
  • Vermeiden Sie modale Benutzeroberflächen im Vollbildmodus. Verwenden Sie Inline-UI-Elemente wie Fortschrittsanzeigen und Benachrichtigungen für alle nicht kritischen Aktionen.
  • Verwenden Sie verbesserte UI-Komponenten wie Zeit- und Datumsauswahlen, Textfelder und Menüs, die für Maus, Tastatur und größere Bildschirme entwickelt wurden.
  • Verwenden Sie Inline-Bearbeitungen, zusätzliche Spalten oder die Modalfenster-UI anstelle einer neuen Aktivität für eine kleine bis mittlere Bearbeitungsfunktion.
  • Entfernen oder ändern Sie Floating Action Buttons (FABs), um die Tastaturnavigation zu verbessern. Standardmäßig wird ein FAB zuletzt in der transversalen Tabulatorreihenfolge positioniert. Machen Sie sie stattdessen zum primären Vorgang oder ersetzen Sie sie durch eine andere, übergeordnete Aufforderung.

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

Die System-Schaltfläche „Zurück“ ist ein Muster, das von Android-Handhelds übernommen wurde und nicht so gut in den Desktop-Kontext passt.

Wenn Ihre App zunehmend für Laptops optimiert wird, sollten Sie ein Navigationsmuster in Betracht ziehen, bei dem die Zurück-Schaltfläche weniger wichtig ist. Lassen Sie die App ihren eigenen Verlaufsstapel verwalten, indem Sie in der App Zurück-Schaltflächen, Breadcrumbs oder andere Möglichkeiten zum Beenden von Vorgängen wie Schließen- oder Abbrechen-Schaltflächen als Teil der Benutzeroberfläche für große Bildschirme bereitstellen.

Sie können festlegen, ob in Ihrer App im Fenster eine Schaltfläche „Zurück“ angezeigt wird, indem Sie eine Einstellung im Tag <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 aber auf einem Bildschirm im Querformat ausführt. In diesem Fall ist die Vorschau oder das aufgenommene Ergebnis möglicherweise falsch gedreht.

Um die Entwicklung von Kamera-Apps zu vereinfachen, sollten Sie die CameraX-Bibliothek verwenden.

Weitere Informationen finden Sie unter Probleme mit der Kameravorschau.

Geräteeinstellungen verarbeiten

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

Lautstärke ändern

ChromeOS-Geräte haben ein festes Lautstärkeniveau: Apps, die Audio wiedergeben, haben eigene Lautstärkeregler. Beachte die Richtlinien für Geräte mit festem Volumen.

Bildschirmhelligkeit ändern

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