Nous sommes ravis d'annoncer une étape importante dans le rapprochement de l'informatique mobile et de bureau sur Android : la prise en charge des écrans connectés a atteint la disponibilité générale avec la version Android 16 QPR3 !

Comme présenté lors de la Google I/O 2025, les écrans connectés permettent aux utilisateurs de connecter leurs appareils Android à un moniteur externe et d'accéder instantanément à un environnement de fenêtrage du bureau. Les applications peuvent être utilisées dans des fenêtres de forme libre ou maximisées, et les utilisateurs peuvent effectuer plusieurs tâches à la fois, comme sur un OS de bureau.

Google et Samsung ont collaboré pour offrir une expérience de fenêtrage du bureau fluide et performante sur les appareils de l'écosystème Android exécutant Android 16 lorsqu'ils sont connectés à un écran externe. 
Cette fonctionnalité est désormais disponible pour tous les utilisateurs sur les appareils compatibles*. Elle leur permet de connecter leurs téléphones Pixel et Samsung compatibles à des écrans externes. Ils peuvent ainsi créer des expériences d'application plus attrayantes et plus productives qui s'adaptent à différents facteurs de forme.

Comment ça marche ?

Lorsqu'un téléphone ou un appareil pliable Android compatible est connecté à un écran externe, une nouvelle session de bureau démarre sur l'écran connecté.

L'expérience sur l'écran connecté est semblable à celle sur un ordinateur de bureau, y compris une barre des tâches qui affiche les applications actives et permet aux utilisateurs d'épingler des applications pour un accès rapide. Les utilisateurs peuvent exécuter plusieurs applications côte à côte simultanément dans des fenêtres redimensionnables sur l'écran connecté.

Téléphone connecté à un écran externe avec une session de bureau sur l'écran, tandis que le téléphone conserve son propre état.

Lorsqu'un appareil compatible avec le fenêtrage du bureau (comme une tablette Samsung Galaxy Tab S11) est connecté à un écran externe, la session de bureau est étendue aux deux écrans, ce qui permet de bénéficier d'un espace de travail encore plus vaste. Les deux écrans fonctionnent alors comme un seul système continu, ce qui permet aux fenêtres d'application, au contenu et au curseur de se déplacer librement entre les écrans.

Tablette connectée à un écran externe, étendant la session de bureau sur les deux écrans.

Pourquoi est-il important ?

Dans la version QPR3 d'Android 16, nous avons finalisé les comportements de fenêtrage, les interactions avec la barre des tâches et la compatibilité des entrées (souris et clavier) qui définissent l'expérience d'affichage connecté. Nous avons également inclus des traitements de compatibilité pour mettre à l'échelle les fenêtres et éviter le redémarrage des applications lors du changement d'écran.

Si votre application est conçue selon les principes de conception adaptative, elle aura automatiquement l'apparence d'une application pour ordinateur, et les utilisateurs se sentiront à l'aise. Si l'application est verrouillée en mode Portrait ou suppose une interface tactile uniquement, il est temps de la moderniser.

En particulier, prêtez attention aux bonnes pratiques clés suivantes pour optimiser l'expérience utilisateur de vos applications sur les écrans connectés :

• Ne partez pas du principe qu'un objet Display est constant : l'objet Display associé au contexte de votre application peut changer lorsqu'une fenêtre d'application est déplacée vers un écran externe ou si la configuration de l'écran change. Votre application doit gérer correctement les événements de modification de la configuration et interroger les métriques d'affichage de manière dynamique plutôt que de les mettre en cache.
• Tenez compte des modifications de la configuration de la densité : les densités de pixels des écrans externes peuvent être très différentes de celles de l'écran principal de l'appareil. Assurez-vous que vos mises en page et vos ressources s'adaptent correctement à ces modifications pour préserver la clarté et la facilité d'utilisation de l'UI. Utilisez des pixels indépendants de la densité (dp) pour les mises en page, fournissez des ressources spécifiques à la densité et assurez-vous que votre UI s'adapte correctement.
• Prendre en charge correctement les périphériques externes : lorsque les utilisateurs se connectent à un écran externe, ils créent souvent un environnement plus proche de celui d'un ordinateur de bureau. Cela implique souvent d'utiliser des claviers, des souris, des trackpads, des webcams, des micros et des haut-parleurs externes. Améliorez la prise en charge des interactions avec le clavier et la souris.

Préparer l'avenir des ordinateurs de bureau avec des outils modernes

Nous proposons plusieurs outils pour vous aider à créer l'expérience sur ordinateur. Récapitulons les dernières mises à jour de nos principales bibliothèques adaptatives.

Nouvelles classes de taille de fenêtre : grande et très grande

La principale nouveauté de Jetpack WindowManager 1.5.0 est l'ajout de deux nouvelles classes de taille de fenêtre en largeur : "Large" et "Très large".

Les classes de taille de fenêtre sont notre ensemble officiel et défini de points d'arrêt de fenêtre d'affichage qui vous aident à concevoir et à développer des mises en page adaptatives. Avec la version 1.5.0, nous étendons ces conseils aux écrans dont la taille dépasse celle des tablettes classiques.

Voici les nouveaux points d'arrêt de largeur :

• Large : pour les largeurs comprises entre 1 200 et 1 600 dp
• Très grande : pour les largeurs ≥ 1 600 dp

Les différentes classes de taille de fenêtre en fonction de la largeur de l'écran.

