Nos complace anunciar un hito importante para acercar la informática móvil y de escritorio en Android: la compatibilidad con pantallas conectadas alcanzó la disponibilidad general con el lanzamiento de Android 16 QPR3!

Como se mostró en Google I/O 2025, las pantallas conectadas permiten a los usuarios conectar sus dispositivos Android a un monitor externo y acceder al instante a un entorno de ventanas de escritorio. Las apps se pueden usar en ventanas de formato libre o maximizadas, y los usuarios pueden realizar varias tareas a la vez como lo harían en un SO de escritorio.

Google y Samsung colaboraron para brindar una experiencia de modo de ventanas de escritorio potente y sin problemas a los dispositivos de todo el ecosistema de Android que ejecutan Android 16 mientras están conectados a una pantalla externa.
Ahora, está disponible de forma general en dispositivos compatibles* para los usuarios que pueden conectar sus teléfonos Pixel y Samsung compatibles a monitores externos, lo que permite nuevas oportunidades para crear experiencias de apps más atractivas y productivas que se adapten a los factores de forma.

¿Cómo funciona?

Cuando se conecta un teléfono o un dispositivo plegable Android compatible a una pantalla externa, se inicia una nueva sesión de escritorio en la pantalla conectada.

La experiencia en la pantalla conectada es similar a la de una computadora de escritorio, incluida una barra de tareas que muestra las apps activas y permite a los usuarios fijar apps para un acceso rápido. Los usuarios pueden ejecutar varias apps en paralelo de forma simultánea en ventanas de tamaño variable en la pantalla conectada.

Teléfono conectado a una pantalla externa con una sesión de escritorio en la pantalla mientras el teléfono mantiene su propio estado.

Cuando un dispositivo que admite modo de ventanas de escritorio (como una tablet como la Samsung Galaxy Tab S11) se conecta a una pantalla externa, la sesión de escritorio se extiende a ambas pantallas, lo que desbloquea un espacio de trabajo aún más amplio. Las dos pantallas funcionan como un sistema continuo, lo que permite que las ventanas de la app, el contenido y el cursor se muevan libremente entre las pantallas.

Tablet conectada a una pantalla externa, que extiende la sesión de escritorio a ambas pantallas.

¿Por qué es importante?

En el lanzamiento de Android 16 QPR3, finalizamos los comportamientos de ventanas, las interacciones de la barra de tareas y compatibilidad de entrada (mouse y teclado) que definen la experiencia de la pantalla conectada. También incluimos tratamientos de compatibilidad para ajustar las ventanas y evitar que se reinicien las apps cuando se cambian las pantallas.

Si tu app se compila con principios de diseño adaptable, tendrá automáticamente el aspecto de una computadora de escritorio, y los usuarios se sentirán como en casa. Si la app está bloqueada en orientación vertical o asume una interfaz solo táctil, es el momento de modernizarla.

En particular, presta atención a estas prácticas recomendadas clave para obtener experiencias óptimas de apps en pantallas conectadas:

• No supongas que el objeto Display es constante: El objeto Display asociado con el contexto de tu app puede cambiar cuando una ventana de la app se mueve a una pantalla externa o si cambia la configuración de la pantalla. Tu app debe controlar correctamente los eventos de cambio de configuración y consultar las métricas de la pantalla de forma dinámica en lugar de almacenarlas en caché.
• Ten en cuenta loscambios de configuración de densidad: Las pantallas externas pueden tener densidades de píxeles muy diferentes a las de la pantalla principal del dispositivo. Asegúrate de que tus diseños y recursos se adapten correctamente a estos cambios para mantener la claridad y la usabilidad de la IU. Usa píxeles independientes de la densidad (dp) para los diseños, proporciona recursos específicos de la densidad y asegúrate de que tu IU se ajuste de forma adecuada.
• Brinda compatibilidad con periféricos externos: Cuando los usuarios se conectan a un monitor externo, suelen crear un entorno más similar a una computadora de escritorio. Esto suele implicar el uso de teclados, mouses, trackpads, cámaras web, micrófonos y altavoces externos. Mejora la compatibilidad con las interacciones de teclado y mouse.

