Weitere Informationen zu faltbaren Smartphones

Abbildung 1 Beispiele für Apps, die auf faltbaren Geräten ausgeführt werden

Faltbare Geräte bieten Möglichkeiten für innovative App-Entwicklung. Große und kleine Displays auf demselben Gerät bieten sich ergänzende, aber unterschiedliche interaktive Erlebnisse. Faltfunktionen wie die Aufstellung auf dem Tisch und die Buchaufstellung ermöglichen kreative Layouts und unkonventionelle Benutzeroberflächen.

Abbildung 2 Faltbares Gerät in verschiedenen Aufstellungen: zusammengeklappt, flach aufgeklappt, flach aufgeklappt im Querformat und halb aufgeklappt (auf dem Tisch)

Responsives/adaptives Design

Die Unterstützung für faltbare Geräte beginnt mit responsivem Design. Mit responsiven Layouts sieht eine App auf einer Reihe von Displaygrößen gut aus und funktioniert auch gut. Implementieren Sie responsives Design mit der BoxWithConstraints zusammensetzbaren Funktion.

Um die zusammengeklappten und aufgeklappten Displays eines faltbaren Geräts optimal zu unterstützen, muss sich das Layout jedoch anpassen. Die Unterschiede in der Displaygröße und im Seitenverhältnis von zusammengeklappten und aufgeklappten Displays können sehr groß sein, sodass selbst ein responsives Layout nicht für beide Displays geeignet ist. Mit adaptivem Design werden alternative Layouts erstellt, die für verschiedene Displaygrößen und ‑konfigurationen optimiert sind. Adaptive Layouts bieten eine optimierte Nutzererfahrung, wenn ein faltbares Gerät zusammengeklappt oder aufgeklappt ist, im Hoch- oder Querformat verwendet wird oder auf dem Tisch steht oder wie ein Buch gehalten wird.

Ein großes faltbares Gerät, das im Querformat aufgeklappt ist, ähnelt beispielsweise einem Tablet. Ein Layout mit zwei Bereichen und einer Navigationsleiste nutzt das breite Display optimal. Zusammengeklappt ähnelt das Gerät einem Standard-Smartphone. Ein Layout mit einer einzelnen Spalte und einer unteren Navigationsleiste ist einfach, aber effektiv. Da die Layouts getrennt sind, können Sie jedes für den jeweiligen Anwendungsfall optimieren.

Abbildung 3 Adaptive Layouts, die für zusammengeklappte und aufgeklappte Displays optimiert sind

Faltbare Geräte können auf verschiedene Arten zusammengeklappt werden, z. B. nach innen, wobei das Display in das Innere des Geräts geklappt wird, oder nach außen, wobei das Display um das Gerät gewickelt wird. Mit responsivem/adaptivem Design ist Ihre App für alle Arten von faltbaren Formfaktoren geeignet.

Weitere Informationen zu responsivem/adaptivem Design für faltbare Geräte finden Sie hier:

Zustände und Aufstellungen faltbarer Geräte

Die Faltstelle eines faltbaren Geräts teilt das Display in zwei Bereiche. Die Faltstelle kann ein flexibler Bereich des Displays oder bei Geräten mit zwei Displays ein Gelenk sein, das die beiden Displays trennt.

Die Faltstelle hat eine Dimension und eine occlusionType-Property, die definiert , ob die Faltstelle einen Teil des Displays verdeckt. Bei Geräten mit zwei Displays ist occlusionType auf FULL gesetzt. Im Bereich der Faltstelle (Gelenk) ist kein Inhalt sichtbar, auch wenn sich eine App über beide Displays erstreckt.

Faltbare Geräte können sich in verschiedenen zusammengeklappten Zuständen befinden, z. B. FLAT (vollständig aufgeklappt) oder HALF_OPENED (irgendwo zwischen vollständig aufgeklappt und vollständig zusammengeklappt).

Abbildung 4 Faltbares Gerät im vollständig aufgeklappten und halb aufgeklappten Zustand

Wenn sich ein Gerät im Zustand HALF_OPENED befindet, sind je nach Ausrichtung der Faltstelle zwei Aufstellungen möglich: Aufstellung auf dem Tisch (horizontale Faltstelle) und Buchaufstellung (vertikale Faltstelle).

