Benutzeroberfläche zu responsiven Layouts migrieren

Android-Apps müssen eine ständig wachsende Zahl von Geräteformfaktoren unterstützen. Die Benutzeroberfläche einer App sollte responsiv für eine Vielzahl von Bildschirmgrößen sowie für unterschiedliche Ausrichtungen und Gerätestatus sein.

Responsive UI basiert auf den Prinzipien Flexibilität und Kontinuität.

Flexibilität bezieht sich auf Layouts, die den verfügbaren Platz optimal nutzen und sich anpassen, wenn sich der verfügbare Platz ändert. Anpassungen können viele Formen annehmen: Sie können einfach eine einzelne Ansicht vergrößern, Ansichten so neu positionieren, dass sie sich an besser zugänglichen Orten befinden, das Ein- oder Ausblenden weiterer Ansichten oder eine Kombination aus diesen.

Kontinuität bezieht sich auf eine nahtlose Nutzererfahrung beim Übergang von einer Fenstergröße zu einer anderen. Das Spielerlebnis sollte ohne Unterbrechung weiterlaufen. Da eine Größenänderung mit der Zerstörung und Neuerstellung der gesamten Ansichtshierarchie einhergehen kann, ist es wichtig, dass der Nutzer seinen Platz oder seine Daten nicht verliert.

Was du vermeiden solltest

Vermeiden Sie bei Layoutentscheidungen die Verwendung physischer Hardwarewerte. Es mag verlockend sein, Entscheidungen auf der Grundlage eines festen Werts zu treffen. In vielen Situationen sind diese Werte jedoch nicht nützlich, um den Bereich zu bestimmen, mit dem Ihre UI arbeiten kann.

Bei Apps kann die Größe des Fensters angepasst werden, wenn sie im Mehrfenstermodus, Bild-im-Bild- oder Freiform-Fenstern wie ChromeOS ausgeführt werden. Es kann sogar mehr als einen physischen Bildschirm geben, z. B. ein faltbares Gerät oder ein Gerät mit mehreren Bildschirmen. In all diesen Fällen spielt die physische Bildschirmgröße keine Rolle bei der Entscheidung, wie Inhalte angezeigt werden.

Mehrere Geräte mit App-Fenstern unterschiedlicher Größe
Abbildung 1. Die Fenstergröße kann sich vom physischen Gerät oder der Displaygröße unterscheiden.

Aus demselben Grund solltest du es vermeiden, deine App für eine bestimmte Ausrichtung oder ein bestimmtes Seitenverhältnis festzulegen. Während das Gerät selbst eine bestimmte Ausrichtung hat, kann deine App aufgrund der Größe des Fensters eine andere Ausrichtung haben. Auf einem Tablet im Querformat und im Mehrfenstermodus kann eine App beispielsweise im Hochformat angezeigt werden, da sie höher als breit ist.

Vermeiden Sie außerdem zu ermitteln, ob es sich bei dem Gerät um ein Smartphone oder Tablet handelt. Was genau als Tablet gilt, ist eher subjektiv: Beruht es aufgrund einer bestimmten Größe oder eines bestimmten Seitenverhältnisses oder einer Kombination aus Größe und Seitenverhältnis? Wenn neue Formfaktoren entstehen, können sich diese Annahmen ändern und die Unterscheidung verliert an Bedeutung.

Anstatt eine der vorherigen Strategien auszuprobieren, verwenden Sie Haltepunkte und Fenstergrößenklassen.

Haltepunkte und Fenstergrößenklassen

Der eigentliche Teil des Bildschirms, der Ihrer App zugewiesen ist, ist das Fenster der App. Es kann den gesamten Bildschirm oder einen Teil des Bildschirms einnehmen. Nutze daher die Fenstergröße, wenn du übergeordnete Entscheidungen zum Layout deiner App triffst.

Suchen Sie beim Design für mehrere Formfaktoren nach Schwellenwerten, bei denen sich diese übergeordneten Entscheidungen in unterschiedliche Richtungen verzweigen. Zu diesem Zweck bietet das Raster für responsives Layout von Material Design Haltepunkte für Breite und Höhe, mit denen Sie Rohgrößen in diskrete, standardisierte Gruppen, die als Fenstergrößenklassen bezeichnet werden, zuordnen können. Aufgrund der Allgegenwärtigkeit des vertikalen Scrollens spielen bei den meisten Apps vor allem die Breitenklassen eine wichtige Rolle. Die meisten Apps lassen sich also mit nur wenigen Haltepunkten für alle Bildschirmgrößen optimieren, sodass sie für alle Bildschirmgrößen optimiert werden können. Weitere Informationen zu Fenstergrößenklassen finden Sie unter Fenstergrößenklassen.

Persistente UI-Elemente

