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 est désormais disponible pour tous avec la version Android 16 QPR3 !

Comme indiqué 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 de bureau. Les applications peuvent être utilisées dans des fenêtres au format libre ou maximisées, et les utilisateurs peuvent effectuer plusieurs tâches à la fois comme sur un système d'exploitation de bureau.

Google et Samsung ont collaboré pour offrir une expérience de fenêtrage de bureau fluide et puissante aux 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 d'appareils compatibles* qui peuvent connecter leurs téléphones Pixel et Samsung compatibles à des moniteurs externes. Ils peuvent ainsi créer des expériences d'application plus attrayantes et plus productives qui s'adaptent à différents formats.

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 d'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 de 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 disposer 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 aux deux écrans.

Quelle importance ?

Dans la version Android 16 QPR3, nous avons finalisé les comportements de fenêtrage, les interactions de la barre des tâches et la compatibilité des entrées (souris et clavier) qui définissent l'expérience d'écran 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'un ordinateur de bureau, et les utilisateurs se sentiront comme chez eux. Si l'application est verrouillée en mode Portrait ou suppose une interface tactile uniquement, il est temps de la moderniser.

En particulier, faites attention à ces bonnes pratiques clés pour une expérience d'application optimale 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 changement de 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 écrans externes peuvent avoir des densités de pixels 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 convivialité de l'interface utilisateur. 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 interface utilisateur s'adapte correctement.
• Assurez-vous de la prise en charge correcte des périphériques externes : lorsque les utilisateurs se connectent à un moniteur externe, ils créent souvent un environnement plus semblable à celui d'un ordinateur de bureau. Cela implique fréquemment l'utilisation de claviers, de souris, de trackpads, de webcams, de microphones et de haut-parleurs externes. Améliorez la prise en charge des interactions avec le clavier et la souris.

Préparer l'avenir du bureau avec des outils modernes

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

Nouvelles classes de taille de fenêtre : Large et Extra-large

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 Extra-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 qui dépassent la taille des tablettes classiques.

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

• Large : pour les largeurs comprises entre 1 200 dp et 1 600 dp
• Extra-large : pour les largeurs supérieures ou égales à 1 600 dp

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

Sur de très grandes surfaces, la simple mise à l'échelle d'une mise en page développée de tablette n'est pas toujours la meilleure expérience utilisateur. Un client de messagerie, par exemple, peut afficher confortablement deux volets (une boîte de réception et un message) dans la classe de taille de fenêtre développée. Mais sur un moniteur de bureau extra-large, le client de messagerie peut afficher élégamment trois ou même quatre volets, peut-être une boîte de réception, une liste de messages, le contenu complet du message et un panneau d'agenda/de tâches, le tout en même temps.

Pour inclure les nouvelles classes de taille de fenêtre dans votre projet, appelez simplement 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, qui vient d'atteindre sa première version stable, 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 des 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 standards prêtes à l'emploi, telles que la liste-détails et le volet de support, vous pouvez utiliser les scènes de la bibliothèque Compose Material 3 Adaptive (disponible dans la version 1.3 et versions 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. Prenons l'exemple d'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 sont compatibles avec l'affichage 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, vous pouvez é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...
  }
)

S'il n'y a pas assez d'espace pour afficher trois ou deux volets, nos deux stratégies de scène personnalisées renvoient null. Dans ce cas, NavDisplay revient à l'affichage de la dernière entrée de la pile de 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 et trois volets à votre application.

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

Consultez la documentation pour en savoir plus sur la création de 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 interfaces utilisateur adaptatives telles que des mises en page de liste-détails et de volet de support qui s'adaptent automatiquement aux configurations de fenêtre en fonction des classes de taille de fenêtre ou des postures de l'appareil. 

Bonne nouvelle : 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 en largeur Large et Extra-large.

Il vous suffit de vous inscrire en déclarant dans votre fichier de build 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 multi-é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 continuer à améliorer l'expérience de bureau sur écran connecté. Partagez vos idées 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. Les améliorations apportées à la prise en charge des écrans connectés constituent une autre étape dans cette direction, et nous pensons que vos utilisateurs apprécieront les expériences de bureau que vous créerez.

*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 un large éventail d'appareils Samsung, y compris les S26, Fold7, Flip7 et Tab S11.