Temos o prazer de anunciar um marco principal na aproximação da computação móvel e de desktop no Android: o suporte a telas conectadas atingiu a disponibilidade geral com o lançamento do Android 16 QPR3!

Conforme mostrado no Google I/O 2025, as telas conectadas permitem que os usuários conectem seus dispositivos Android a um monitor externo e acessem instantaneamente um modo janela para computador. Os apps podem ser usados em janelas de forma livre ou maximizadas, e os usuários podem realizar várias tarefas ao mesmo tempo, como fariam em um SO de desktop.

O Google e a Samsung colaboraram para oferecer uma experiência de modo janela para computador perfeita e poderosa para dispositivos em todo o ecossistema Android que executam o Android 16 quando conectados a uma tela externa.
Agora, isso está disponível para usuários que podem conectar seus smartphones Pixel e Samsung compatíveis a monitores externos, abrindo novas oportunidades para criar experiências de apps mais envolventes e produtivas que se adaptam a diferentes formatos.

Como funciona?

Quando um smartphone ou dobrável Android compatível é conectado a uma tela externa, uma nova sessão de desktop é iniciada na tela conectada.

A experiência na tela conectada é semelhante à de um desktop, incluindo uma barra de tarefas que mostra os apps ativos e permite que os usuários fixem apps para acesso rápido. Os usuários podem executar vários apps lado a lado simultaneamente em janelas redimensionáveis na tela conectada.

Smartphone conectado a uma tela externa com uma sessão de desktop na tela enquanto o smartphone mantém o próprio estado.

Quando um dispositivo que oferece suporte a modo janela para computador (como um tablet Samsung Galaxy Tab S11) é conectado a uma tela externa, a sessão de desktop é estendida para as duas telas, desbloqueando um espaço de trabalho ainda mais amplo. As duas telas funcionam como um sistema contínuo, permitindo que as janelas de apps, o conteúdo e o cursor se movam livremente entre as telas.

Tablet conectado a uma tela externa, estendendo a sessão de desktop para as duas telas.

Por que isso é importante?

No lançamento do Android 16 QPR3, finalizamos os comportamentos de janelas, as interações da barra de tarefas e compatibilidade de entrada (mouse e teclado) que definem a experiência de tela conectada. Também incluímos tratamentos de compatibilidade para dimensionar janelas e evitar reinicializações de apps ao trocar de tela.

Se o app for criado com princípios de design adaptável, ele terá automaticamente a aparência de um desktop, e os usuários se sentirão em casa. Se o app estiver bloqueado para retrato ou assumir uma interface somente de toque, agora é a hora de modernizar.

Em particular, preste atenção a estas práticas recomendadas principais para experiências ideais de apps em telas conectadas:

• Não assuma um objeto Display constante: o objeto Display associado ao contexto do app pode mudar quando uma janela do app é movida para uma tela externa ou se a configuração da tela mudar. O app precisa processar eventos de mudança de configuração normalmente e consultar as métricas de exibição de forma dinâmica, em vez de armazená-las em cache.
• Considere as mudanças de configuração de densidade: as telas externas podem ter densidades de pixels muito diferentes da tela principal do dispositivo. Verifique se os layouts e recursos se adaptam corretamente a essas mudanças para manter a clareza e a usabilidade da interface. Use pixels de densidade independente (dp) para layouts, forneça recursos específicos de densidade e verifique se a interface é dimensionada adequadamente.
• Ofereça suporte a periféricos externos: quando os usuários se conectam a um monitor externo, eles geralmente criam um ambiente mais parecido com um desktop. Isso geralmente envolve o uso de teclados, mouses, trackpads, webcams, microfones e alto-falantes externos. Melhore o suporte para interações de teclado e mouse.

Criando para o futuro do desktop com ferramentas modernas

Oferecemos várias ferramentas para ajudar você a criar a experiência de desktop. Vamos recapitular as atualizações mais recentes das nossas principais bibliotecas adaptáveis.

Novas classes de tamanho de janela: grande e extragrande

A maior atualização no Jetpack WindowManager 1.5.0 é a adição de duas novas classes de tamanho de janela de largura: grande e extragrande.

As classes de tamanho de janela são nosso conjunto oficial e opinativo de pontos de interrupção de janela de visualização que ajudam você a projetar e desenvolver layouts adaptáveis. Com a versão 1.5.0, estamos estendendo essas orientações para telas que vão além do tamanho dos tablets típicos.

Confira os novos pontos de interrupção de largura:

• Grande: para larguras entre 1.200 dp e 1.600 dp
• Extragrande: para larguras ≥1.600 dp

As diferentes classes de tamanho de janela com base na largura da tela.

