Adaptive Apps entwickeln

Derzeit sind mehr als 300 Millionen Android-Geräte mit großem Bildschirm im Einsatz, darunter Tablets, faltbare Geräte, ChromeOS-Geräte, Autodisplays und Fernseher. Die Zahl dieser Geräte steigt kontinuierlich. Entwickeln Sie adaptive Apps, um eine optimale Nutzererfahrung auf der wachsenden Anzahl und Vielfalt von Geräten mit großen Bildschirmen sowie auf Standard-Smartphones zu ermöglichen.

Was sind adaptive Apps?

Bei adaptiven Apps ändern sich die Layouts je nach Änderungen im App-Display, vor allem in Bezug auf die Größe des App-Fensters. Adaptive Apps berücksichtigen aber auch Änderungen der Position von faltbaren Geräten, z. B. im Tisch- oder Buchmodus, sowie Änderungen der Bildschirmdichte und Schriftgröße.

Anstatt UI-Elemente nur aufgrund unterschiedlicher Fenstergrößen zu vergrößern oder zu verkleinern, ersetzen adaptive Apps Layoutkomponenten und blenden Inhalte ein oder aus. Auf einem Standard-Smartphone zeigt eine adaptive App beispielsweise eine untere Navigationsleiste an, auf einem großen Display jedoch eine Navigationsleiste. Auf großen Bildschirmen zeigen adaptive Apps mehr Inhalte an, z. B. ein Layout mit zwei Ansichten (Liste und Details). Auf kleinen Bildschirmen werden weniger Inhalte angezeigt, entweder die Liste oder die Details.

Abbildung 1 Bei einer responsiven App wird das Layout für verschiedene Fenstergrößen optimiert.

In der schnell verblassenden, smartphone-zentrierten Vergangenheit wurden Apps im Vollbildmodus ausgeführt. Derzeit werden Apps im Multifenstermodus in Fenstern beliebiger Größe ausgeführt, unabhängig von der Bildschirmgröße des Geräts. Nutzer können die Fenstergröße jederzeit ändern. Daher müssen Apps auch auf einem einzelnen Gerätetyp anpassungsfähig sein.

Sie sehen gut aus und funktionieren auf jedem Gerät und in jeder Konfiguration gut.

Warum adaptive Benutzeroberflächen entwickeln?

Nutzer erwarten, dass Ihre App auf allen ihren Geräten einwandfrei funktioniert und auf großen Bildschirmen erweiterte Funktionen bietet. Im Multifenstermodus können Nutzer mehrere Apps gleichzeitig nutzen und so die Produktivität steigern.

Apps, die auf Standard-Smartphones auf Multitasking beschränkt sind, verpassen eine wachsende Nutzerbasis mit vielfältigen Möglichkeiten.

Google Play

Google Play bietet App-Sammlungen und Empfehlungen speziell für Tablets und faltbare Geräte, mit denen Nutzer hochwertige Apps entdecken können.

Google Play zeigt Apps und Spiele, die für große Bildschirme optimiert sind, höher an als nicht optimierte Apps. Das Ranking basiert auf den Qualitätsrichtlinien für Apps auf großen Bildschirmen. Ein höherer Rang erhöht die Sichtbarkeit, da Nutzer mit mehreren Geräten auf ihren Smartphones Bewertungen und Rezensionen speziell für große Bildschirme sehen können.

Bei Apps, die nicht den Qualitätsstandards für große Displays des Play Store entsprechen, wird auf der Detailseite der App eine Warnung angezeigt. In der Warnung wird Nutzern mitgeteilt, dass die App auf ihren Geräten mit großem Bildschirm möglicherweise nicht gut funktioniert.

Abbildung 2. Warnung zur technischen Qualität auf der Seite mit den App-Details

Entwickeln Sie adaptive Apps, um die Sichtbarkeit bei Google Play zu erhöhen und die Anzahl der Geräte zu maximieren, auf denen Ihre App heruntergeladen werden kann.

Erste Schritte

Berücksichtigen Sie adaptives Design in allen Phasen der App-Entwicklung, von der Planung bis zur Bereitstellung. Informieren Sie Grafikdesigner über adaptives Design. Wenn Sie Ihre App so gestalten, dass sie anpassbar ist, erhalten Sie eine App, die verwaltebar, erweiterbar und für zukünftige Formfaktoren und Fenstermodi bereit ist.