In den Layoutrichtlinien von Material Design werden Bereiche für App-Leisten, -Navigation und -Inhalte definiert. In der Regel sind die ersten beiden persistente UI-Elemente am Stamm der Ansichtshierarchie oder sehr nah. „Dauerhaft“ bedeutet nicht unbedingt, dass die Ansicht immer sichtbar ist. Sie bleibt an ihrer Position, während sich andere Inhaltsansichten bewegen oder ändern. Ein Navigationselement könnte sich beispielsweise in einer Schiebeleiste befinden, die sich außerhalb des Bildschirms befindet, aber die Leiste ist immer vorhanden.

Persistente Elemente können responsiv sein und nehmen entweder die volle Breite oder die volle Höhe des Fensters ein. Verwenden Sie daher am besten Größenklassen, um zu entscheiden, wo sie platziert werden sollen. Dadurch wird der Bereich begrenzt, der für die Inhalte übrig bleibt. Im folgenden Snippet verwendet die Aktivität eine untere Leiste für kompakte Bildschirme und eine obere App-Leiste für größere Bildschirme. Die qualifizierten Layouts verwenden Haltepunkte für die Breite, wie oben beschrieben.

<!-- res/layout/main_activity.xml -->

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- content view(s) -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
</androidx.constraintlayout.widget.ConstraintLayout>


<!-- res/layout-w600dp/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        ... />

    <!-- content view(s) -->
</androidx.constraintlayout.widget.ConstraintLayout>

Inhalte

Nachdem Sie die persistenten UI-Elemente positioniert haben, nutzen Sie den verbleibenden Platz für Inhalte, z. B. indem Sie ein NavHostFragment mit dem Navigationsdiagramm Ihrer App verwenden. Weitere Informationen finden Sie unter Navigation für responsive UIs.

Sicherstellen, dass alle Daten für verschiedene Größen verfügbar sind

In den meisten App-Frameworks wird heute ein Datenmodell verwendet, das von den Android-Komponenten getrennt ist, die zur Benutzeroberfläche beitragen (Aktivitäten, Fragmente und Ansichten). Bei Jetpack wird diese Rolle normalerweise von ViewModels übernommen, die den zusätzlichen Vorteil haben, dass sie auch bei Konfigurationsänderungen erhalten bleiben. Weitere Informationen finden Sie unter ViewModel – Übersicht.

Bei der Implementierung eines Layouts, das sich an verschiedene Größen anpasst, kann es verlockend sein, basierend auf der aktuellen Größe ein anderes Datenmodell zu verwenden. Dies verstößt jedoch gegen das Prinzip des unidirektionalen Datenflusses. Daten sollten nach unten bis zu Datenansichten fließen und Ereignisse wie Nutzerinteraktionen nach oben. Das Erstellen einer Abhängigkeit in die andere Richtung, bei der das Datenmodell von der Konfiguration der UI-Ebene abhängt, erschwert dies erheblich. Wenn sich die Größe der Anwendung ändert, müssen Sie dann die Konvertierung von einem Datenmodell in ein anderes berücksichtigen.

Lassen Sie stattdessen Ihr Datenmodell die größte Größenklasse verarbeiten. Anschließend können Sie Inhalte in der Benutzeroberfläche selektiv ein-, ausblenden oder neu positionieren, um sie an die aktuelle Größenklasse anzupassen. Im Folgenden finden Sie einige Strategien, mit denen Sie entscheiden können, wie sich Ihr Layout beim Wechsel zwischen Größenklassen verhalten soll.

Inhalte maximieren

Kanonische Layouts: Feed

Ein größerer Platz bietet die Möglichkeit, Inhalte einfach zu vergrößern und neu zu formatieren, damit sie für mehr Nutzer zugänglich sind.

Sammlungen vergrößern Viele Apps zeigen eine Sammlung von Elementen in einem scrollbaren Container an, z. B. RecyclerView oder ScrollView. Wenn ein Container automatisch größer wird, können mehr Inhalte angezeigt werden. Der Inhalt des Containers darf jedoch nicht zu stark gestreckt oder verzerrt werden. Du solltest beispielsweise mit einem RecyclerView einen anderen Layoutmanager wie GridLayoutManager, StaggeredGridLayoutManager oder FlexboxLayout verwenden, wenn die Breite nicht kompakt ist.

Ein auf- und zugeklapptes Gerät, das zeigt, wie verschiedene Layoutmanager die App je nach Breitenklasse unterschiedlich anordnen.
Abbildung 2. Unterschiedliche Layoutmanager für unterschiedliche Fenstergrößenklassen

Einzelne Elemente können auch eine andere Größe oder Form haben, um mehr Inhalt anzuzeigen und Elementgrenzen leichter zu unterscheiden.

Hebe ein Hero-Element hervor. Wenn das Layout einen bestimmten Schwerpunkt hat, z. B. ein Bild oder Video, maximieren Sie es, wenn sich das App-Fenster vergrößert, um die Aufmerksamkeit des Nutzers aufrechtzuerhalten. Andere unterstützende Elemente können um oder unter der Hero-Ansicht angeordnet werden.

