Устройства Android легко подключаются к внешним дисплеям

Мы рады сообщить, что в Android 16 QPR3 стала общедоступна поддержка подключенных дисплеев. Это важный шаг к объединению мобильных и настольных компьютеров на Android.

Как было показано на Google I/O 2025, подключенные дисплеи позволяют пользователям подключать свои устройства Android к внешнему монитору и мгновенно получать доступ к многооконному режиму. Приложения можно использовать в окнах произвольной формы или в развернутых окнах, а пользователи могут работать в многозадачном режиме, как на настольной ОС.

Google и Samsung совместно разработали удобный и мощный многооконный режим для устройств с Android 16, подключенных к внешнему дисплею.
Теперь эта функция доступна на поддерживаемых устройствах* пользователям, которые могут подключать свои телефоны Pixel и Samsung к внешним мониторам. Это открывает новые возможности для создания более привлекательных и эффективных приложений, адаптирующихся к различным форм-факторам.

Как это работает?

Когда поддерживаемый телефон или складное устройство Android подключается к внешнему экрану, на нем запускается новый сеанс рабочего стола.

Интерфейс на подключенном дисплее похож на интерфейс компьютера. В частности, на нем есть панель задач, на которой показаны активные приложения и к которой можно закрепить приложения для быстрого доступа. Пользователи могут одновременно запускать несколько приложений в окнах, размер которых можно изменять, на подключенном дисплее.

Телефон подключен к внешнему дисплею, на котором запущен сеанс рабочего стола. При этом телефон сохраняет свое состояние.

Если устройство, поддерживающее многооконный режим (например, планшет Samsung Galaxy Tab S11), подключено к внешнему дисплею, рабочая область расширяется на оба экрана. Оба экрана будут работать как одна система, позволяя окнам приложений, контенту и курсору свободно перемещаться между ними.

Планшет, подключенный к внешнему дисплею, на который расширен рабочий стол.

Почему это важно?

В выпуске Android 16 QPR3 мы доработали поведение окон, взаимодействие с панелью задач и совместимость ввода (мышь и клавиатура), которые определяют работу с подключенным дисплеем. Мы также добавили режимы совместимости, чтобы масштабировать окна и избегать перезапуска приложений при переключении экранов.

Если ваше приложение создано с использованием принципов адаптивного дизайна, оно будет автоматически выглядеть как версия для компьютера, и пользователям будет удобно с ним работать. Если в приложении заблокирована портретная ориентация или предполагается только сенсорный интерфейс, самое время это исправить.

В частности, обратите внимание на следующие рекомендации по оптимизации удобства использования приложений для подключенных дисплеев:

• Не рассчитывайте на постоянство объекта Display. Объект Display, связанный с контекстом приложения, может измениться, если окно приложения перемещено на внешний дисплей или если изменилась конфигурация дисплея. Приложение должно корректно обрабатывать события изменения конфигурации и динамически запрашивать показатели экрана, а не кешировать их.
• Учитывайте изменения плотности пикселей. Плотность пикселей на внешних дисплеях может значительно отличаться от плотности пикселей на основном экране устройства. Убедитесь, что макеты и ресурсы адаптируются к этим изменениям, чтобы интерфейс оставался понятным и удобным. Используйте пиксели, не зависящие от плотности экрана (dp), для макетов, предоставляйте ресурсы, зависящие от плотности, и убедитесь, что интерфейс масштабируется правильно.
• Правильно поддерживайте внешние периферийные устройства. Подключая внешний монитор, пользователи часто создают среду, похожую на рабочий стол. Для этого часто используются внешние клавиатуры, мыши, сенсорные панели, веб-камеры, микрофоны и колонки. Улучшите поддержку клавиатуры и мыши.

Создание будущего для компьютеров с помощью современных инструментов

Мы предлагаем несколько инструментов, которые помогут вам создать версию для ПК. Давайте вспомним, какие обновления мы недавно добавили в наши основные библиотеки адаптивных макетов.

Новые классы размеров окон: большой и очень большой

Самое большое изменение в Jetpack WindowManager 1.5.0 – это добавление двух новых классов размеров окон по ширине: Large и Extra-large.

Классы размеров окон – это наш официальный набор контрольных точек области просмотра, которые помогают разрабатывать адаптивные макеты. В версии 1.5.0 мы расширяем эти рекомендации для экранов, которые больше обычных планшетов.

Вот новые контрольные точки ширины:

• Большой: для экранов шириной от 1200 до 1600 dp.
• Очень большой: для экранов шириной от 1600 dp.

Разные классы размеров окон в зависимости от ширины экрана.

