Layouts anpassen

Beim adaptiven Design werden Layouts entworfen, die sich an bestimmte Breakpoints und Geräte anpassen.

So implementieren Sie adaptive Layouts effektiv:

  • Berücksichtigen Sie zuerst die Breite der Fensterklasse des Geräts, um Layoutänderungen zu bestimmen, und passen Sie dann die Höhe an.
  • Android nutzt ähnliche Konzepte wie beim responsiven Webdesign, bei denen flexible Ränder und Bilder verwendet werden, um Layouts zu erstellen, die effektiv auf ihren Kontext reagieren.

Bildschirm einer Produktivitäts-App auf Mobilgeräten und Tablets

Designrichtlinien zum Anpassen von Layouts an größere Bildschirmgrößen finden Sie im Entwicklerleitfaden Verschiedene Bildschirmgrößen unterstützen in Compose und auf der M3-Seite Layout anwenden. In der Galerie für kanonische Android-Layouts für große Displays finden Sie Beispiele für die Implementierung von Layouts für große Displays.

Adaptiv denken

Beim Designen Ihrer App sollte „Adaptive“ die Standardeinstellung sein. Der Android-Mobilfunkmarkt entwickelt sich ständig weiter. Sie können also nicht nur an Smartphones denken. Stattdessen sollte es alles von Smartphones über Falt-Smartphones bis hin zu Tablets und alles dazwischen umfassen.

Bestimmte Funktionen und Anwendungsfälle sind möglicherweise nicht für jede Bildschirmgröße oder jeden Formfaktor geeignet. Das adaptive Design bietet Nutzern mehr Freiheit in Bezug auf Ergonomie, Nutzerfreundlichkeit und App-Qualität.

Methoden und Qualität

Beginnen Sie mit dem Design von wichtigen Bildschirmen, die die wesentlichen Konzepte oder Ihre App vermitteln. Verwenden Sie dabei Klassen als Breakpoints, die als Richtlinien für den Rest Ihrer App dienen. Diese Hero-Erlebnisse können differenzierte adaptive und Formfaktor-Qualitäten hervorheben. Oder Sie gestalten Inhalte von Grund auf responsiv, indem Sie angeben, wie Inhalte eingeschränkt, maximiert oder umgebrochen werden sollen.

Das sollten Sie tun

Legen Sie eine maximale Breite für Inhalte und Komponenten fest, um zu verhindern, dass sie sich über die gesamte Breite erstrecken.

Das sollten Sie nicht tun

Inhalte dürfen sich über die gesamte Breite erstrecken.

Das sollten Sie tun

Denken Sie in Bezug auf Containment oder Bereiche.

Verwenden Sie intrinsische und visuelle Container, um Elemente zu gruppieren. Bereiche können ein- und ausgefahren, minimiert, maximiert, eingeschränkt oder eingeblendet werden. Wenn Sie mit Bereichen arbeiten, wird das Design für alle Mobilgeräte einfacher.

Lassen Sie zu, dass sich Elemente verschieben und neu anordnen, indem Sie sich darauf konzentrieren, wie sich Elemente an das Raster anpassen. Berücksichtigen Sie vertikale Änderungen für Elemente und kombinieren Sie sie mit Einschränkungen und Änderungen der Darstellung.

Eine hochwertige App sollte den differenzierten Tier in den Qualitätsrichtlinien für Apps und den Qualitätsrichtlinien für große Bildschirme entsprechen.

Weitere Informationen zu Layouts finden Sie auf der Seite Material Design 3 (M3): Layout.