Les appareils Android s'étendent facilement aux écrans connectés

Nous sommes ravis d'annoncer une étape majeure dans le rapprochement de l'informatique mobile et de bureau sur Android : la compatibilité avec les écrans connectés est désormais en disponibilité générale avec la version Android 16 QPR3.

Comme indiqué lors de la conférence Google I/O 2025, les écrans connectés permettent aux utilisateurs de connecter leurs appareils Android à un écran 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 agrandies, et les utilisateurs peuvent effectuer plusieurs tâches à la fois, comme ils le feraient sur un OS de bureau.

Google et Samsung ont collaboré pour offrir une expérience de fenêtrage du bureau fluide et puissante 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 en disponibilité générale sur les appareils compatibles* pour les utilisateurs qui peuvent connecter leurs téléphones Pixel et Samsung compatibles à des écrans externes. Cela offre de nouvelles opportunités pour créer des expériences d'application plus engageantes 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, avec une barre des tâches qui affiche les applications actives et permet aux utilisateurs d'épingler des applications pour y accéder rapidement. 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 s'étend sur les deux écrans, ce qui permet de profiter d'un espace de travail encore plus grand. 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 Android 16 QPR3, 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 redimensionner les fenêtres et éviter de redémarrer l'application 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 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, tenez compte de ces bonnes pratiques clés pour offrir une expérience optimale dans l'application sur les écrans connectés :

• Ne partez pas du principe que l'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 de manière optimale les événements de modification de configuration et interroger les métriques d'affichage de manière dynamique plutôt que de les mettre en cache.
• Tenez compte des changements de configuration de la densité : les écrans externes peuvent avoir des densités de pixels très différentes de celles de l'écran de l'appareil principal. Assurez-vous que vos mises en page et vos ressources s'adaptent correctement à ces modifications pour que l'UI reste claire et utilisable. 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 correctement en charge 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 l'utilisation de claviers, de souris, de pavés tactiles, de webcams, de micros et d'enceintes externes. Améliorez la compatibilité avec les interactions au clavier et à la souris.

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

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

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 Extra-large.

Les classes de taille de fenêtre sont notre ensemble officiel 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 standards.

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

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

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

Sur les très grands écrans, l'agrandissement de la mise en page étendue d'une tablette n'offre pas toujours la meilleure expérience utilisateur. Par exemple, un client de messagerie peut afficher confortablement deux volets (une boîte aux lettres et un message) dans la classe de taille de fenêtre "Grande". En revanche, sur un écran d'ordinateur très grand, le client de messagerie peut afficher de manière élégante trois, voire quatre volets, par exemple une boîte aux lettres, 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, 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)

Ensuite, appliquez 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 le dernier ajout à la collection Jetpack. Navigation 3, qui vient de sortir dans sa première version stable, est une bibliothèque de navigation puissante conçue pour fonctionner avec Compose.

Navigation 3 est également un excellent outil pour créer des mises en page adaptatives, car elle 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. Un SceneStrategy détermine s'il 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 les mises en page liste/détail et volet d'accompagnement, vous pouvez utiliser les scènes de la bibliothèque Compose Material 3 Adaptive (disponible dans la version 1.3 et ultérieure).

Il est également facile de créer 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 que les entrées de votre pile d'historique 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...
  }
)

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 affiche 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 et trois volets à votre application.

Application adaptative affichant une navigation à trois volets sur les grands écrans

Consultez la documentation pour découvrir 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 interfaces utilisateur adaptatives, telles que des mises en page de liste/vue détaillée et de volet d'accompagnement, 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 "Grande" et "Très grande".

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. Installez Android 16 QPR3 sur un appareil compatible, puis connectez-le à un écran externe pour commencer à tester votre application dès aujourd'hui. 

Consultez la documentation mise à jour sur la compatibilité avec 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 à continuer d'améliorer l'expérience sur ordinateur des écrans connectés. Donnez-nous votre avis 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 vont adorer 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 un large éventail d'appareils Samsung, y compris les S26, Fold7, Flip7 et Tab S11.