Desarrollo para el futuro de las computadoras de escritorio con herramientas modernas

Proporcionamos varias herramientas para ayudarte a crear la experiencia de escritorio. Repasemos las actualizaciones más recientes de nuestras bibliotecas adaptables principales.

Nuevas clases de tamaño de ventana: grande y extragrande

La actualización más importante de Jetpack WindowManager 1.5.0 es la incorporación de dos nuevas clases de tamaño de ventana de ancho: grande y extragrande.

Las clases de tamaño de ventana son nuestro conjunto oficial y bien definido de puntos de interrupción de viewports que te ayudan a diseñar y desarrollar diseños adaptables. Con la versión 1.5.0, extendemos esta guía para pantallas que superan el tamaño de las tablets típicas.

Estos son los nuevos puntos de interrupción de ancho:

• Grande: Para anchos entre 1200 dp y 1600 dp
• Extragrande: Para anchos ≥1600 dp

Las diferentes clases de tamaño de ventana según el ancho de la pantalla.

En superficies muy grandes, simplemente aumentar el diseño Expanded de una tablet no siempre es la mejor experiencia del usuario. Por ejemplo, un cliente de correo electrónico podría mostrar cómodamente dos paneles (un buzón y un mensaje) en la clase de tamaño de ventana Expanded. Sin embargo, en un monitor de escritorio extragrande, el cliente de correo electrónico podría mostrar de forma elegante tres o incluso cuatro paneles, tal vez un buzón, una lista de mensajes, el contenido completo del mensaje y un panel de calendario o tareas, todo a la vez.

Para incluir las nuevas clases de tamaño de ventana en tu proyecto, simplemente llama a la función del conjunto WindowSizeClass.BREAKPOINTS_V2 en lugar de WindowSizeClass.BREAKPOINTS_V1:

val currentWindowMetrics =
    WindowMetricsCalculator.getOrCreate()
    .computeCurrentWindowMetrics(LocalContext.current)

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Luego, aplica el diseño correcto cuando estés seguro de que tu app tiene al menos ese espacio:

if(sizeClass.isWidthAtLeastBreakpoint(
    WindowSizeClass.WIDTH_DP_LARGE_LOWER_BOUND)){
    ...
	// Window is at least 1200 dp wide.
}

Compila diseños adaptables con Jetpack Navigation 3

Navigation 3 es la incorporación más reciente a la colección de Jetpack. Navigation 3, que acaba de alcanzar su primera versión estable, es una potente biblioteca de navegación diseñada para funcionar con Compose.

Navigation 3 también es una excelente herramienta para compilar diseños adaptables, ya que permite que se muestren varios destinos al mismo tiempo y permite cambiar sin problemas entre esos diseños.

Este sistema para administrar el flujo de la IU de tu app se basa en escenas. Una escena es un diseño que muestra uno o más destinos al mismo tiempo. Una SceneStrategy determina si puede crear una escena. Encadenar instancias de SceneStrategy te permite crear y mostrar diferentes escenas para diferentes tamaños de pantalla y configuraciones de dispositivos.

Para diseños canónicos listos para usar, como la lista de detalles y el panel de asistencia, puedes usar las escenas de la biblioteca adaptable de Compose Material 3 (disponible en la versión 1.3 y versiones posteriores).

También es fácil compilar tus propias escenas personalizadas modificando las recetas de escenas o comenzando desde cero. Por ejemplo, consideremos una escena que muestra tres paneles en paralelo:

class ThreePaneScene<T : Any>(
    override val key: Any,
    override val previousEntries: List<NavEntry<T>>,
    val firstEntry: NavEntry<T>,
    val secondEntry: NavEntry<T>,
    val thirdEntry: NavEntry<T>
) : Scene<T> {
    override val entries: List<NavEntry<T>> = listOf(firstEntry, secondEntry, thirdEntry)
    override val content: @Composable (() -> Unit) = {
        Row(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.weight(1f)) {
                firstEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                secondEntry.Content()
            }
            Column(modifier = Modifier.weight(1f)) {
                thirdEntry.Content()
            }
        }
    }