So erstellen Sie eine adaptive App, die alle Displaygrößen und -konfigurationen unterstützt:

  • Fenstergrößenklassen für Layoutentscheidungen verwenden
  • Mit der Compose Material 3 Adaptive Library entwickeln
  • Eingabemethoden über die Berührung hinaus unterstützen
  • Auf allen Gerätetypen testen

Fenstergrößenklassen

Die Abmessungen des App-Fensters können sich auf verschiedenen Geräten – oder bei faltbaren Geräten auf demselben Gerät – unterscheiden, auch wenn die App im Vollbildmodus geöffnet ist. Unterschiedliche Geräteausrichtungen führen zu unterschiedlichen Seitenverhältnissen. Im Multifenstermodus können Größe, Seitenverhältnis und Ausrichtung des App-Fensters von denen des Gerätedisplays abweichen.

Bei adaptiven Apps wird das Problem der Bestimmung und Verwaltung von Fenstergröße, Seitenverhältnis und Ausrichtung vereinfacht und verallgemeinert, da beim Rendern von Layouts nur das App-Fenster berücksichtigt wird. Das funktioniert auch, wenn das App-Fenster den Vollbildmodus nutzt.

Fenstergrößenklassen kategorisieren App-Fenster basierend auf der Breite oder Höhe als kompakt, mittel oder erweitert.

Darstellung der Fenstergrößenklassen „Kompakt“, „Mittel“ und „Maximiert“
Abbildung 3. Fenstergrößenklassen basierend auf der Bildschirmbreite.

Berechnen Sie den WindowSizeClass Ihrer App mit der obersten Funktion currentWindowAdaptiveInfo() der Compose Material 3 Adaptive Library. Die Funktion gibt eine Instanz von WindowAdaptiveInfo zurück, die windowSizeClass enthält. Ihre App wird immer dann aktualisiert, wenn sich die Fenstergrößenklasse ändert:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

Inhaltsbereiche

Das Layout einer Aktivität wird manchmal auch als Bildschirm bezeichnet. Ihre App kann beispielsweise einen Startbildschirm, einen Listenbildschirm und einen Bildschirm mit Artikeldetails haben. Die Terminologie impliziert, dass jede Aktivität den gesamten Bildschirm des Geräts einnimmt.

Auf Gerätebildschirmen, die groß genug sind, um die Fenstergrößenklasse mit erweiterter Breite zu unterstützen, können jedoch mehrere Aktivitätsbildschirme gleichzeitig angezeigt werden. Bereich ist ein genauerer Begriff für die Darstellung von Inhalten einzelner Aktivitäten.

Mithilfe von Fenstergrößenklassen können Sie festlegen, wie viele Inhaltsbereiche in Layouts mit mehreren Bereichen angezeigt werden sollen, wie in Material Design angegeben.

Displays von Geräten werden in Bereiche unterteilt: ein Bereich in den Fenstergrößenklassen „Kompakt“ und „Mittel“ und zwei Bereiche in der Fenstergrößenklasse „Maximiert“.
Abbildung 4: Anzahl der Inhaltsbereiche pro Fenstergrößenklasse.

Die Bereiche sind navigierbar. Bei kompakten und mittleren Fenstergrößen wird in Apps nur ein Bereich angezeigt. Bei der Navigation zu einem Ziel wird also nur ein Bereich angezeigt.

In der Klasse für die erweiterte Fenstergröße können Apps zugehörige Inhalte in mehreren Bereichen anzeigen, z. B. in einem Listendetaillayout. Wenn Sie einen der Bereiche aufrufen, wird das zweispaltige Layout angezeigt. Wenn die Fenstergröße zu „Kompakt“ oder „Mittel“ wechselt, wird in adaptiven Apps nur ein Bereich angezeigt, nämlich das Navigationsziel, also entweder die Liste oder die Details.

Abbildung 5 Listendetaillayout mit Listenbereich als Navigationsziel
Abbildung 6 Listen-Detaillayout mit Detailbereich als Navigationsziel.

Material 3 – adaptiv zusammenstellen

