Erste Schritte mit adaptiven Apps

Derzeit sind mehr als 300 Millionen Android-Geräte mit großem Bildschirm im Einsatz, darunter Tablets, Foldables, Googlebooks, ChromeOS-Geräte, Autodisplays und Fernseher. Und es werden immer mehr. Wenn Sie auf der wachsenden Anzahl und Vielfalt von Geräten mit großen Bildschirmen sowie auf Standard-Smartphones eine optimale Nutzererfahrung bieten möchten, sollten Sie adaptive Apps entwickeln.

Was sind adaptive Apps?

Adaptive Apps ändern das Layout basierend auf Änderungen in der App-Anzeige, hauptsächlich der Größe des App-Fensters. Adaptive Apps berücksichtigen aber auch Änderungen der Position faltbarer Geräte, z. B. im Tisch- oder Buchmodus, sowie Änderungen der Bildschirmdichte und Schriftgröße.

Anstatt UI-Elemente als Reaktion auf unterschiedliche Fenstergrößen nur zu strecken oder zu verkleinern, werden bei adaptiven Apps Layoutkomponenten ersetzt und Inhalte ein- oder ausgeblendet. Auf Standard-Smartphones kann eine adaptive App beispielsweise eine untere Navigationsleiste anzeigen, auf großen Bildschirmen jedoch eine Navigationsleiste. Auf großen Bildschirmen zeigen adaptive Apps mehr Inhalte an, z. B. ein zweispaltiges Listen-Detailansicht-Layout. Auf kleinen Bildschirmen werden weniger Inhalte angezeigt, entweder die Liste oder die Details.

In der Vergangenheit wurden Apps in der Regel im Vollbildmodus ausgeführt. Heute werden Apps im Mehrfenstermodus in Fenstern beliebiger Größe ausgeführt, unabhängig von der Bildschirmgröße des Geräts. Nutzer können die Fenstergröße jederzeit ändern. Selbst auf einem einzigen Gerätetyp müssen Apps also anpassungsfähig sein.

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

Warum adaptive Benutzeroberflächen erstellen?

Nutzer erwarten, dass deine App auf allen ihren Geräten einwandfrei funktioniert und auf großen Bildschirmen erweiterte Funktionen bietet. Nutzer können im Mehrfenstermodus Multitasking nutzen, um die Nutzerfreundlichkeit der App zu verbessern und die Produktivität zu steigern.

Apps, die auf Standard-Smartphones auf Single-Tasking beschränkt sind, entgehen einer wachsenden Nutzerbasis mit vielfältigen Möglichkeiten.

Google Play

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

Bei Google Play werden Apps und Spiele, die für große Bildschirme optimiert sind, höher eingestuft als nicht optimierte Apps. Google Play basiert das Ranking auf den Qualitätsrichtlinien für Apps auf großen Bildschirmen. Ein höheres Ranking erhöht die Auffindbarkeit, da Nutzer, die mehrere Geräte verwenden, auf ihren Smartphones Bewertungen und Rezensionen sehen können, die sich auf große Bildschirme beziehen.

Bei Apps, die die Qualitätsstandards des Play Store für große Bildschirme nicht erfüllen, wird auf der Detailseite der App eine Warnung angezeigt. Die Warnung weist Nutzer darauf hin, dass die App auf ihren Geräten mit großem Bildschirm möglicherweise nicht gut funktioniert.

Entwickeln Sie adaptive Apps, um die Auffindbarkeit bei Google Play zu verbessern und die Anzahl der Geräte zu maximieren, auf die Ihre App heruntergeladen werden kann.

Erste Schritte

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

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-Bibliothek entwickeln
• Unterstützung von Eingaben über die Touchbedienung hinaus
• Auf allen Gerätetypen testen

android skills add adaptive

Fenstergrößenklassen

Die Abmessungen des App-Fensters können auf verschiedenen Geräten unterschiedlich sein, oder auf demselben Gerät, wenn es sich um ein faltbares Gerät handelt, selbst wenn die App im Vollbildmodus ausgeführt wird. Unterschiedliche Geräteausrichtungen führen zu unterschiedlichen Seitenverhältnissen. Im Multi-Window-Modus können sich die Größe, das Seitenverhältnis und die Ausrichtung des App-Fensters von denen des Gerätedisplays unterscheiden.

