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

Erste Schritte mit adaptiven Apps

Heute sind mehr als 300 Millionen Android-Geräte mit großem Display im Einsatz, darunter Tablets, faltbare Geräte, ChromeOS-Geräte, Displays in Autos und Fernseher. Und es werden ständig mehr. Damit Nutzer auf der wachwachsenden Anzahl und Vielfalt von Geräten mit großem Display sowie auf Standard-Smartphones eine optimale Nutzererfahrung haben, sollten Sie adaptive Apps entwickeln.

Was sind adaptive Apps?

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

Anstatt UI-Elemente nur zu strecken oder zu verkleinern, werden bei adaptiven Apps Layoutkomponenten ersetzt und Inhalte ein- oder ausgeblendet. Auf Standard-Smartphones wird in einer adaptiven App beispielsweise eine untere Navigationsleiste angezeigt, auf Geräten mit großem Display jedoch eine Navigationsleiste. Auf Geräten mit großem Display zeigen adaptive Apps mehr Inhalte, z. B. eine Listen-Detailansicht. Auf Geräten mit kleinem Display werden weniger Inhalte angezeigt, entweder die Liste oder die Details.

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

Früher wurden Apps in der Regel im Vollbildmodus ausgeführt. Heute werden Apps im Mehrfenstermodus in Fenstern mit beliebiger Größe ausgeführt, unabhängig von der Displaygröße des Geräts. Nutzer können die Fenstergröße jederzeit ändern. Daher müssen Apps auch auf einem einzelnen Gerätetyp adaptiv sein.

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

Warum adaptive UIs entwickeln?

Nutzer erwarten, dass Ihre App auf allen ihren Geräten einwandfrei funktioniert und auf Geräten mit großem Display erweiterte Funktionen bietet. Nutzer verwenden den Mehrfenstermodus für Multitasking, um die App-Nutzung zu verbessern und die Produktivität zu steigern.

Apps, die auf Standard-Smartphones auf eine einzige Aufgabe 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.

Bei Google Play werden Apps und Spiele, die für große Displays optimiert sind, höher eingestuft als nicht optimierte Apps. Die Einstufung basiert auf den Qualitätsrichtlinien für Apps auf Geräten mit großem Display. Eine höhere Einstufung erhöht die Auffindbarkeit, da Nutzer, die mehrere Geräte verwenden, auf ihren Smartphones Bewertungen und Rezensionen speziell für Geräte mit großem Display sehen können.

Bei Apps, die die Qualitätsstandards für Geräte mit großem Display im Google Play Store nicht erfüllen, wird auf der App-Detailseite eine Warnung angezeigt. In der Warnung werden Nutzer darauf hingewiesen, dass die App möglicherweise nicht optimal auf ihren Geräten mit großem Display funktioniert.

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

Entwickeln Sie adaptive Apps, um die Auffindbarkeit 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 das adaptive Design in allen Phasen der App-Entwicklung, von der Planung bis zur Bereitstellung. Informieren Sie Grafikdesigner über das adaptive Design. Wenn Sie Ihre App so gestalten, dass sie adaptiv ist, entwickeln Sie eine App, die verwaltet und erweitert werden kann und für zukünftige Formfaktoren und Fensterungsmodi 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-Bibliothek entwickeln
Eingabe über Berührung hinaus unterstützen
Auf allen Gerätetypen testen

Android-Skills

Auf GitHub ansehen

App adaptiv gestalten

Mit dem adaptive Android-Skill können Sie die UI Ihrer App so aktualisieren, dass sie sich an verschiedene Android-Geräte und ‑Displays anpasst.

So installieren Sie den Skill über die Android-Befehlszeile:

android skills add adaptive

Fenstergrößenklassen

Die Abmessungen des App-Fensters können auf verschiedenen Geräten unterschiedlich sein – oder auf demselben Gerät bei faltbaren Geräten –, auch wenn die App im Vollbildmodus ausgeführt wird. Verschiedene Geräteausrichtungen führen zu unterschiedlichen Seitenverhältnissen. Im Mehrfenstermodus können sich Fenstergröße, Seitenverhältnis und Ausrichtung des App-Fensters von denen des Gerätebildschirms 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 den gesamten Bildschirm einnimmt.