Jetpack Compose ist der moderne, deklarative Ansatz zum Erstellen adaptiver Apps, ohne dass mehrere Layoutdateien dupliziert und gepflegt werden müssen.

Die Adaptive Material 3-Bibliothek für Compose enthält Compose-Elemente, mit denen Fenstergrößenklassen, Navigationskomponenten, Layouts mit mehreren Ansichten sowie faltbare Positionen und Scharnierpositionen verwaltet werden können, z. B.:

  • NavigationSuiteScaffold: Wechselt automatisch zwischen Navigationsleiste und Navigationsleiste, je nach App-Fenstergröße und Geräteausrichtung.

  • ListDetailPaneScaffold: Implementiert das kanonische Layout für Listendetails list-detail.

    Das Layout wird an die Größe des App-Fensters angepasst. In der Fenstergrößenklasse „Maximiert“ werden eine Liste und die Details eines Listenelements in nebeneinander liegenden Bereichen angezeigt. In den Fenstergrößenklassen „Kompakt“ und „Mittel“ werden nur die Liste oder die Details angezeigt.

  • SupportingPaneScaffold: Implementiert das kanonische Layout des unterstützenden Bereichs.

    In der Klasse für die maximierte Fenstergröße wird der Hauptinhaltsbereich und ein unterstützender Bereich angezeigt, in den Klassen für die kompakte und mittlere Fenstergröße jedoch nur der Hauptinhaltsbereich.

Die Compose Material 3 Adaptive-Bibliothek ist eine unverzichtbare Abhängigkeit für die Entwicklung adaptiver Apps.

Konfiguration und Kontinuität

Bei adaptiven Apps bleibt die Kontinuität bei Konfigurationsänderungen erhalten.

Eine Konfigurationsänderung tritt auf, wenn die Größe des App-Fensters geändert wird, sich die Position eines faltbaren Geräts ändert oder sich die Bildschirmdichte oder Schriftart ändert.

Standardmäßig werden bei Konfigurationsänderungen die App-Aktivitäten neu erstellt und der gesamte Aktivitätsstatus geht verloren. Um für Kontinuität zu sorgen, speichern adaptive Apps den Status in der onSaveInstanceState()-Methode der Aktivität oder in einem ViewModel.

Sicherheit

Adaptive Apps reagieren auf Änderungen der Position von faltbaren Geräten. Zu den Positionen gehören die Tisch- und Buchhaltung.

Abbildung 7: Faltbares Gerät in Tischposition

Über die WindowInfoTracker-Oberfläche in Jetpack WindowManager können Sie eine Liste der DisplayFeature-Objekte für das Gerät abrufen. Zu den Displayfunktionen gehört FoldingFeature.State, das angibt, ob das Gerät vollständig oder nur halb geöffnet ist.

Die Compose Material 3 Adaptive-Bibliothek bietet die oberste Funktion currentWindowAdaptiveInfo(), die eine Instanz von WindowAdaptiveInfo mit windowPosture zurückgibt.

Eingabemethoden über Berührung hinaus

Nutzer verbinden häufig externe Tastaturen, Touchpads, Mäuse und Eingabestifte mit Geräten mit großem Bildschirm. Die Peripheriegeräte steigern die Produktivität der Nutzer, die Eingabegenauigkeit, die individuelle Ausdrucksweise und die Barrierefreiheit. Die meisten ChromeOS-Geräte sind mit integrierten Tastaturen und Touchpads ausgestattet.

Adaptive Apps unterstützen externe Eingabegeräte, aber das Android-Framework übernimmt einen Großteil der Arbeit:

  • Jetpack Compose 1.7 und höher: Die Tabulatornavigation per Tastatur sowie das Klicken, Auswählen und Scrollen per Maus oder Touchpad werden standardmäßig unterstützt.

  • Jetpack-Bibliothek androidx.compose.material3: Damit können Nutzer mit einem Eingabestift in jede TextField-Komponente schreiben.

  • Hilfe zu Tastenkombinationen: Hiermit können Nutzer Tastenkombinationen für die Android-Plattform und Apps finden. Veröffentlichen Sie die Tastenkombinationen Ihrer App in der Hilfe zu Tastenkombinationen, indem Sie den Fenster-Callback onProvideKeyboardShortcuts() überschreiben.