Adaptive Apps vereinfachen und verallgemeinern das Problem der Bestimmung und Verwaltung von Fenstergröße, Seitenverhältnis und Ausrichtung, indem sie beim Rendern von Layouts nur das App-Fenster berücksichtigen. Das funktioniert auch, wenn das App-Fenster im Vollbildmodus angezeigt wird.

Fenstergrößenklassen kategorisieren App-Fenster je nach Fensterbreite oder -höhe als kompakt, mittel oder erweitert.

Berechnen Sie die WindowSizeClass Ihrer App mit der Top-Level-Funktion currentWindowAdaptiveInfo() der Compose Material 3 Adaptive-Bibliothek. Die Funktion gibt eine Instanz von WindowAdaptiveInfo zurück, die windowSizeClass enthält. Ihre App erhält Updates, wenn sich die Fenstergrößenklasse ändert:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

Inhaltsbereiche

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

Auf Gerätebildschirmen, die groß genug sind, um die Fenstergrößenklasse mit erweiterter Breite zu unterstützen, können jedoch mehrere Aktivitäts-Bildschirme gleichzeitig angezeigt werden. Bereich ist ein präziserer Begriff für die Inhaltsanzeige einzelner Aktivitäten.

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

Die Bereiche sind navigierbar. Bei kompakten und mittelgroßen Fenstergrößenklassen zeigen Apps einen einzelnen Bereich an. Daher wird bei der Navigation zu einem beliebigen Ziel ein Bereich angezeigt.

In der Fenstergrößenklasse „Erweitert“ können Apps ähnliche Inhalte in mehreren Bereichen anzeigen, z. B. in einem Listen-Detail-Layout. Wenn Sie zu einem der beiden Bereiche navigieren, wird das Layout mit zwei Bereichen angezeigt. Wenn sich die Fenstergröße zu kompakt oder mittel ändert, zeigen adaptive Apps nur einen Bereich, das Navigationsziel, entweder die Liste oder die Details.

Compose Material 3 Adaptive

Jetpack Compose ist der moderne, deklarative Ansatz zum Erstellen adaptiver Apps ohne die Duplizierung und den Wartungsaufwand mehrerer Layoutdateien.

Die Compose Material 3 Adaptive-Bibliothek enthält Composables, die beispielsweise Fenstergrößenklassen, Navigationskomponenten, Layouts mit mehreren Bereichen, faltbare Positionen und Scharnierpositionen verwalten:

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

• ListDetailPaneScaffold: Implementiert das kanonische Layout „Listen-Detailansicht“.

  Passt das Layout an die Größe des App-Fensters an. Zeigt eine Liste und die Details eines Listenelements in nebeneinander angeordneten Bereichen in der erweiterten Fenstergrößenklasse an, aber nur die Liste oder die Details in kompakten und mittelgroßen Fenstergrößenklassen.

• SupportingPaneScaffold: Implementiert das kanonische Layout für den unterstützenden Bereich.

  Zeigt den Hauptinhaltsbereich und einen unterstützenden Bereich in der Fenstergrößenklasse „Erweitert“ an, aber nur den Hauptinhaltsbereich in den Fenstergrößenklassen „Kompakt“ und „Mittel“.

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

Konfiguration und Kontinuität

Adaptive Apps behalten die Kontinuität bei Konfigurationsänderungen bei.

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 wird die App-Aktivität bei Konfigurationsänderungen neu erstellt und der gesamte Aktivitätsstatus geht verloren. Um die Kontinuität zu wahren, speichern adaptive Apps den Status in der Methode onSaveInstanceState() der Aktivität oder in einem ViewModel.

Sicherheitsstatus

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

Über die Schnittstelle WindowInfoTracker in Jetpack WindowManager kannst du eine Liste von DisplayFeature-Objekten für das Gerät abrufen. Zu den Displayfunktionen gehört FoldingFeature.State, womit angegeben wird, ob das Gerät vollständig oder 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.

