Los dispositivos Android se extienden sin problemas a las pantallas conectadas

Nos complace anunciar un hito importante para acercar la computación 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 de forma instantánea 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 fluida y potente a los dispositivos de todo el ecosistema Android que ejecutan Android 16 cuando están conectados a una pantalla externa. 
Esta función ya está disponible de forma general en los dispositivos compatibles* para los usuarios que pueden conectar sus teléfonos Pixel y Samsung compatibles a monitores externos, lo que habilita nuevas oportunidades para crear experiencias de apps más atractivas y productivas que se adaptan a diferentes factores de forma.

¿Cómo funciona?

Cuando un teléfono o dispositivo plegable Android compatible se conecta 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 que los usuarios fijen apps para acceder a ellas rápidamente. Los usuarios pueden ejecutar varias apps una al lado de la otra de forma simultánea en ventanas de tamaño ajustable 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 el modo de ventanas de escritorio (como una tablet Samsung Galaxy Tab S11) se conecta a una pantalla externa, la sesión de escritorio se extiende a ambas pantallas, lo que permite un espacio de trabajo aún más amplio. Luego, las dos pantallas funcionan como un sistema continuo, lo que permite que las ventanas de las apps, el contenido y el cursor se muevan libremente entre las pantallas.

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

¿por qué es importante?

En la versión de Android 16 QPR3, finalizamos los comportamientos de ventanas, las interacciones de la barra de tareas y la compatibilidad de entrada (mouse y teclado) que definen la experiencia de pantalla conectada. También incluimos tratamientos de compatibilidad para escalar 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 escritorio, y los usuarios se sentirán como en casa. Si la app está bloqueada en modo vertical o supone 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 en la app en pantallas conectadas:

• No asumas un objeto Display constante: El objeto Display asociado con el contexto de tu app puede cambiar cuando se mueve una ventana de la app 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 visualización de forma dinámica en lugar de almacenarlas en caché.
• Ten en cuenta los cambios 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 la IU se ajuste de forma adecuada.
• Admite correctamente periféricos externos: Cuando los usuarios se conectan a un monitor externo, suelen crear un entorno más similar al de una computadora de escritorio. Esto suele implicar el uso de teclados, mouses, paneles táctiles, cámaras web, micrófonos y bocinas externos. Mejora la compatibilidad con las interacciones del teclado y el mouse.

Cómo crear contenido 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 viewport que te ayudan a diseñar y desarrollar diseños adaptables. Con la versión 1.5.0, extendemos esta orientación 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 de entre 1,200 dp y 1,600 dp
• Extragrande: Para anchos ≥1,600 dp

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

En superficies muy grandes, escalar verticalmente el diseño expandido 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 de mensajes y un mensaje) en la clase de tamaño de ventana expandida. 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 de correo, 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 desde el 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 tengas la certeza de que tu app tiene, al menos, esa cantidad de espacio:

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

Cómo compilar 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 crear diseños adaptables, ya que permite mostrar varios destinos al mismo tiempo y 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. Un 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 los diseños canónicos listos para usar, como la lista-detalles y el panel de apoyo, puedes usar las escenas de la biblioteca adaptable de Compose Material 3 (disponible en la versión 1.3 y posteriores).

También es fácil crear 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, podrías definir una SceneStrategy para mostrar tres paneles si el ancho de la ventana es lo suficientemente grande 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 uno al lado del otro 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, ambas estrategias de escena personalizadas devuelven null. En este caso, NavDisplay recurre 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 panorámicas.

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 IU adaptables, como diseños de lista-detalles y de panel de apoyo, que se adaptan automáticamente a las configuraciones de la ventana en función de 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 scaffold 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 quieres 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 la compatibilidad con varias pantallas y la administración de ventanas para obtener más información sobre cómo implementar estas prácticas recomendadas.

Comentarios

Tus comentarios son fundamentales para que sigamos mejorando la experiencia de escritorio de la pantalla conectada. Comparte tus opiniones y, si tienes algún problema, infórmalo a través de nuestros canales oficiales de comentarios.

Nos comprometemos a hacer de Android una plataforma versátil que se adapte a las múltiples formas en que los usuarios quieren 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.