Window Size Class — cos'è, classi di dimensione e sviluppo

Cos'è Window Size Class?

Window Size Class è un'API della piattaforma Android inclusa nella libreria Jetpack WindowManager che classifica lo spazio disponibile della finestra dell'applicazione in tre categorie. A differenza dell'approccio tradizionale con qualificatori di risorse (small/large/xlarge), Window Size Class fornisce un insieme discreto di valori su cui lo sviluppatore può fare affidamento durante la progettazione dell'interfaccia.

L'API è apparsa in Android 7.0 Nougat come parte del supporto per la modalità multi-finestra, ma l'adozione attiva è iniziata con Jetpack WindowManager 1.1 (2022). Google raccomanda Window Size Class come strumento principale per costruire layout adattivi invece di controllare la larghezza dello schermo tramite Display.getSize().

La classificazione si basa sulla larghezza della finestra in dp, non sulla dimensione fisica o sulla densità di pixel. Ciò significa che due dispositivi con risoluzioni diverse ma stessa larghezza in dp riceveranno la stessa classe — l'interfaccia sarà prevedibilmente identica.

Tre classi di dimensione della finestra in Android

Compact — classe per finestre fino a 600 dp di larghezza. Telefono in modalità ritratto, la maggior parte dei pieghevoli (Galaxy Z Flip) in stato chiuso. L'interfaccia è costruita in una colonna, navigazione tramite Bottom Navigation.

Medium — classe per finestre di 600–840 dp di larghezza. Tablet in ritratto, telefono in paesaggio, dispositivo pieghevole in stato semiaperto. L'interfaccia usa due colonne — ad esempio, un elenco a sinistra e dettagli a destra. Navigation Rail sostituisce Bottom Navigation.

Expanded — classe per finestre da 840 dp di larghezza. Tablet in paesaggio, finestra desktop, dispositivo pieghevole in stato aperto. L'interfaccia può utilizzare tre o più pannelli, Permanent Navigation Drawer, pannelli degli strumenti.

In Material Design 3, i componenti adattivi sono definiti per ogni classe: Navigation Rail per Medium, Navigation Drawer per Expanded, Bottom Navigation per Compact. Lo sviluppatore non deve selezionare breakpoint — sono già definiti dall'API.

Come funziona Window Size Class

Window Size Class viene calcolato in base alla larghezza corrente della finestra dell'applicazione in dp, tenendo conto degli elementi di sistema — barra di stato, barra di navigazione, divisione dello schermo in modalità Split Screen. L'API si attiva quando cambia la configurazione della finestra: rotazione del dispositivo, ingresso in modalità multi-finestra, apertura di un dispositivo pieghevole.

Per ottenere la classe, si utilizza la classe WindowSizeClass della libreria androidx.window. Lo sviluppatore si sottoscrive a un Flow (Kotlin) o LiveData (Java) che aggiorna automaticamente la classe ad ogni cambiamento di dimensione della finestra — senza gestione manuale di onConfigurationChanged.

La classificazione avviene in tre passaggi. Primo — misurare la larghezza corrente della finestra in pixel. Secondo — conversione in dp tramite DisplayMetrics.density. Terzo — confronto del valore ottenuto con le soglie: meno di 600 dp — Compact, 600–840 — Medium, da 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

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

Oltre alla larghezza (windowWidthSizeClass), l'API fornisce una classe per l'altezza della finestra (windowHeightSizeClass) — utile per l'orientamento paesaggio e le finestre desktop.

Window Size Class in Jetpack Compose

In Jetpack Compose, Window Size Class viene utilizzato tramite la funzione currentWindowAdaptiveInfo(), che restituisce WindowAdaptiveInfo con le classi di larghezza e altezza. Questa funzione tiene conto non solo della dimensione della finestra ma anche del tipo di input (tastiera, mouse, tocco) — tramite WindowPosture e WindowLayoutInfo.

Uno scenario tipico è passare da un layout all'altro in base alla classe. Ad esempio, su Compact viene visualizzato un BottomSheet con selezione, su Medium — un pannello laterale, su Expanded — un Navigation Drawer permanente.

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

In Material Design 3, i componenti NavigationSuiteScaffold si adattano automaticamente a Window Size Class — lo sviluppatore non deve scrivere logica condizionale.

Window Size Class e Material Design 3

Material Design 3 (Material You) è completamente integrato con Window Size Class. Il sistema di layout adattivo in Material 3 determina quale componente di navigazione utilizzare per ogni classe: BottomNavigation per Compact, NavigationRail per Medium, NavigationDrawer per Expanded.

Questa integrazione funziona a livello di Adaptive API, che combina Window Size Class con altri segnali — FoldState (dispositivo pieghevole) e WindowPosture (posizione dello schermo). L'Adaptive API è disponibile tramite la libreria material3-adaptive.

Material 3 fornisce quattro componenti adattivi di alto livello: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold e AdaptiveSheet. Ognuno di essi modifica il proprio comportamento in base a Window Size Class senza configurazione aggiuntiva.

Vantaggi dei layout adattivi

L'utilizzo di Window Size Class offre tre vantaggi chiave nello sviluppo mobile. Primo — prevedibilità: invece di centinaia di combinazioni di dimensioni dello schermo, lo sviluppatore lavora con tre classi. Questo riduce radicalmente il numero di scenari di test e di bug relativi al layout.

Secondo — adattamento automatico alla modalità multi-finestra. Quando l'utente entra in Split Screen, la larghezza della finestra cambia — Window Size Class si ricalcola istantaneamente e l'interfaccia si adatta. Senza questa API, l'app in schermo diviso mostra una versione ridotta dell'interfaccia del telefono.

Terzo — coerenza con Material Design 3. Google ha integrato Window Size Class nel sistema di componenti adattivi, quindi le interfacce costruite su Material 3 seguono automaticamente le raccomandazioni di Google per il design su schermi grandi senza lavoro aggiuntivo.