Os dispositivos Android se estendem facilmente para telas conectadas

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

Como 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 maximizadas ou de formato livre, e os usuários podem realizar várias tarefas ao mesmo tempo, assim como em um SO para computador.

O Google e a Samsung colaboraram para oferecer uma experiência de modo janela para computador perfeita e eficiente para dispositivos em todo o ecossistema Android que executam o Android 16 quando conectados a uma tela externa. 
Agora, esse recurso está disponível para todos os usuários em dispositivos compatíveis*. Ele permite conectar smartphones Pixel e Samsung 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 computador é iniciada na tela conectada.

A experiência na tela conectada é semelhante à de um computador, 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 área de trabalho na tela enquanto o smartphone mantém o próprio estado.

Quando um dispositivo compatível com o Modo Janela para Computador (como um tablet Samsung Galaxy Tab S11) é conectado a uma tela externa, a sessão de computador é estendida para as duas telas, criando um espaço de trabalho ainda maior. As duas telas funcionam como um sistema contínuo, permitindo que janelas de apps, conteúdo e o cursor se movam livremente entre elas.

Tablet conectado a uma tela externa, estendendo a sessão da área de trabalho para as duas telas.

Por que ele é importante?

No lançamento do Android 16 QPR3, finalizamos os comportamentos de janela, as interações da barra de tarefas e a 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 app para computador, e os usuários se sentirão à vontade. Se o app estiver bloqueado no modo retrato ou presumir uma interface somente por toque, agora é a hora de modernizar.

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

• Não suponha um objeto Display constante:o objeto Display associado ao contexto do app pode mudar quando uma janela é movida para uma tela externa ou se a configuração da tela muda. O app precisa processar eventos de mudança de configuração de maneira adequada e consultar métricas de exibição dinamicamente, em vez de armazená-las em cache.
• Considere as mudanças na configuração de densidade: telas externas podem ter densidades de pixel muito diferentes da tela do dispositivo principal. 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 garanta que a interface do usuário seja dimensionada adequadamente.
• Suporte correto a periféricos externos: quando os usuários se conectam a um monitor externo, geralmente criam um ambiente mais parecido com um computador. Isso geralmente envolve o uso de teclados, mouses, trackpads, webcams, microfones e alto-falantes externos. Melhorar o suporte para interações com teclado e mouse.

Criando para o futuro do computador com ferramentas modernas

Oferecemos várias ferramentas para ajudar você a criar a experiência para computador. 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 do 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 específico 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 essa orientação 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 1200 dp e 1600 dp
• Extragrande: para larguras ≥1600 dp

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

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

Para incluir as novas classes de tamanho de janela no seu 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 mais recente adição à coleção Jetpack. O Navigation 3, que acaba de lançar a primeira versão estável, é uma biblioteca de navegação eficiente 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 que a troca entre esses layouts seja feita sem problemas.

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 é possível criar uma cena. Ao encadear instâncias de SceneStrategy, é possível criar e mostrar cenas diferentes para tamanhos de tela e configurações de dispositivos diferentes.

Para layouts canônicos prontos para uso, como detalhes e listas e painel de suporte, use as cenas da biblioteca adaptativa 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, considere 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 do backstack tiverem declarado que podem ser exibidas 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, as duas estratégias de cena personalizada vão retornar null. Nesse caso, NavDisplay volta a mostrar a última entrada na pilha de retorno em um único painel usando SinglePaneScene. 

Ao usar cenas e estratégias, você pode adicionar layouts de uma, duas e três telas ao seu app.

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

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

Layouts adaptáveis independentes

Se você precisar de um layout independente, a biblioteca adaptável do Compose Material 3 (link em inglês) ajuda a criar interfaces adaptáveis, como layouts de detalhes e listas e painéis de suporte que se adaptam automaticamente às configurações da janela com base nas classes de tamanho da 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 estrutura do painel padrão são compatíveis com classes de tamanho de janela de largura grande e extra grande.

Basta declarar no arquivo de build do Gradle que você quer usar os novos pontos de interrupção:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

Primeiros passos

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

Leia a documentação atualizada sobre suporte a vários monitores e gerenciamento de janelas para saber mais sobre a implementação dessas práticas recomendadas.

Feedback

Sua opinião é fundamental para continuarmos refinando a experiência de tela conectada no computador. Compartilhe suas ideias e informe problemas pelos nossos canais oficiais de feedback.

Nosso compromisso é tornar o Android uma plataforma versátil que se adapta às diversas maneiras como os usuários querem interagir com apps e dispositivos. As melhorias no suporte a telas conectadas são mais um passo nessa direção, e acreditamos que seus usuários vão adorar as experiências para computador que você vai criar.

*Observação:no momento em que este artigo foi escrito, telas conectadas eram 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.