Sur les très grandes surfaces, la simple mise à l'échelle de la mise en page Développée d'une tablette n'offre pas toujours la meilleure expérience utilisateur. Par exemple, un client de messagerie peut facilement afficher deux volets (une boîte aux lettres et un message) dans la classe de taille de fenêtre "Développée". Mais sur un écran de bureau très grand, le client de messagerie peut afficher élégamment trois ou même quatre volets à la fois : une boîte aux lettres, une liste de messages, le contenu complet du message et un panneau d'agenda/de tâches.

Pour inclure les nouvelles classes de taille de fenêtre dans votre projet, il vous suffit d'appeler la fonction à partir de l'ensemble WindowSizeClass.BREAKPOINTS_V2 au lieu de WindowSizeClass.BREAKPOINTS_V1 :

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

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Appliquez ensuite la mise en page appropriée lorsque vous êtes sûr que votre application dispose d'au moins cet espace :

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

Créer des mises en page adaptatives avec Jetpack Navigation 3

Navigation 3 est la dernière nouveauté de la collection Jetpack. Navigation 3, dont la première version stable vient de sortir, est une puissante bibliothèque de navigation conçue pour fonctionner avec Compose.

Navigation 3 est également un excellent outil pour créer des mises en page adaptatives, car il permet d'afficher plusieurs destinations en même temps et de passer facilement d'une mise en page à l'autre.

Ce système de gestion du flux d'interface utilisateur de votre application est basé sur les scènes. Une scène est une mise en page qui affiche une ou plusieurs destinations en même temps. Une SceneStrategy détermine si elle peut créer une scène. Enchaîner des instances SceneStrategy vous permet de créer et d'afficher différentes scènes pour différentes tailles d'écran et configurations d'appareil.

Pour les mises en page canoniques prêtes à l'emploi, comme la mise en page liste-détails et le volet de complément, vous pouvez utiliser les scènes de la bibliothèque Compose Material 3 Adaptive (disponible dans la version 1.3 et ultérieures).

Vous pouvez également créer facilement vos propres scènes personnalisées en modifiant les recettes de scène ou en partant de zéro. Par exemple, prenons une scène qui affiche trois volets côte à côte :

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()
            }
        }
    }

Dans ce scénario, vous pouvez définir une SceneStrategy pour afficher trois volets si la largeur de la fenêtre est suffisante et si les entrées de votre pile de retour ont déclaré qu'elles pouvaient être affichées dans une scène à trois volets.

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
    }
}

Vous pouvez utiliser votre ThreePaneSceneStrategy avec d'autres stratégies lorsque vous créez votre NavDisplay. Par exemple, nous pourrions également ajouter une TwoPaneStrategy pour afficher deux volets côte à côte lorsqu'il n'y a pas assez d'espace pour en afficher trois.

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

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

Si l'espace est insuffisant pour afficher trois ou deux volets, nos deux stratégies de scène personnalisées renvoient null. Dans ce cas, NavDisplay revient à afficher la dernière entrée de la pile "Retour" dans un seul volet à l'aide de SinglePaneScene. 

En utilisant des scènes et des stratégies, vous pouvez ajouter des mises en page à un, deux ou trois volets à votre application.

Une application adaptative affichant une navigation à trois volets sur les grands écrans.

Consultez la documentation pour savoir comment créer des mises en page personnalisées à l'aide de scènes dans Navigation 3.

Mises en page adaptatives autonomes

Si vous avez besoin d'une mise en page autonome, la bibliothèque Compose Material 3 Adaptive vous aide à créer des UI adaptatives, comme des mises en page de type liste/détails et des mises en page de volets, qui s'adaptent automatiquement aux configurations de fenêtre en fonction des classes de taille de fenêtre ou des postures de l'appareil. 

La bonne nouvelle, c'est que la bibliothèque est déjà à jour avec les nouveaux points d'arrêt. À partir de la version 1.2, les fonctions de directive d'échafaudage de volet par défaut sont compatibles avec les classes de taille de fenêtre de largeur "Large" et "Extra-large".

Il vous suffit d'activer cette fonctionnalité en déclarant dans votre fichier de compilation Gradle que vous souhaitez utiliser les nouveaux points d'arrêt :

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Premiers pas

Découvrez la fonctionnalité d'écran connecté dans la dernière version d'Android. Obtenez Android 16 QPR3 sur un appareil compatible, puis connectez-le à un moniteur externe pour commencer à tester votre application dès aujourd'hui. 

Consultez la documentation mise à jour sur la prise en charge de plusieurs écrans et la gestion des fenêtres pour en savoir plus sur l'implémentation de ces bonnes pratiques.

Commentaires

Vos commentaires sont essentiels pour nous aider à améliorer l'expérience sur ordinateur des écrans connectés. Partagez vos commentaires et signalez les problèmes via nos canaux de commentaires officiels.

Nous nous engageons à faire d'Android une plate-forme polyvalente qui s'adapte aux nombreuses façons dont les utilisateurs souhaitent interagir avec leurs applications et leurs appareils. L'amélioration de la prise en charge des écrans connectés est une autre étape dans cette direction. Nous pensons que vos utilisateurs apprécieront les expériences de bureau que vous allez créer.

*Remarque : Au moment de la rédaction de cet article, les écrans connectés sont compatibles avec les gammes Pixel 8, 9 et 10, ainsi qu'avec de nombreux appareils Samsung, y compris les S26, Fold7, Flip7 et Tab S11.