Eingabe über Touch hinaus

Nutzer verbinden häufig externe Tastaturen, Trackpads, Mäuse und Eingabestifte mit Geräten mit großem Bildschirm. Die Peripheriegeräte verbessern die Produktivität, die Eingabegenauigkeit, die Personalisierung und die Barrierefreiheit. Die meisten ChromeOS-Geräte haben integrierte Tastaturen und Trackpads.

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

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

• Jetpack-Bibliothek androidx.compose.material3: Ermöglicht Nutzern, mit einem Eingabestift in eine beliebige TextField-Komponente zu schreiben.

• Hilfe für Tastenkombinationen: Macht Tastenkombinationen für die Android-Plattform und Apps für Nutzer sichtbar. Veröffentliche die Tastenkombinationen deiner App in der Hilfe für Tastenkombinationen, indem du den Fenster-Callback onProvideKeyboardShortcuts() überschreibst.

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

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 prüfen. Führen Sie Ihre App auf Android Studio-Emulatoren und Android-Remotegeräten aus, die in Google-Rechenzentren gehostet werden.

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

Anhand der Qualitätsrichtlinien für Apps auf großen Bildschirmen kannst du prüfen, ob deine adaptive App auf Tablets, Foldables und ChromeOS-Geräten gut funktioniert. Die Richtlinien umfassen Tests, mit denen Sie die App-Funktionen für Critical User Journeys prüfen können. Obwohl sich die Richtlinien auf große Bildschirme konzentrieren, sind sie mit allen Bildschirmgrößen kompatibel.

Mehrere Konfigurationen

Mit der Schnittstelle DeviceConfigurationOverride in Compose 1.7 und höher können Sie verschiedene Aspekte der Gerätekonfiguration überschreiben. Die API simuliert verschiedene Gerätekonfigurationen lokal für alle zusammensetzbaren Inhalte, die Sie testen möchten. Sie können beispielsweise mehrere beliebige UI-Größen in einem einzigen Durchlauf Ihrer Test-Suite auf einem einzelnen Gerät oder Emulator testen.

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

Hostseitige Screenshots

Hostseitige Screenshot-Tests sind eine schnelle und skalierbare Möglichkeit, das visuelle Erscheinungsbild Ihrer App-Layouts zu überprüfen. Mit hostseitigen Screenshots können Sie Ihre UI für verschiedene Displaygrößen testen.

Weitere Informationen finden Sie unter Screenshot-Test für Compose-Vorschau.

Vorschauen erstellen

Mit Compose-Vorschauen können Sie die Benutzeroberfläche Ihrer App in der Designansicht von Android Studio prüfen. In Vorabversionen werden Annotationen 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 hebt in der Vorschau auch häufige Probleme mit der Nutzerfreundlichkeit hervor, z. B. zu breite Schaltflächen oder Textfelder.

Weitere Informationen finden Sie unter UI mit composable Vorschauen ansehen.

Emulatoren

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

• Emulator mit anpassbarer Größe: Emuliert ein Smartphone, Tablet oder faltbares Gerät und ermöglicht es, im Handumdrehen zwischen ihnen zu wechseln
• Pixel Fold-Emulator: Emuliert das faltbare Pixel Fold-Smartphone mit großem Display
• Pixel Tablet-Emulator: Emuliert das Pixel Tablet mit großem Display
• Desktop-Emulator: Ermöglicht das Testen von Freiform-Fenstern, Maus-Hover und Tastenkombinationen

Remote-Geräte-Streaming

Stelle eine sichere Verbindung zu Android-Geräten her, die in Google-Rechenzentren gehostet werden, und führe deine App auf den neuesten Pixel- und Samsung-Geräten aus. Sie können Apps installieren und debuggen, ADB-Befehle ausführen und Geräte drehen und falten, um zu prüfen, ob 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äte-Streaming, powered by Firebase.

Zusätzliche Ressourcen

• I/O-Präsentation: Adaptive Android-Apps entwickeln