Edge-to-Edge-Design bedeutet, dass Sie hinter der Systemstatusleiste und der Navigationsleiste zeichnen sollten sowie auf anderen System-UI-Elementen oder Bereichen, die durch eine Kamera verdeckt werden (Display Cutouts). (https://developer.android.com/develop/ui/views/layout/edge-to-edge). Leider unterstützt das Vorschausystem in Android Studio nicht die Anzeige von Systemleisten oder Display Cutouts, was die Entwicklung solcher Designs erschwert. Um das Problem zu lösen, wurde spezieller Code entwickelt, der WindowInsets in die Jetpack Compose-Vorschau integriert. Dadurch erhalten Entwickler ein realitätsnahes Feedback darüber, wie ihre Anwendung unter Berücksichtigung von Statusleisten, Navigationsleisten und Kameraaussparungen aussehen wird.

Beispiel für einen vereinfachten Compose-Code:

@Composable 
fun MainLayout() { 
    Column { 
        LazyColumn( 
            modifier = Modifier 
                .fillMaxWidth() 
                .weight(1f) 
        ) { 
            // list content items 
        } 
        AppNavigationBar() 
    } 
} 

Nach der Aktivierung müssen Sie Ihr UI-Design anpassen, um sicherzustellen, dass wichtige Inhalte und Bedienelemente nicht von den Systemleisten verdeckt werden. Ein typisches Szenario hierfür ist eine Anwendung mit einer scrollbaren Liste und einer Navigationsleiste.

Durch die Anwendung des Modifiers windowInsetsPadding auf das umschließende Column-Layout werden die Inhalte so angepasst, dass sie weder hinter die Systemleisten rutschen noch am Bildschirmrand abgeschnitten werden. Diese Anpassung stellt sicher, dass alle UI-Elemente vollständig sichtbar und zugänglich sind.

@Composable 
fun MainLayout() { 
--  Column { 
++  Column( 
++      Modifier.windowInsetsPadding(WindowInsets.safeDrawing) 
++  ) { 
        LazyColumn( 
            modifier = Modifier 
                .fillMaxWidth() 
                .weight(1f) 
        ) { 
            // list content items 
        } 
        AppNavigationBar() 
    } 
} 

Das Problem mit den überlappenden Systemleisten wurde behoben. Allerdings gibt es immer noch einige ästhetische Probleme mit der LazyColumn-Liste. Der scrollende Inhalt wird am oberen Bildschirmrand abgeschnitten und der Hintergrund der App-Navigationsleiste erreicht nicht den unteren Bildschirmrand.
 

Aspekt 2: Erstellung von zweigeteilten Layouts in Edge-to-Edge Designs in Android

Die Optimierung des Layouts für Edge-to-Edge-Designs erfordert den Einsatz von Padding innerhalb der einzelnen UI-Komponenten. Eine pauschale Anwendung von Padding auf den gesamten Inhalt kann zu unerwünschten Effekten führen, wie beispielsweise einem inkonsistenten Erscheinungsbild des Inhalts Ihrer Anwendung. Ein gezielterer Ansatz ermöglicht es, die Vorteile des Edge-to-Edge-Designs voll auszuschöpfen, ohne die Benutzererfahrung zu beeinträchtigen.

Implementieren Sie dies in Ihrem Jetpack Compose Code wie folgt:

@Composable 
fun MainLayout() { 
    Column { 
        val contentPadding = WindowInsets.safeDrawing.asPaddingValues() 
        LazyColumn( 
            modifier = Modifier 
                .fillMaxWidth() 
                .weight(1f), 
            contentPadding = contentPadding 
        ) { 
            // list content items 
        } 
        AppNavigationBar( 
            Modifier.windowInsetsPadding(WindowInsets.safeDrawing) 
        ) 
    } 
} 

Bei einem Layout mit einer Liste (z.B. LazyColumn) und einer Navigationsleiste (z.B. AppNavigationBar) ist es wichtig, dass das Padding für die WindowInsets nicht auf alle Seiten angewendet wird. Beispielsweise sollte die LazyColumn nur das obere Padding berücksichtigen, da sie sich nicht am unteren Bildschirmrand befindet. Dadurch wird ein unnötiger Abstand zur unteren Navigationsleiste verhindert. Ebenso sollte die Navigationsleiste nur am unteren Rand ein Padding erhalten, damit der Abstand zum Hauptinhalt nicht zu groß wird.

Durch die Verwendung von WindowInsets.safeDrawing.only(WindowInsetsSides.Top) für die LazyColumn und WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom) für die AppNavigationBar wird sichergestellt, dass jedes UI-Element abhängig von seiner Position auf dem Bildschirm das richtige Padding erhält, ohne dass wichtige Inhalte durch die Systemleisten überdeckt werden oder zu große Abstände entstehen.

Der folgende Code löst dieses Problem:

val listContentPadding = WindowInsets.safeDrawing 
    .only(WindowInsetsSides.Top) 
    .asPaddingValues() 
LazyColumn( 
    modifier = Modifier 
        .fillMaxWidth() 
        .weight(1f), 
    contentPadding = listContentPadding 
) { 
    // list content items 
} 
val navigationBarPadding = WindowInsets.safeDrawing 
    .only(WindowInsetsSides.Bottom) 
    .asPaddingValues() 
AppNavigationBar( 
    Modifier.windowInsetsPadding(navigationBarPadding) 
) 

Aspekt 3: Querformat-Ausrichtung für Edge-to-Edge-Designs in Android

Während Anpassungen für das Hochformat während des Entwicklungsprozesses häufig berücksichtigt werden, stellt das Querformat spezifische Herausforderungen, insbesondere bei der Verwendung von Edge-to-Edge-Designs. Hier ist ein Beispiel für ein Design im Querformat mit einer Navigationsleiste am linken Rand neben dem Listeninhalt.

Aspekt 6: Wie man verhindert, dass Listenelemente die Statusleiste in Edge-to-Edge-Designs überdecken

Trotz korrekter Implementierung für alle WindowInsets gibt es Probleme mit der Liste, da sie die Statusleiste überlappt. Wenn die Liste hinter die Statusleiste gescrollt wird, ist die Statusleiste nicht mehrlesbar. Auch die untere Navigation des Systems wird unleserlich. Um dies zu vermeiden, kann ein dynamisches Padding verwendet werden, das den Inhalt nahtlos unter den Systemleisten verbirgt.

Aspekt 7: Optimierung des mittig zweigeteilten Layouts in Edge-to-Edge-Designs

Bei der Gestaltung eines zweigeteilten Layouts mit einer Liste und einer Detailansicht sind einige Faktoren zu beachten. Bei dem nachfolgenden Bild haben beide Elemente die gleiche Breite, d.h. die Hälfte des verfügbaren Platzes. Allerdings scheint die Detailansicht weniger verfügbaren Platz zu haben, da die Insets nicht von der Mittelpunktberechnung ausgeschlossen wurden. Dieses Layout könnte für Ihre Zwecke geeignet sein, aber wenn Sie die Insets von der Mittelpunktberechnung ausschließen möchten, wird der Code komplizierter.

Aspekt 8: Erstellung von zweiteiligen Layouts mit Animationen für Edge-to-Edge-Designs

Eine weitere Herausforderung kann entstehen, wenn Sie mit einem dynamischen Layout arbeiten, das die Möglichkeit bietet, eine Seite zu entfernen. Der Prozess des Ein- und Ausschiebens einer Seite mit einer Animation kann sogar noch komplizierter sein, da er die Berechnung der verbrauchten Insets auf der Grundlage der tatsächlichen Größe der beiden Komponenten erfordert.

Die Komponente 'Elementliste' in der Abbildung reicht bis zum unteren Bildschirmrand, das WindowInset enthält jedoch nicht die Systemnavigationsleiste. Das sichtbare Padding stammt aus der gleitenden Detailansicht. Daher ist es notwendig den rechten Teil des WindowInsets während der Animation zu berechnen. Ein Beispiel hierfür ist unten dargestellt. Beachten Sie, dass wir unsere eigenen Layout-Manager entwickeln müssen und daher nicht die von Compose zur Verfügung gestellten Layout-Manager verwenden können.

Dieser Ansatz ermöglicht eine realistische Darstellung von UI-Komponenten in Bezug auf die verschiedene Bildschirm Ausrichtungen und Geräte Konfigurationen. Entwickler können somit fundierte Designentscheidungen treffen und dadurch die Benutzererfahrung ihrer Anwendungen deutlich verbessern.
 

Fazit: Meistern Sie die Herausforderungen von Edge-to-Edge-Designs in Android

Edge-to-Edge-Designs sind ein Schlüsselelement, um eine beeindruckende und immersive Nutzererfahrung zu bieten. Sie nutzen den verfügbaren Bildschirmplatz maximal aus und lassen die Grenzen zwischen Anwendung und Hardware verschwimmen. Die Qualität mobiler Anwendungen beeinflusst maßgeblich das Nutzererlebnis und den Erfolg der Anwendung. Jetpack Compose, das moderne Toolkit von Google für Android-Entwickler, vereinfacht und beschleunigt die Implementierung von Designs. Dieser Artikel verdeutlicht durch praktische Beispiele, wie Sie diese Designs effektiv umsetzen können.

Um Ihre App zu bereichern und den Erwartungen Ihrer Nutzer gerecht zu werden, stehen Ihnen mit Jetpack Compose zahlreiche moderne UI-Komponenten zur Verfügung. Die spezialisierte API für WindowInsets und die Unterstützung der Material3-Komponenten sind erst der Anfang. Die Herausforderungen bei der Implementierung von Edge-to-Edge-Designs sind zwar nicht zu unterschätzen, können aber mit den richtigen Techniken und einem tiefen Verständnis der verfügbaren Werkzeuge erfolgreich gemeistert werden.

Wenn Sie Ihre Android-Apps verbessern und ein immersives Nutzererlebnis schaffen möchten, ist jetzt der ideale Zeitpunkt, um Jetpack Compose in Ihre Entwicklungsarbeit zu integrieren. Unsere Experten unterstützen Sie bei jedem Schritt und sorgen dafür, dass Ihre Anwendungen nicht nur visuell ansprechend, sondern auch funktional überzeugend sind.

Machen Sie jetzt den ersten Schritt in Richtung zukunftsweisender App-Entwicklung mit Edge-to-Edge-Designs. Kontaktieren Sie uns für eine Beratung oder weitere Informationen zu unseren Dienstleistungen im Bereich der App-Entwicklung.

Wenn Sie zusätzliche Funktionen benötigen, wie z. B. Unterstützung für IME oder faltbare Geräte, reichen Sie bitte einen Feature-Request ein oder fügen Sie diese selbst hinzu: https://github.com/timo-drick/compose_libraries/tree/main/edge_to_edge_preview_lib