Fenstergrößenklassen kategorisieren App-Fenster basierend auf der Fensterbreite oder ‑höhe als kompakt, mittel oder erweitert.

Abbildung der Fenstergrößenklassen „Kompakt“, „Mittel“ und „Maximiert“. — **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 Artikeldetails haben. Die Terminologie impliziert, dass jede Aktivität den Gerätebildschirm ausfüllt.

Auf Gerätebildschirmen, die groß genug sind, um die Fenstergrößenklasse „Erweiterte Breite“ zu unterstützen, können jedoch mehrere Aktivitäts-Bildschirme gleichzeitig angezeigt werden. Bereich ist ein präziserer Begriff für die Inhaltsanzeigen 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 werden in Bereiche aufgeteilt: ein Bereich in den Fenstergrößenklassen „Kompakt“ und „Mittel“, zwei Bereiche in der Fenstergrößenklasse „Erweitert“. — **Abbildung 4** Anzahl der Inhaltsbereiche pro Fenstergrößenklasse.

Bereiche sind navigierbar. Bei kompakten und mittleren Fenstergrößenklassen zeigen Apps einen einzelnen Bereich an. Die Navigation zu einem beliebigen Ziel führt also zu einem Bereich.

Bei der erweiterten Fenstergrößenklasse können Apps verwandte Inhalte in mehreren Bereichen anzeigen, z. B. in einem Layout mit Liste und Details. Wenn Sie zu einem der beiden Bereiche navigieren, wird das Layout mit zwei Bereichen angezeigt. Wenn sich die Fenstergröße in „Kompakt“ oder „Mittel“ ändert, zeigen adaptive Apps nur einen Bereich an, das Navigationsziel, entweder die Liste oder die Details.

Abbildung 5 Listen-Detailansicht mit Listenbereich als Navigationsziel.

Abbildung 6 Listen-Detailansicht 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 Fenstergrößenklassen, Navigationskomponenten, Layouts mit mehreren Bereichen sowie Positionen und Scharnierpositionen faltbarer Geräte verwalten, z. B.:

NavigationSuiteScaffold: Wechselt automatisch zwischen Navigationsleiste und Navigationsleiste, je nach Fenstergrößenklasse der App und Geräteposition.
ListDetailPaneScaffold: Implementiert das kanonische Listen-Detailansicht-Layout.

Passt das Layout an die Fenstergröße der App an. Präsentiert eine Liste und die Details eines Listenelements in nebeneinanderliegenden Bereichen in der erweiterten Fenstergrößenklasse, aber nur die Liste oder die Details in kompakten und mittleren Fenstergrößenklassen.
SupportingPaneScaffold: Implementiert das kanonische Layout für den unterstützenden Bereich.

Präsentiert den Hauptinhaltsbereich und einen unterstützenden Bereich in der erweiterten Fenstergrößenklasse, aber nur den Hauptinhaltsbereich in kompakten und mittleren Fenstergrößenklassen.

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 ein, 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ät neu erstellt und alle Aktivitätszustände verloren. Um die Kontinuität aufrechtzuerhalten, speichern adaptive Apps den Status in der Methode onSaveInstanceState() der Aktivität oder in einem ViewModel.

Position

Adaptive Apps reagieren auf Änderungen in der Position faltbarer Geräte. Zu den Positionen gehören der Tisch- und der Buchmodus.

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** Faltbares Gerät im Tischmodus.

Die WindowInfoTracker-Schnittstelle in Jetpack WindowManager ermöglicht es Ihnen, eine Liste von DisplayFeature-Objekten für das Gerät abzurufen. Zu den Displayfunktionen gehört FoldingFeature.State, das angibt, ob das Gerät vollständig oder halb geöffnet ist.

Die Compose Material 3 Adaptive-Bibliothek bietet die currentWindowAdaptiveInfo() Funktion der obersten Ebene, die eine Instanz von WindowAdaptiveInfo zurückgibt, die windowPosture enthält.

Eingabe über Berührung hinaus