En este caso, puedes definir una SceneStrategy para mostrar tres paneles si el ancho de la ventana es lo suficientemente ancho y las entradas de tu pila de actividades declararon que admiten mostrarse en una escena de tres paneles.

class ThreePaneSceneStrategy<T : Any>(val windowSizeClass: WindowSizeClass) : SceneStrategy<T> {
    override fun SceneStrategyScope<T>.calculateScene(entries: List<NavEntry<T>>): Scene<T>? {
        if (windowSizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_LARGE_LOWER_BOUND)) {
            val lastThree = entries.takeLast(3)
            if (lastThree.size == 3 && lastThree.all { it.metadata.containsKey(MULTI_PANE_KEY) }) {
                val firstEntry = lastThree[0]
                val secondEntry = lastThree[1]
                val thirdEntry = lastThree[2]


                return ThreePaneScene(
                    key = Triple(firstEntry.contentKey, secondEntry.contentKey, thirdEntry.contentKey),
                    previousEntries = entries.dropLast(3),
                    firstEntry = firstEntry,
                    secondEntry = secondEntry,
                    thirdEntry = thirdEntry
                )
            }
        }
        return null
    }
}

Puedes usar tu ThreePaneSceneStrategy con otras estrategias cuando crees tu NavDisplay. Por ejemplo, también podríamos agregar una TwoPaneStrategy para mostrar dos paneles en paralelo cuando no haya suficiente espacio para mostrar tres.

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

NavDisplay(..., 
  sceneStrategy = strategy,
  entryProvider = entryProvider { 
    entry<MyScreen>(metadata = mapOf(MULTI_PANE_KEY to true))) { ... }
    ... other entries...
  }
)

Si no hay suficiente espacio para mostrar tres o dos paneles, nuestras estrategias de escena personalizadas muestran null.En este caso, NavDisplay vuelve a mostrar la última entrada de la pila de actividades en un solo panel con SinglePaneScene.

Con las escenas y las estrategias, puedes agregar diseños de uno, dos y tres paneles a tu app.

Una app adaptable que muestra la navegación de tres paneles en pantallas anchas.

Consulta la documentación para obtener más información sobre cómo crear diseños personalizados con escenas en Navigation 3.

Diseños adaptables independientes

Si necesitas un diseño independiente, la biblioteca adaptable de Compose Material 3 te ayuda a crear IUs adaptables, como diseños de lista de detalles y paneles de asistencia, que se adaptan automáticamente a las configuraciones de ventanas según las clases de tamaño de ventana o las posturas del dispositivo. 

La buena noticia es que la biblioteca ya está actualizada con los nuevos puntos de interrupción. A partir de la versión 1.2, las funciones de directiva de andamio de panel predeterminadas admiten clases de tamaño de ventana de ancho grande y extragrande.

Solo debes habilitar la función declarando en tu archivo de compilación de Gradle que deseas usar los nuevos puntos de interrupción:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Cómo comenzar

Explora la función de pantalla conectada en la versión más reciente de Android. Obtén Android 16 QPR3 en un dispositivo compatible y, luego, conéctalo a un monitor externo para comenzar a probar tu app hoy mismo. 

Consulta la documentación actualizada sobre compatibilidad con varias pantallas y administración de ventanas para obtener más información sobre la implementación de estas prácticas recomendadas.

Comentarios

Tus comentarios son fundamentales a medida que seguimos perfeccionando la experiencia de escritorio de la pantalla conectada. Comparte tus opiniones y comunícanos cualquier problema a través de nuestros canales de comentarios oficiales.

Nos comprometemos a hacer de Android una plataforma versátil que se adapte a las muchas formas en que los usuarios desean interactuar con sus apps y dispositivos. Las mejoras en la compatibilidad con pantallas conectadas son otro paso en esa dirección, y creemos que a tus usuarios les encantarán las experiencias de escritorio que crearás.

*Nota: En el momento en que se escribe el artículo, las pantallas conectadas son compatibles con las series Pixel 8, 9 y 10, y con una amplia variedad de dispositivos Samsung, incluidos S26, Fold7, Flip7 y Tab S11.