Adaptive Apps erstellen

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. Aber adaptive Apps berücksichtigen auch Änderungen der Position von faltbaren Geräten, z. B. im Tisch- oder Buchmodus, sowie Änderungen der Bildschirmdichte und Schriftgröße.

Anstatt UI-Elemente als Reaktion auf verschiedene Fenstergrößen einfach nur zu erweitern oder zu verkleinern, ersetzen adaptive Apps Layoutkomponenten und blenden Inhalte ein oder aus. Auf Standard-Smartphones kann eine adaptive App beispielsweise eine Navigationsleiste am unteren Rand anzeigen, auf großen Bildschirmen 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 Größe des Gerätebildschirms. Nutzer können die Fenstergröße jederzeit ändern. Daher müssen Apps auch auf einem einzelnen Gerätetyp anpassungsfähig sein.

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

Warum adaptive UIs erstellen?

Nutzer erwarten, dass deine App auf allen ihren Geräten einwandfrei funktioniert und erweiterte Funktionen auf großen Bildschirmen 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 Detailseite der App.

Erstelle adaptive Apps, um die Sichtbarkeit bei Google Play zu erhöhen und die Anzahl der Geräte zu maximieren, auf denen deine 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 angezeigt wird. 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 mit kompakter, mittlerer und maximierter Breite.
Abbildung 3. Fenstergrößenklassen basierend auf der Anzeigebreite.

Berechnen Sie den WindowSizeClass Ihrer App mit der übergeordneten currentWindowAdaptiveInfo()-Funktion der Adaptive Material 3-Bibliothek. 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 den Elementdetails haben. Die Terminologie impliziert, dass jede Aktivität den Gerätebildschirm ausfüllt.

Auf Gerätebildschirmen, die groß genug sind, um die erweiterte Fenstergröße zu unterstützen, können jedoch mehrere Aktivitätsbildschirme gleichzeitig angezeigt werden. Bereich ist ein präziserer 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 Ansichten 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 maximierte Fenstergröße können Apps zusammengehörige Inhalte in mehreren Bereichen anzeigen, z. B. in einem Listendetaillayout. Wenn Sie zu einem der Bereiche wechseln, wird das Layout mit zwei Bereichen 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 Layout mit Listendetails 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 Composer-Bibliothek für adaptives Material 3 enthält zusammensetzbare Funktionen zur Verwaltung von Fenstergrößenklassen, Navigationskomponenten, Mehrfensterlayouts, faltbaren Positionen und der Position des Scharniers, 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. Zeigt eine Liste und die Details eines Listenelements in nebeneinander angezeigten Bereichen in der Klasse der maximierten Fenstergröße an, aber nur die Liste oder die Details in Klassen für kompakte und mittlere Fenstergröße.

  • SupportingPaneScaffold: Implementiert das unterstützte kanonische Layout eines Bereichs.

    In der Klasse für die Fenstergröße „Maximiert“ wird der Hauptinhaltsbereich und ein unterstützender Bereich angezeigt, in den Klassen „Kompakt“ und „Mittel“ 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 angepasst wird, sich die Position eines faltbaren Smartphones oder 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 Kontinuität zu gewährleisten, speichern adaptive Apps den Status in der Methode onSaveInstanceState() der Aktivität oder in einem ViewModel.

Sicherheit

Adaptive Apps reagieren auf Änderungen der Position von faltbaren Geräten. Zu den Positionen gehören „Auf dem Tisch“ und „Buchhaltung“.

Abbildung 7: Faltbares Gerät im Modus „Auf dem Tisch“

Ü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 Funktion currentWindowAdaptiveInfo() auf oberster Ebene, 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. Peripheriegeräte verbessern die Produktivität der Nutzer, die Eingabegenauigkeit, die persönliche Ausdrucksweise und die Zugänglichkeit. 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: Damit können Nutzer Tastenkombinationen für die Android-Plattform und Apps leichter finden. Veröffentlichen Sie die Tastenkombinationen Ihrer App im Keyboard Shortcuts Helper, indem Sie den Callback des Fensters onProvideKeyboardShortcuts() überschreiben.

Adaptive Apps unterstützen alle Eingabetypen, um Formfaktoren aller Größen vollständig zu unterstützen.

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

Die Qualitätsrichtlinien für Apps für große Bildschirme sorgen dafür, dass deine adaptive App auf Tablets, faltbaren Geräten und ChromeOS-Geräten einwandfrei 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 für jeden zusammensetzbaren Inhalt, den du testen möchtest, verschiedene Gerätekonfigurationen in einer lokalisierten Form. 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 Screenshot-Test in der Vorschau erstellen.

Vorschauen erstellen

Mit der Funktion „Vorschau erstellen“ können Sie die UI 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