Window Size Class — was es ist, Größenklassen und Entwicklung

Was ist Window Size Class?

Window Size Class ist eine API der Android-Plattform, die in der Jetpack WindowManager-Bibliothek enthalten ist und den verfügbaren Platz des Anwendungsfensters in drei Kategorien einteilt. Im Gegensatz zum traditionellen Ansatz mit Ressourcenqualifizierern (small/large/xlarge) bietet Window Size Class einen diskreten Satz von Werten, auf die sich der Entwickler bei der Gestaltung der Oberfläche stützen kann.

Die API erschien in Android 7.0 Nougat als Teil der Unterstützung des Mehrfenstermodus, aber die aktive Einführung begann mit Jetpack WindowManager 1.1 (2022). Google empfiehlt Window Size Class als primäres Werkzeug zum Erstellen adaptiver Layouts anstatt die Bildschirmbreite über Display.getSize() zu überprüfen.

Die Klassifizierung basiert auf der Fensterbreite in dp, nicht auf der physischen Größe oder Pixeldichte. Das bedeutet, dass zwei Geräte mit unterschiedlicher Auflösung aber gleicher Breite in dp dieselbe Klasse erhalten — die Oberfläche wird vorhersagbar identisch sein.

Drei Fenstergrößenklassen in Android

Compact — Klasse für Fenster bis 600 dp Breite. Telefon im Hochformat, die meisten Foldables (Galaxy Z Flip) im gefalteten Zustand. Die Oberfläche wird in einer Spalte aufgebaut, Navigation über Bottom Navigation.

Medium — Klasse für Fenster von 600–840 dp Breite. Tablet im Hochformat, Telefon im Querformat, Foldable im halb geöffneten Zustand. Die Oberfläche verwendet zwei Spalten — zum Beispiel eine Liste links und Details rechts. Navigation Rail ersetzt Bottom Navigation.

Expanded — Klasse für Fenster ab 840 dp Breite. Tablet im Querformat, Desktop-Fenster, Foldable im geöffneten Zustand. Die Oberfläche kann drei oder mehr Panels, Permanent Navigation Drawer und Werkzeugpanels verwenden.

In Material Design 3 sind für jede Klasse adaptive Komponenten definiert: Navigation Rail für Medium, Navigation Drawer für Expanded, Bottom Navigation für Compact. Der Entwickler muss keine Breakpoints auswählen — sie sind bereits von der API definiert.

Wie Window Size Class funktioniert

Window Size Class wird basierend auf der aktuellen Breite des Anwendungsfensters in dp berechnet, unter Berücksichtigung von Systemelementen — Statusleiste, Navigationsleiste, Bildschirmteilung im Split-Screen-Modus. Die API wird bei Änderung der Fensterkonfiguration ausgelöst: Gerätedrehung, Eintritt in den Mehrfenstermodus, Aufklappen eines Foldable-Geräts.

Zum Abrufen der Klasse wird die Klasse WindowSizeClass aus der Bibliothek androidx.window verwendet. Der Entwickler abonniert einen Flow (Kotlin) oder LiveData (Java), der die Klasse bei jeder Fenstergrößenänderung automatisch aktualisiert — ohne manuelle onConfigurationChanged-Behandlung.

Die Klassifizierung erfolgt in drei Schritten. Erster — Messen der aktuellen Fensterbreite in Pixeln. Zweiter — Konvertierung in dp über DisplayMetrics.density. Dritter — Vergleich des erhaltenen Werts mit den Schwellenwerten: weniger als 600 dp — Compact, 600–840 — Medium, ab 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // compact width
    WindowWidthSizeClass.MEDIUM  -> // medium width
    WindowWidthSizeClass.EXPANDED -> // expanded width
}

Neben der Breite (windowWidthSizeClass) bietet die API eine Klasse für die Fensterhöhe (windowHeightSizeClass) — nützlich für die Querformat-Orientierung und Desktop-Fenster.

Window Size Class in Jetpack Compose

In Jetpack Compose wird Window Size Class über die Funktion currentWindowAdaptiveInfo() verwendet, die WindowAdaptiveInfo mit Breiten- und Höhenklassen zurückgibt. Diese Funktion berücksichtigt nicht nur die Fenstergröße, sondern auch den Eingabetyp (Tastatur, Maus, Touch) — über WindowPosture und WindowLayoutInfo.

Ein typisches Szenario ist das Umschalten zwischen Layouts je nach Klasse. Zum Beispiel wird auf Compact ein BottomSheet mit Auswahl angezeigt, auf Medium — ein Seitenpanel, auf Expanded — ein permanenter Navigation Drawer.

@Composable
fun AdaptiveNavigation(windowSizeClass: WindowWidthSizeClass) {
    when (windowSizeClass) {
        WindowWidthSizeClass.COMPACT -> BottomNavigation()
        WindowWidthSizeClass.MEDIUM  -> NavigationRail()
        WindowWidthSizeClass.EXPANDED -> NavigationDrawer()
    }
}

In Material Design 3 passen sich die Komponenten NavigationSuiteScaffold automatisch an Window Size Class an — der Entwickler muss keine bedingte Logik schreiben.

Window Size Class und Material Design 3

Material Design 3 (Material You) ist vollständig in Window Size Class integriert. Das adaptive Layout-System in Material 3 bestimmt, welche Navigationskomponente für jede Klasse verwendet wird: BottomNavigation für Compact, NavigationRail für Medium, NavigationDrawer für Expanded.

Diese Integration funktioniert auf der Ebene der Adaptive API, die Window Size Class mit anderen Signalen kombiniert — FoldState (Foldable-Gerät) und WindowPosture (Bildschirmposition). Die Adaptive API ist über die Bibliothek material3-adaptive verfügbar.

Material 3 bietet vier adaptive Top-Level-Komponenten: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold und AdaptiveSheet. Jede von ihnen ändert ihr Verhalten je nach Window Size Class ohne zusätzliche Konfiguration.

Vorteile adaptiver Layouts

Die Verwendung von Window Size Class bietet drei Hauptvorteile in der mobilen Entwicklung. Erster — Vorhersagbarkeit: Anstatt hunderter Kombinationen von Bildschirmgrößen arbeitet der Entwickler mit drei Klassen. Dies reduziert die Anzahl der Testszenarien und Bugs im Zusammenhang mit Layout radikal.

Zweiter — automatische Anpassung an den Mehrfenstermodus. Wenn der Benutzer in den Split-Screen-Modus wechselt, ändert sich die Fensterbreite — Window Size Class berechnet sofort neu und die Oberfläche passt sich an. Ohne diese API zeigt die App im geteilten Bildschirm eine abgespeckte Version der Telefonoberfläche.

Dritter — Konsistenz mit Material Design 3. Google hat Window Size Class in das adaptive Komponentensystem eingebaut, daher folgen auf Material 3 aufgebaute Oberflächen automatisch den Google-Empfehlungen für Large-Screen-Design ohne zusätzliche Arbeit.