Es gibt viele Möglichkeiten, ein solches Layout zu erstellen, aber ConstraintLayout eignet sich besonders gut für diesen Zweck, da es viele Möglichkeiten bietet, die Größe einer untergeordneten Ansicht zu beschränken (z. B. prozentual oder durch Erzwingen eines Seitenverhältnisses) und ihre untergeordneten Elemente relativ zu sich selbst oder zu anderen untergeordneten Elementen zu positionieren. Weitere Informationen zu all diesen Funktionen finden Sie unter Responsive UI mit ConstraintLayout erstellen.

Minimierbare Inhalte standardmäßig anzeigen. Wenn Platz verfügbar ist, können Sie Inhalte präsentieren, die sonst nur durch zusätzliche Nutzerinteraktionen wie Tippen, Scrollen oder Gesten zugänglich wären. Inhalte, die in einer kompakten Oberfläche mit Tabs angezeigt werden, können beispielsweise in Spalten oder in eine Liste angeordnet werden, wenn mehr Platz verfügbar ist.

Gewinnmargen erhöhen. Wenn der Raum so groß ist, dass Sie selbst nach der Nutzung aller Inhalte keine ansprechende Passform finden können, erweitern Sie die Ränder des Layouts, sodass der Inhalt zentriert bleibt und die einzelnen Ansichten natürliche Größen und Abstände dazwischen haben.

Alternativ kann eine Vollbildkomponente in eine unverankerte Dialog-UI umgewandelt werden. Das ist besonders gut geeignet, wenn die Komponente einen bestimmten Fokus auf eine unmittelbare Aufgabe eines Nutzers legt, z. B. das Schreiben einer E-Mail oder das Erstellen eines Kalendertermins.

Standardsmartphone mit einem Dialogfeld im Vollbildmodus und einem aufgeklappten faltbaren Smartphone mit demselben Dialogfeld wie ein unverankertes Fenster.
Abbildung 3: Das Dialogfeld im Vollbildmodus wurde in ein Standarddialogfeld mit mittlerer und maximierter Breite umgewandelt.

Inhalte hinzufügen

Kanonische Layouts: unterstützender Bereich, Listenansicht mit Details

Verwenden Sie ein unterstützendes Fenster. In einem unterstützenden Bereich werden zusätzliche Inhalte oder Kontextaktionen in Bezug auf den primären Inhalt angezeigt, z. B. Kommentare in einem Dokument oder Elemente in einer Playlist. Normalerweise wird das untere Drittel des Bildschirms für die maximierte Höhe und das nachgestellte Drittel für die maximierte Breite verwendet.

Es ist wichtig zu überlegen, wo dieser Inhalt platziert werden soll, wenn nicht genügend Platz vorhanden ist, um den Bereich anzuzeigen. Hier sind einige Alternativen:

  • Seitliche Leiste am hinteren Rand mit DrawerLayout
  • Untere Leiste mit BottomSheetBehavior
  • Menü- oder Pop-up-Fenster, auf das durch Tippen auf ein Menüsymbol zugegriffen werden kann
Abbildung 4: Alternative Möglichkeiten zur Präsentation zusätzlicher Inhalte in einem unterstützenden Bereich.

Erstellen Sie ein Layout mit zwei Bereichen. Bei großen Bildschirmen kann eine Kombination von Funktionen dargestellt werden, die auf kleineren Bildschirmen normalerweise separat angezeigt werden. Ein gängiges Interaktionsmuster in vielen Apps besteht darin, eine Liste von Elementen wie Kontakten oder Suchergebnissen anzuzeigen und zu den Details eines Elements zu wechseln, wenn das Element ausgewählt wird. Anstatt die Liste für größere Bildschirme zu vergrößern, können Sie die Listen-Detailansicht verwenden, um beide Elemente in einem Zweifensterlayout nebeneinander anzuzeigen. Im Gegensatz zu einem unterstützenden Bereich ist der Detailbereich einer Listendetailansicht ein eigenständiges Element, das auf kleineren Bildschirmen unabhängig voneinander angezeigt werden kann.

Mit dem Widget SlidingPaneLayout kannst du eine Listenansicht mit Detailinformationen implementieren. Dieses Widget berechnet automatisch anhand des für die beiden Bereiche angegebenen layout_width-Werts, ob genügend Platz vorhanden ist, um beide Bereiche zusammen anzuzeigen. Verbleibender Platz kann mithilfe von layout_weight verteilt werden. Ist nicht genügend Platz vorhanden, nutzt jeder Bereich die volle Breite des Layouts und der Detailbereich gleitet entweder aus dem Bildschirm heraus oder über den Listenbereich.

SlidingPaneLayout, das beide Bereiche eines Listen-Detail-Layouts auf einem Gerät mit großem Display zeigt.
Abbildung 5: SlidingPaneLayout mit zwei Bereichen in maximierter Breite und einem Bereich in kleiner Breite.

Unter Layout mit zwei Bereichen erstellen finden Sie weitere Details zur Verwendung von SlidingPaneLayout. Beachten Sie außerdem, dass sich dieses Muster auf die Strukturierung des Navigationsdiagramms auswirken kann (siehe Navigation für responsive UIs).

Zusätzliche Ressourcen