Window Size Class — wat is het, maatklassen en ontwikkeling

Wat is Window Size Class?

Window Size Class is een API van het Android-platform, onderdeel van de Jetpack WindowManager-bibliotheek, die de beschikbare ruimte van het applicatievenster classificeert in drie categorieën. In tegenstelling tot de traditionele benadering met resource-kwantificatoren (small/large/xlarge), biedt Window Size Class een discrete set waarden waar de ontwikkelaar op kan vertrouwen bij het ontwerpen van de interface.

De API verscheen in Android 7.0 Nougat als onderdeel van ondersteuning voor de modus met meerdere vensters, maar actieve implementatie begon met Jetpack WindowManager 1.1 (2022). Google beveelt Window Size Class aan als het belangrijkste hulpmiddel voor het bouwen van adaptieve lay-outs in plaats van het controleren van de schermbreedte via Display.getSize().

De classificatie is gebaseerd op de vensterbreedte in dp, niet op fysieke grootte of pixeldichtheid. Dit betekent dat twee apparaten met verschillende resoluties maar dezelfde breedte in dp dezelfde klasse krijgen — de interface zal voorspelbaar hetzelfde zijn.

Drie venstergrootteklassen van Android

Compact — klasse voor vensters met een breedte tot 600 dp. Telefoon in portretmodus, de meeste opvouwbare telefoons (Galaxy Z Flip) in gesloten toestand. De interface wordt in één kolom gebouwd, navigatie via Bottom Navigation.

Medium — klasse voor vensters met een breedte van 600–840 dp. Tablet in portret, telefoon in landschap, opvouwbaar apparaat in halfopen toestand. De interface gebruikt twee kolommen — bijvoorbeeld lijst links en details rechts. Navigation Rail vervangt Bottom Navigation.

Expanded — klasse voor vensters met een breedte vanaf 840 dp. Tablet in landschap, desktopvenster, opvouwbaar apparaat in uitgevouwen toestand. De interface kan drie of meer panelen gebruiken, Permanent Navigation Drawer, werkbalken.

In Material Design 3 zijn voor elke klasse adaptieve componenten gedefinieerd: Navigation Rail voor Medium, Navigation Drawer voor Expanded, Bottom Navigation voor Compact. De ontwikkelaar hoeft geen breakpoints te kiezen — deze zijn al ingesteld door de API.

Hoe Window Size Class werkt

Window Size Class wordt berekend op basis van de huidige breedte van het applicatievenster in dp, rekening houdend met systeemelementen — statusbalk, navigatiepaneel, schermverdeling in Split Screen. De API reageert op wijzigingen in de vensterconfiguratie: rotatie van het apparaat, ingaan van de modus met meerdere vensters, uitvouwen van het opvouwbare apparaat.

Om de klasse te verkrijgen, wordt de klasse WindowSizeClass uit de bibliotheek androidx.window gebruikt. De ontwikkelaar abonneert zich op Flow (Kotlin) of LiveData (Java), die automatisch de klasse bijwerkt bij elke wijziging van de venstergrootte — zonder handmatige verwerking van onConfigurationChanged.

Classificatie vindt plaats in drie stappen. Eerste — meting van de huidige vensterbreedte in pixels. Tweede — conversie naar dp via DisplayMetrics.density. Derde — vergelijking van de verkregen waarde met drempels: minder dan 600 dp — Compact, 600–840 — Medium, vanaf 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // compacte breedte
    WindowWidthSizeClass.MEDIUM  -> // middelgrote breedte
    WindowWidthSizeClass.EXPANDED -> // uitgebreide breedte
}

Naast breedte (windowWidthSizeClass) biedt de API een klasse voor vensterhoogte (windowHeightSizeClass) — handig voor liggende oriëntatie en desktopvensters.

Window Size Class in Jetpack Compose

In Jetpack Compose wordt Window Size Class gebruikt via de functie currentWindowAdaptiveInfo(), die WindowAdaptiveInfo retourneert met breedte- en hoogteklassen. Deze functie houdt niet alleen rekening met de venstergrootte, maar ook met het invoertype (toetsenbord, muis, touch) — via WindowPosture en WindowLayoutInfo.

Typisch scenario — schakelen tussen lay-outs afhankelijk van de klasse. Bijvoorbeeld op Compact wordt een BottomSheet met selectie getoond, op Medium — een zijpaneel, op Expanded — een permanente Navigation Drawer.

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

In Material Design 3 passen NavigationSuiteScaffold-componenten zich automatisch aan Window Size Class aan — de ontwikkelaar hoeft geen conditionele logica te schrijven.

Window Size Class en Material Design 3

Material Design 3 (Material You) is volledig geïntegreerd met Window Size Class. Het adaptive layout-systeem in Material 3 bepaalt welke navigatiecomponent in elke klasse moet worden gebruikt: BottomNavigation voor Compact, NavigationRail voor Medium, NavigationDrawer voor Expanded.

Deze integratie werkt op het niveau van Adaptive API, die Window Size Class combineert met andere signalen — FoldState (opvouwbaar apparaat) en WindowPosture (schermpositie). Adaptive API is beschikbaar via de bibliotheek material3-adaptive.

Material 3 biedt vier adaptieve componenten op hoog niveau: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold en AdaptiveSheet. Elk van hen verandert zijn gedrag op basis van Window Size Class zonder extra configuratie.

Voordelen van adaptieve lay-outs

Het gebruik van Window Size Class biedt drie belangrijke voordelen in mobiele ontwikkeling. Eerste — voorspelbaarheid: in plaats van honderden combinaties van schermformaten werkt de ontwikkelaar met drie klassen. Dit vermindert het aantal testscenario's en fouten met betrekking tot lay-out drastisch.

Tweede — automatische aanpassing aan de modus met meerdere vensters. Wanneer de gebruiker Split Screen opent, verandert de vensterbreedte — Window Size Class wordt onmiddellijk herberekend en de interface past zich aan. Zonder deze API toont de app in een gedeeld scherm een ingekorte versie van de telefooninterface.

Derde — consistentie met Material Design 3. Google heeft Window Size Class ingebouwd in het systeem van adaptieve componenten, dus interfaces gebouwd op Material 3 volgen automatisch de aanbevelingen van Google voor groot scherm ontwerp zonder extra werk.