Die Aufstellung auf dem Tisch und die Buchaufstellung bieten neue Layoutmöglichkeiten, aber der Gerätezustand HALF_OPENED bringt auch einige Einschränkungen mit sich. Beispielsweise können UI-Steuerelemente in der Nähe der Faltstelle für Nutzer schwer zugänglich sein und Text, der die Faltstelle überlagert, kann schwer zu lesen sein (oder gar nicht lesbar, wenn occlusionType auf FULL gesetzt ist).

Gestalten Sie Ihre Layouts so, dass UI-Elemente in allen Gerätezuständen zugänglich sind. Positionieren Sie Dialogfelder und Pop-up-Menüs so, dass sie die Faltstelle nicht überlagern. Achten Sie darauf, dass wichtige Inhalte sichtbar sind, wenn das Gerät teilweise zusammengeklappt ist. Teilen Sie Inhalte in zwei Bereiche auf, wenn das Gerät halb aufgeklappt ist: oben und unten in der Aufstellung auf dem Tisch, links und rechts in der Buchaufstellung.

Weitere Informationen zu Faltstellen und Aufstellungen faltbarer Geräte finden Sie unter App für faltbare Geräte optimieren.

App-Kontinuität

Eine App wird beendet und neu gestartet, wenn sie beim Zusammen- oder Aufklappen eines Geräts von einem Display zum anderen wechselt. Damit die Kontinuität für den Nutzer erhalten bleibt, sollte die App ihren Zustand wiederherstellen, wenn das App-Layout auf einem zusammengeklappten oder aufgeklappten Display neu erstellt wird. Beispielsweise sollten Apps Folgendes tun:

  • In Eingabefeldern eingegebenen Text beibehalten
  • Tastaturzustand wiederherstellen
  • Scrollposition von scrollbaren Feldern wiederherstellen
  • Medienwiedergabe an der Stelle fortsetzen, an der sie beendet wurde, als die App beendet wurde

Die verschiedenen Displaylayouts eines faltbaren Geräts sollten sich auch ergänzen. Wenn auf dem zusammengeklappten Display beispielsweise ein Bild und eine Beschreibung für ein Produkt aus einem Onlineshop angezeigt werden, sollte auf dem aufgeklappten Display die Kontinuität gewahrt werden, indem dasselbe Bild und dieselbe Beschreibung angezeigt werden, aber auch ergänzende Inhalte wie Produktspezifikationen oder Rezensionen enthalten.

Weitere Informationen zum Verwalten des App-Zustands und der Kontinuität finden Sie unter UI-Zustände speichern und Konfigurationsänderungen verarbeiten.

Multitasking

Faltbare Geräte mit großem Display haben ein Display in Tabletgröße, das sich ideal für Multitasking im Mehrfenstermodus eignet. Faltbare Geräte unterstützen den Splitscreen-Modus. Einige unterstützen sogar den Desktop-Freiform-Fenster-Modus, in dem Apps in verschiebbaren, skalierbaren Fenstern enthalten sind, ähnlich wie bei einem Desktop-Fenstersystem.

Abbildung 5 Faltbares Gerät im Querformat, auf dem drei Apps im Splitscreen-Modus (links) und im Desktop-Freiform-Fenster-Modus (rechts) ausgeführt werden

Unter Android 12 (API-Level 31) und höher ist standardmäßig der Mehrfenstermodus aktiviert. Auf großen Displays werden alle Apps im Mehrfenstermodus ausgeführt, unabhängig von der App-Konfiguration. Bei früheren Versionen bis Android 7.0 (API-Level 24) müssen Sie Ihre App so konfigurieren, dass sie die Größe ändern kann, um den Mehrfenstermodus zu unterstützen.

Informationen zum Multitasking im Mehrfenstermodus finden Sie unter Mehrfenstermodus unterstützen.

Drag-and-Drop

Faltbare Geräte mit großem Display bieten viel Platz für Drag-and-Drop-Interaktionen. Der Mehrfenstermodus auf faltbaren Geräten ermöglicht Drag-and-Drop zwischen Apps.

Drag-and-Drop-Interaktionen sorgen für eine produktive und ansprechende Nutzererfahrung. Fügen Sie Ihrer App Drag-and-Drop-Funktionen mit dem Android-Drag-and-Drop-Framework hinzu. Weitere Informationen finden Sie unter Drag-and-Drop aktivieren.

Zusätzliche Ressourcen