Nutzer schließen häufig externe Tastaturen, Trackpads, Mäuse und Eingabestifte an Geräte mit großem Display an. Die Peripheriegeräte verbessern die Produktivität, die Eingabegenauigkeit, die persönliche Ausdrucksweise und die Barrierefreiheit. Die meisten ChromeOS-Geräte haben eine integrierte Tastatur und ein Trackpad.

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 Tab-Navigation mit der Tastatur und das Klicken, Auswählen und Scrollen mit der Maus oder dem Trackpad werden standardmäßig unterstützt.
Jetpack androidx.compose.material3-Bibliothek: Ermöglicht Nutzern, mit einem Eingabestift in jede TextField-Komponente zu schreiben.
Hilfe zu Tastenkombinationen: Macht Tastenkombinationen für die Android-Plattform und App s für Nutzer auffindbar. Veröffentlichen Sie die Tastenkombinationen Ihrer App in der Hilfe zu Tastenkombinationen, indem Sie den onProvideKeyboardShortcuts() Fenster-Callback überschreiben.

Um Formfaktoren aller Größen vollständig zu unterstützen, unterstützen adaptive Apps alle Arten von Eingaben.

Adaptive Apps testen

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

Qualitätsrichtlinien für Apps auf Geräten mit großem Display

Mit den Qualitätsrichtlinien für Apps auf Geräten mit großem Display können Sie prüfen, ob Ihre adaptive App auf Tablets, faltbaren Geräten und ChromeOS-Geräten gut funktioniert. Die Richtlinien enthalten Tests, mit denen Sie die App-Funktionalität für kritische Nutzeraktionen prüfen können. Obwohl sich die Richtlinien auf große Displays konzentrieren, sind sie mit allen Bildschirmgrößen kompatibel.

Mehrere Konfigurationen

Die DeviceConfigurationOverride Schnittstelle in Compose 1.7 und höher ermöglicht es Ihnen, verschiedene Aspekte der Gerätekonfiguration zu überschreiben. Die API simuliert verschiedene Gerätekonfigurationen auf lokalisierte Weise für alle Composables, die Sie testen möchten. Sie können beispielsweise mehrere beliebige UI-Größen in einem einzigen Durchlauf Ihrer Testsuite auf einem einzelnen Gerät oder Emulator testen.

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

Host-seitige Screenshots

Host-seitige Screenshot-Tests sind eine schnelle und skalierbare Möglichkeit, das visuelle Erscheinungsbild Ihrer App-Layouts zu prüfen. Verwenden Sie Host-seitige Screenshots, um Ihre UI für verschiedene Displaygrößen zu testen.

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

Compose-Vorschauen

Mit Compose-Vorschauen können Sie die UI Ihrer App in der Designansicht von Android Studio prüfen. In Vorschauen werden Annotationen wie @PreviewScreenSizes, @PreviewFontScale und @PreviewLightDark verwendet, damit Sie Composables in verschiedenen Konfigurationen sehen können. Sie können sogar mit den Vorschauen interagieren.

Android Studio hebt in Vorschauen auch häufige Usability-Probleme hervor, z. B. zu breite Schaltflächen oder Textfelder.

Weitere Informationen finden Sie unter UI mit Composables in der Vorschau ansehen.

Emulatoren

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

Größenänderbarer Emulator: Emuliert ein Smartphone, Tablet oder faltbares Gerät und ermöglicht den Wechsel zwischen den Geräten im laufenden Betrieb.
Pixel Fold-Emulator: Emuliert das faltbare Smartphone Pixel Fold mit großem Display.
Pixel Tablet-Emulator: Emuliert das Pixel Tablet mit großem Display.
Desktop-Emulator: Ermöglicht das Testen von Freiform-Fenstern, Mauszeiger und Tastenkombinationen.

Gerätestreaming per Remote-Zugriff

Stellen Sie eine sichere Verbindung zu Android-Remote-Geräten her, die in Google-Rechenzentren gehostet werden, und führen Sie Ihre App auf den neuesten Pixel- und Samsung-Geräten aus. Installieren und debuggen Sie Apps, führen Sie ADB-Befehle aus und drehen und falten Sie Geräte, um zu prüfen, ob Ihre App auf einer Vielzahl von echten Geräten gut funktioniert.

Das Gerätestreaming per Remote-Zugriff ist in Android Studio integriert. Weitere Informationen finden Sie unter Android Device Streaming powered by Firebase.