Em superfícies muito grandes, simplesmente aumentar o layout expandido de um tablet nem sempre é a melhor experiência do usuário. Um cliente de e-mail, por exemplo, pode mostrar dois painéis (uma caixa de correio e uma mensagem) na classe de tamanho de janela expandida. Mas em um monitor de desktop extragrande, o cliente de e-mail pode mostrar três ou até quatro painéis de forma elegante, talvez uma caixa de correio, uma lista de mensagens, o conteúdo completo da mensagem e um painel de calendário/tarefas, tudo de uma só vez.

Para incluir as novas classes de tamanho de janela no projeto, basta chamar a função do conjunto WindowSizeClass.BREAKPOINTS_V2 em vez de WindowSizeClass.BREAKPOINTS_V1:

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

val sizeClass = WindowSizeClass.BREAKPOINTS_V2
    .computeWindowSizeClass(currentWindowMetrics)

Em seguida, aplique o layout correto quando tiver certeza de que o app tem pelo menos esse espaço:

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

Criar layouts adaptáveis com o Jetpack Navigation 3

O Navigation 3 é a adição mais recente à coleção Jetpack. O Navigation 3, que acabou de atingir o primeiro lançamento estável, é uma biblioteca de navegação poderosa projetada para funcionar com o Compose.

O Navigation 3 também é uma ótima ferramenta para criar layouts adaptáveis, permitindo que vários destinos sejam mostrados ao mesmo tempo e permitindo a troca perfeita entre esses layouts.

Esse sistema para gerenciar o fluxo da interface do app é baseado em cenas. Uma cena é um layout que mostra um ou mais destinos ao mesmo tempo. Uma SceneStrategy determina se ela pode criar uma cena. Encadear instâncias de SceneStrategy permite criar e mostrar cenas diferentes para diferentes tamanhos de tela e configurações de dispositivos.

Para layouts canônicos prontos para uso, como detalhes e listas e painel de suporte, você pode usar as cenas da biblioteca adaptável do Compose Material 3 (disponível na versão 1.3 e mais recentes).

Também é fácil criar suas próprias cenas personalizadas modificando as receitas de cena ou começando do zero. Por exemplo, vamos considerar uma cena que mostra três painéis lado a lado:

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

Nesse cenário, você pode definir uma SceneStrategy para mostrar três painéis se a largura da janela for suficiente e as entradas da backstack tiverem declarado que oferecem suporte à exibição em uma cena de três painéis.

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

Você pode usar sua ThreePaneSceneStrategy com outras estratégias ao criar seu NavDisplay. Por exemplo, também podemos adicionar uma TwoPaneStrategy para mostrar dois painéis lado a lado quando não houver espaço suficiente para mostrar três.

  val strategy = ThreePaneSceneStrategy() then TwoPaneSceneStrategy()

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

Se não houver espaço suficiente para mostrar três ou dois painéis, nossas estratégias de cena personalizadas vão retornar null.Nesse caso, NavDisplay vai voltar a mostrar a última entrada na backstack em um único painel usando SinglePaneScene.

Ao usar cenas e estratégias, você pode adicionar layouts de um, dois e três painéis ao seu app.

Um app adaptável mostrando a navegação de três painéis em telas largas.

Consulte a documentação para saber mais sobre como criar layouts personalizados usando cenas no Navigation 3.

Layouts adaptáveis independentes

Se você precisar de um layout independente, a biblioteca adaptável do Compose Material 3 ajuda a criar interfaces adaptáveis, como layouts de detalhes e listas e painel de suporte, que se adaptam automaticamente às configurações de janela com base nas classes de tamanho de janela ou nas posturas do dispositivo. 

A boa notícia é que a biblioteca já está atualizada com os novos pontos de interrupção. A partir da versão 1.2, as funções de diretiva de scaffold de painel padrão oferecem suporte a classes de tamanho de janela de largura grande e extragrande.

Você só precisa ativar declarando no arquivo de build do Gradle que quer usar os novos pontos de interrupção:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Primeiros passos

Confira o recurso de tela conectada na versão mais recente do Android. Instale Android 16 QPR3 em um dispositivo compatível e conecte-o a um monitor externo para começar a testar seu app hoje mesmo. 

Consulte a documentação atualizada sobre suporte a várias telas e gerenciamento de janelas para saber mais sobre como implementar essas práticas recomendadas.

Feedback

Seu feedback é fundamental para continuarmos a refinar a experiência de desktop de tela conectada. Compartilhe suas ideias e informe problemas nos nossos canais de feedback oficiais.

Estamos comprometidos em tornar o Android uma plataforma versátil que se adapta às muitas maneiras como os usuários querem interagir com os apps e dispositivos. As melhorias no suporte a telas conectadas são mais um passo nessa direção, e achamos que seus usuários vão adorar as experiências de desktop que você vai criar.

*Observação:no momento em que o artigo foi escrito, as telas conectadas são compatíveis com as séries Pixel 8, 9 e 10 e com uma ampla variedade de dispositivos Samsung, incluindo S26, Fold7, Flip7 e Tab S11.