На очень больших экранах простое масштабирование развернутого макета для планшетов не всегда обеспечивает наилучшее удобство для пользователей. Например, почтовый клиент может удобно отображать две панели (почтовый ящик и сообщение) в классе размера окна «Расширенное». Но на очень большом мониторе настольного компьютера почтовый клиент может элегантно отображать три или даже четыре панели, возможно, почтовый ящик, список сообщений, полное содержимое сообщения и панель календаря/задач, и все это одновременно.

Чтобы включить в проект новые классы размеров окон, просто вызовите функцию из набора WindowSizeClass.BREAKPOINTS_V2 вместо WindowSizeClass.BREAKPOINTS_V1:

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

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Затем примените правильный макет, когда будете уверены, что в вашем приложении есть хотя бы столько места:

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

Как создавать адаптивные макеты с помощью Jetpack Navigation 3

Navigation 3 – это новейшее дополнение к коллекции Jetpack. Navigation 3 – это мощная библиотека навигации, разработанная для работы с Compose. Недавно вышла ее первая стабильная версия.

Navigation 3 также отлично подходит для создания адаптивных макетов, поскольку позволяет одновременно показывать несколько целевых страниц и легко переключаться между макетами.

Эта система управления интерфейсом приложения основана на сценах. Сцена – это макет, в котором одновременно показывается один или несколько целевых объектов. SceneStrategy определяет, можно ли создать сцену. Объединяя экземпляры SceneStrategy, вы можете создавать и показывать разные сцены для разных размеров экрана и конфигураций устройств.

Для готовых канонических макетов, таких как список и подробные сведения и вспомогательная панель, вы можете использовать сцены из библиотеки Compose Material 3 Adaptive (доступно в версии 1.3 и выше).

Вы также можете легко создавать собственные сцены, изменяя рецепты сцен или начиная с нуля. Рассмотрим сцену, в которой рядом друг с другом расположены три панели:

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

В этом сценарии вы можете определить SceneStrategy, чтобы показывать три панели, если ширина окна достаточна и записи из вашего обратного стека заявляют, что они поддерживают отображение в сцене с тремя панелями.

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

При создании NavDisplay вы можете использовать ThreePaneSceneStrategy вместе с другими стратегиями. Например, мы также можем добавить TwoPaneStrategy, чтобы отображать две панели рядом, когда недостаточно места для отображения трех.

val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

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

Если места для отображения трех или двух панелей недостаточно, обе наши стратегии пользовательских сцен возвращают null. В этом случае NavDisplay возвращается к отображению последней записи в обратном стеке на одной панели с помощью SinglePaneScene.

Используя сцены и стратегии, вы можете добавить в приложение макеты с одной, двумя и тремя панелями.

Адаптивное приложение с тремя панелями навигации на широких экранах.

Подробнее о том, как создавать собственные макеты с помощью сцен в Navigation 3…

Отдельные адаптивные макеты

Если вам нужен отдельный макет, библиотека Compose Material 3 Adaptive поможет вам создать адаптивные интерфейсы, например макеты со списком и подробными сведениями и вспомогательной панелью, которые автоматически адаптируются к конфигурациям окон на основе классов размеров окон или положений устройств. 

Хорошая новость заключается в том, что библиотека уже актуальна с учетом новых контрольных точек! Начиная с версии 1.2, функции директив каркаса панели по умолчанию поддерживают классы размеров окон большой и сверхбольшой ширины.

Чтобы использовать новые контрольные точки, вам нужно только указать это в файле сборки Gradle:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Начало работы

Узнайте о функции подключенного дисплея в последней версии Android. Установите Android 16 QPR3 на поддерживаемое устройство и подключите его к внешнему монитору, чтобы начать тестирование приложения.

Чтобы узнать больше о том, как реализовать эти рекомендации, ознакомьтесь с обновленной документацией по поддержке нескольких экранов и управлению окнами.

Отзывы

Ваши отзывы очень важны для нас, поскольку мы продолжаем улучшать работу подключенных дисплеев на компьютерах. Поделитесь своим мнением и сообщите о проблемах через официальные каналы обратной связи.

Мы стремимся сделать Android универсальной платформой, которая адаптируется к различным способам взаимодействия пользователей с приложениями и устройствами. Улучшения в поддержке подключенных дисплеев – ещё один шаг в этом направлении. Мы уверены, что пользователям понравятся ваши приложения для компьютеров.

*Примечание. На момент написания статьи подключение дисплеев поддерживается на устройствах серий Pixel 8, 9, 10 и на многих устройствах Samsung, включая S26, Fold7, Flip7 и Tab S11.