Damit Formfaktoren aller Größen vollständig unterstützt werden, unterstützen adaptive Apps Eingaben aller Typen.

Adaptive Apps testen

Testen Sie verschiedene Bildschirm- und Fenstergrößen sowie verschiedene Gerätekonfigurationen. Verwenden Sie hostseitige Screenshots und Compose-Vorschauen, um Ihre App-Layouts zu überprüfen. Ihre App auf Android Studio-Emulatoren und Remote-Android-Geräten ausführen, die in Google-Rechenzentren gehostet werden

Qualitätsrichtlinien für Apps für große Bildschirme

Mit den Qualitätsrichtlinien für Apps mit großen Bildschirmen sorgen Sie dafür, dass Ihre adaptive App auf Tablets, faltbaren Geräten und ChromeOS-Geräten gut funktioniert. Die Richtlinien enthalten Tests, mit denen Sie die App-Funktionen für kritische User Journeys prüfen können. Die Richtlinien konzentrieren sich zwar auf große Bildschirme, sind aber für alle Bildschirmgrößen geeignet.

Mehrere Konfigurationen

Über die Benutzeroberfläche DeviceConfigurationOverride in Compose 1.7 und höher können Sie verschiedene Aspekte der Gerätekonfiguration überschreiben. Die API simuliert verschiedene Gerätekonfigurationen auf lokalisierte Weise für alle zusammensetzbaren Inhalte, die Sie testen möchten. So können Sie beispielsweise mehrere beliebige UI-Größen in einem einzigen Durchlauf Ihrer Testsuite auf einem einzelnen Gerät oder Emulator testen.

Mit der Erweiterungsfunktion DeviceConfigurationOverride.then() können Sie mehrere Konfigurationsparameter gleichzeitig testen, z. B. Schriftgröße, Sprache, Design und Layoutgröße.

Hostseitige Screenshots

Hostseitige Screenshot-Tests sind eine schnelle und skalierbare Möglichkeit, das visuelle Erscheinungsbild Ihrer App-Layouts zu überprüfen. Verwenden Sie hostseitige Screenshots, um Ihre Benutzeroberfläche für verschiedene Bildschirmgrößen zu testen.

Weitere Informationen finden Sie unter Vorschau-Screenshot-Tests erstellen.

Vorschauen erstellen

Mit Vorschau-Compose können Sie die Benutzeroberfläche Ihrer App in der Designansicht von Android Studio prüfen. In der Vorschau werden Anmerkungen wie @PreviewScreenSizes, @PreviewFontScale und @PreviewLightDark verwendet, damit Sie zusammensetzbare Inhalte in verschiedenen Konfigurationen sehen können. Sie können sogar mit den Vorschauen interagieren.

Android Studio weist auch auf häufige Probleme mit der Nutzerfreundlichkeit in Vorschauen hin, z. B. auf zu breite Schaltflächen oder Textfelder.

Weitere Informationen finden Sie unter UI-Vorschau mit zusammensetzbaren Vorschauen erstellen.

Emulatoren

Android Studio bietet eine Vielzahl von Emulatoren zum Testen verschiedener Layoutgrößen:

  • Skalierbarer Emulator: Emuliert ein Smartphone, Tablet oder faltbares Gerät und ermöglicht den direkten Wechsel zwischen den Geräten
  • Pixel Fold-Emulator: Emuliert das faltbare Smartphone Pixel Fold mit großem Display
  • Pixel Tablet-Emulator: Emuliert das große Display von Pixel Tablet
  • Desktop-Emulator: Ermöglicht das Testen von Freiformfenstern, Mauszeigerbewegungen und Tastenkürzeln

Streaming über Remote-Gerät

Sie können eine sichere Verbindung zu Remote-Android-Geräten herstellen, die in Google-Rechenzentren gehostet werden, und Ihre App auf den neuesten Pixel- und Samsung-Geräten ausführen. Sie können Apps installieren und debuggen, ADB-Befehle ausführen und Geräte drehen und falten, um sicherzustellen, dass Ihre App auf einer Vielzahl von echten Geräten gut funktioniert.

Das Streaming von Remote-Geräten ist in Android Studio integriert. Weitere Informationen finden Sie unter Android-Gerätestreaming mit Firebase.

Weitere Informationen