Window Size Class — qué es, clases de tamaño y desarrollo

¿Qué es Window Size Class?

Window Size Class es una API de la plataforma Android incluida en la biblioteca Jetpack WindowManager que clasifica el espacio disponible de la ventana de la aplicación en tres categorías. A diferencia del enfoque tradicional con calificadores de recursos (small/large/xlarge), Window Size Class proporciona un conjunto discreto de valores en los que el desarrollador puede apoyarse al diseñar la interfaz.

La API apareció en Android 7.0 Nougat como parte del soporte para modo multiventana, pero la adopción activa comenzó con Jetpack WindowManager 1.1 (2022). Google recomienda Window Size Class como la herramienta principal para construir diseños adaptativos en lugar de verificar el ancho de pantalla mediante Display.getSize().

La clasificación se basa en el ancho de la ventana en dp, no en el tamaño físico o la densidad de píxeles. Esto significa que dos dispositivos con diferentes resoluciones pero el mismo ancho en dp recibirán la misma clase — la interfaz será predeciblemente idéntica.

Tres clases de tamaño de ventana en Android

Compact — clase para ventanas de hasta 600 dp de ancho. Teléfono en modo retrato, la mayoría de los plegables (Galaxy Z Flip) en estado plegado. La interfaz se construye en una columna, navegación mediante Bottom Navigation.

Medium — clase para ventanas de 600–840 dp de ancho. Tableta en retrato, teléfono en paisaje, dispositivo plegable en estado semiabierto. La interfaz usa dos columnas — por ejemplo, una lista a la izquierda y detalles a la derecha. Navigation Rail reemplaza a Bottom Navigation.

Expanded — clase para ventanas desde 840 dp de ancho. Tableta en paisaje, ventana de escritorio, dispositivo plegable en estado desplegado. La interfaz puede usar tres o más paneles, Permanent Navigation Drawer, paneles de herramientas.

En Material Design 3, se definen componentes adaptativos para cada clase: Navigation Rail para Medium, Navigation Drawer para Expanded, Bottom Navigation para Compact. El desarrollador no necesita seleccionar breakpoints — ya están definidos por la API.

Cómo funciona Window Size Class

Window Size Class se calcula basándose en el ancho actual de la ventana de la aplicación en dp, teniendo en cuenta los elementos del sistema — barra de estado, barra de navegación, división de pantalla en modo Split Screen. La API se activa cuando cambia la configuración de la ventana: rotación del dispositivo, entrada en modo multiventana, despliegue de un dispositivo plegable.

Para obtener la clase se utiliza la clase WindowSizeClass de la biblioteca androidx.window. El desarrollador se suscribe a un Flow (Kotlin) o LiveData (Java) que actualiza automáticamente la clase con cada cambio de tamaño de ventana — sin manejo manual de onConfigurationChanged.

La clasificación ocurre en tres pasos. Primero — medir el ancho actual de la ventana en píxeles. Segundo — convertir a dp mediante DisplayMetrics.density. Tercero — comparar el valor obtenido con los umbrales: menos de 600 dp — Compact, 600–840 — Medium, desde 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

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

Además del ancho (windowWidthSizeClass), la API proporciona una clase para la altura de la ventana (windowHeightSizeClass) — útil para orientación paisaje y ventanas de escritorio.

Window Size Class en Jetpack Compose

En Jetpack Compose, Window Size Class se utiliza a través de la función currentWindowAdaptiveInfo(), que devuelve WindowAdaptiveInfo con las clases de ancho y alto. Esta función tiene en cuenta no solo el tamaño de la ventana sino también el tipo de entrada (teclado, ratón, táctil) — a través de WindowPosture y WindowLayoutInfo.

Un escenario típico es cambiar entre diseños según la clase. Por ejemplo, en Compact se muestra un BottomSheet con selección, en Medium — un panel lateral, en Expanded — un Navigation Drawer permanente.

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

En Material Design 3, los componentes NavigationSuiteScaffold se adaptan automáticamente a Window Size Class — el desarrollador no necesita escribir lógica condicional.

Window Size Class y Material Design 3

Material Design 3 (Material You) está completamente integrado con Window Size Class. El sistema de diseño adaptativo en Material 3 determina qué componente de navegación usar para cada clase: BottomNavigation para Compact, NavigationRail para Medium, NavigationDrawer para Expanded.

Esta integración funciona a nivel de Adaptive API, que combina Window Size Class con otras señales — FoldState (dispositivo plegable) y WindowPosture (posición de pantalla). Adaptive API está disponible a través de la biblioteca material3-adaptive.

Material 3 proporciona cuatro componentes adaptativos de nivel superior: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold y AdaptiveSheet. Cada uno cambia su comportamiento según Window Size Class sin configuración adicional.

Ventajas de los diseños adaptativos

El uso de Window Size Class proporciona tres ventajas clave en el desarrollo móvil. Primera — previsibilidad: en lugar de cientos de combinaciones de tamaños de pantalla, el desarrollador trabaja con tres clases. Esto reduce radicalmente el número de escenarios de prueba y bugs relacionados con el diseño.

Segunda — adaptación automática al modo multiventana. Cuando el usuario entra en Split Screen, el ancho de la ventana cambia — Window Size Class se recalcula instantáneamente y la interfaz se adapta. Sin esta API, la aplicación en pantalla dividida muestra una versión reducida de la interfaz de teléfono.

Tercera — consistencia con Material Design 3. Google ha incorporado Window Size Class en el sistema de componentes adaptativos, por lo que las interfaces construidas sobre Material 3 siguen automáticamente las recomendaciones de diseño de Google para pantallas grandes sin trabajo adicional.