Window Size Class — ce que c'est, classes de taille et développement

Qu'est-ce que Window Size Class ?

Window Size Class est une API de la plateforme Android incluse dans la bibliothèque Jetpack WindowManager qui classe l'espace disponible de la fenêtre de l'application en trois catégories. Contrairement à l'approche traditionnelle avec des qualificateurs de ressources (small/large/xlarge), Window Size Class fournit un ensemble discret de valeurs sur lesquelles le développeur peut s'appuyer lors de la conception de l'interface.

L'API est apparue dans Android 7.0 Nougat dans le cadre du support du mode multi-fenêtre, mais l'adoption active a commencé avec Jetpack WindowManager 1.1 (2022). Google recommande Window Size Class comme outil principal pour construire des mises en page adaptatives au lieu de vérifier la largeur de l'écran via Display.getSize().

La classification est basée sur la largeur de la fenêtre en dp, et non sur la taille physique ou la densité de pixels. Cela signifie que deux appareils avec des résolutions différentes mais la même largeur en dp recevront la même classe — l'interface sera prévisiblement identique.

Trois classes de taille de fenêtre Android

Compact — classe pour fenêtres jusqu'à 600 dp de largeur. Téléphone en mode portrait, la plupart des pliables (Galaxy Z Flip) en état plié. L'interface est construite sur une colonne, navigation via Bottom Navigation.

Medium — classe pour fenêtres de 600–840 dp de largeur. Tablette en portrait, téléphone en paysage, appareil pliable en état semi-ouvert. L'interface utilise deux colonnes — par exemple, une liste à gauche et des détails à droite. Navigation Rail remplace Bottom Navigation.

Expanded — classe pour fenêtres à partir de 840 dp de largeur. Tablette en paysage, fenêtre de bureau, appareil pliable en état déplié. L'interface peut utiliser trois panneaux ou plus, Permanent Navigation Drawer, des panneaux d'outils.

Dans Material Design 3, des composants adaptatifs sont définis pour chaque classe : Navigation Rail pour Medium, Navigation Drawer pour Expanded, Bottom Navigation pour Compact. Le développeur n'a pas besoin de sélectionner des points d'arrêt — ils sont déjà définis par l'API.

Comment fonctionne Window Size Class

Window Size Class est calculé en fonction de la largeur actuelle de la fenêtre de l'application en dp, en tenant compte des éléments système — barre d'état, barre de navigation, division de l'écran en mode Split Screen. L'API se déclenche lors d'un changement de configuration de la fenêtre : rotation de l'appareil, entrée en mode multi-fenêtre, dépliage d'un appareil pliable.

Pour obtenir la classe, on utilise la classe WindowSizeClass de la bibliothèque androidx.window. Le développeur s'abonne à un Flow (Kotlin) ou LiveData (Java) qui met automatiquement à jour la classe à chaque changement de taille de fenêtre — sans traitement manuel de onConfigurationChanged.

La classification se déroule en trois étapes. Première — mesurer la largeur actuelle de la fenêtre en pixels. Deuxième — conversion en dp via DisplayMetrics.density. Troisième — comparaison de la valeur obtenue avec les seuils : moins de 600 dp — Compact, 600–840 — Medium, à partir de 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

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

En plus de la largeur (windowWidthSizeClass), l'API fournit une classe pour la hauteur de la fenêtre (windowHeightSizeClass) — utile pour l'orientation paysage et les fenêtres de bureau.

Window Size Class dans Jetpack Compose

Dans Jetpack Compose, Window Size Class est utilisé via la fonction currentWindowAdaptiveInfo(), qui retourne WindowAdaptiveInfo avec les classes de largeur et de hauteur. Cette fonction prend en compte non seulement la taille de la fenêtre mais aussi le type d'entrée (clavier, souris, tactile) — via WindowPosture et WindowLayoutInfo.

Un scénario typique consiste à basculer entre les mises en page selon la classe. Par exemple, sur Compact, un BottomSheet avec sélection s'affiche, sur Medium — un panneau latéral, sur Expanded — un Navigation Drawer permanent.

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

Dans Material Design 3, les composants NavigationSuiteScaffold s'adaptent automatiquement à Window Size Class — le développeur n'a pas besoin d'écrire de logique conditionnelle.

Window Size Class et Material Design 3

Material Design 3 (Material You) est entièrement intégré à Window Size Class. Le système de mise en page adaptative dans Material 3 détermine quel composant de navigation utiliser pour chaque classe : BottomNavigation pour Compact, NavigationRail pour Medium, NavigationDrawer pour Expanded.

Cette intégration fonctionne au niveau de l'Adaptive API, qui combine Window Size Class avec d'autres signaux — FoldState (appareil pliable) et WindowPosture (position de l'écran). L'Adaptive API est disponible via la bibliothèque material3-adaptive.

Material 3 fournit quatre composants adaptatifs de haut niveau : ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold et AdaptiveSheet. Chacun d'eux modifie son comportement en fonction de Window Size Class sans configuration supplémentaire.

Avantages des mises en page adaptatives

L'utilisation de Window Size Class offre trois avantages clés dans le développement mobile. Premier — prévisibilité : au lieu de centaines de combinaisons de tailles d'écran, le développeur travaille avec trois classes. Cela réduit radicalement le nombre de scénarios de test et de bugs liés à la mise en page.

Deuxième — adaptation automatique au mode multi-fenêtre. Lorsque l'utilisateur entre en Split Screen, la largeur de la fenêtre change — Window Size Class se recalcule instantanément et l'interface s'adapte. Sans cette API, l'application en écran partagé affiche une version réduite de l'interface téléphone.

Troisième — cohérence avec Material Design 3. Google a intégré Window Size Class dans le système de composants adaptatifs, donc les interfaces construites sur Material 3 suivent automatiquement les recommandations de conception grand écran de Google sans travail supplémentaire.