Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Erste Schritte mit adaptiven Apps

Sorge dafür, dass deine App bei Google Play von Nutzern gefunden wird, die nach Premium-Apps für Tablets, faltbare Smartphones, Googlebooks und andere Geräte mit großem Bildschirm suchen.

Erfülle Stufe 2 der Qualitätsrichtlinien für adaptive Apps, um deine App für alle Bildschirmgrößen zu optimieren, und Stufe 1, um ein differenziertes Erlebnis für große Bildschirme zu schaffen. Holen Sie sich dann Ihr Google Play-Logo.

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 eine optimale Nutzererfahrung auf der wachsenden Anzahl und Vielfalt von Geräten mit großen Displays sowie auf Standard-Smartphones 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. die Tisch- oder Buchposition, 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.

Abbildung 1. Adaptive App, die das Layout für verschiedene Fenstergrößen optimiert.

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 die Vorteile 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 stützt sich dabei auf die 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.

Google Play Store-Eintrag für eine App mit der Warnung „Möglicherweise nicht für dein Gerät optimiert“. — **Abbildung 2.** Warnung zur technischen Qualität auf der App-Detailseite.

Entwickle adaptive Apps, um die Auffindbarkeit bei Google Play zu verbessern und die Anzahl der Geräte zu maximieren, auf die deine 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 du deine App so entwirfst, 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-Fähigkeiten

Auf GitHub ansehen

App adaptiv gestalten

Verwenden Sie die adaptive Android-Fähigkeit, um die Benutzeroberfläche Ihrer App so zu aktualisieren, dass sie sich an verschiedene Android-Geräte und ‑Displays anpasst.

Wenn Sie den Skill über die Android-Befehlszeile installieren möchten, führen Sie folgenden Befehl aus:

android skills add adaptive

Fenstergrößenklassen

Die Abmessungen von App-Fenstern können auf verschiedenen Geräten unterschiedlich sein, bei faltbaren Geräten sogar auf demselben Gerät, auch 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.

Darstellung der Fenstergrößenklassen „Kompakt“, „Mittel“ und „Erweitert“ — **Abbildung 3.** Fenstergrößenklassen basierend auf der Displaybreite.

Berechnen Sie die WindowSizeClass Ihrer App mit der currentWindowAdaptiveInfo()-Funktion der obersten Ebene 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().windowSizeClassAdaptiveLayoutSnippets.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 Gerätebildschirm 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.

Gerätebildschirme sind in Bereiche unterteilt: ein Bereich in den Fenstergrößenklassen „Kompakt“ und „Mittel“, zwei Bereiche in der Fenstergrößenklasse „Erweitert“. — **Abbildung 4.** Anzahl der Inhaltsbereiche pro Fenstergrößenklasse.

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

In der erweiterten Fenstergrößenklasse können Apps zugehörige 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.

Abbildung 5. Listen-Detailansicht-Layout mit Listenbereich als Navigationsziel.

Abbildung 6. Listen-Detailansicht-Layout mit Detailbereich als Navigationsziel.

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 die Position des Scharniers verwalten:

NavigationSuiteScaffold: Wechselt automatisch zwischen Navigationsleiste und Navigationsleiste, je nach Fenstergrößenklasse der App und Geräteausrichtung.
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 liegenden Bereichen in der Fenstergrößenklasse „Erweitert“ an, aber nur die Liste oder die Details in den Fenstergrößenklassen „Kompakt“ und „Mittel“.
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 die Tisch- und die Buchposition.

Ein faltbares Smartphone im Modus „Auf dem Tisch“, wobei die untere Hälfte des Displays auf einer Oberfläche aufliegt und die obere Hälfte aufrecht steht. — **Abbildung 7.** Foldable Gerät im Modus „Auf dem Tisch“.

Ü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

Teste 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-Funktionalität 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.

In Android Studio werden auch häufige Probleme mit der Nutzerfreundlichkeit in Vorschauen hervorgehoben, 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. Du kannst Apps installieren und debuggen, ADB-Befehle ausführen und Geräte drehen und falten, um zu prüfen, ob deine 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 Device Streaming, powered by Firebase.