Mais de 300 milhões de dispositivos Android de tela grande, incluindo tablets, dobráveis, dispositivos ChromeOS, telas de carros e TVs, estão em uso hoje, e mais estão chegando continuamente. Para oferecer uma experiência do usuário ideal no número crescente e na diversidade de dispositivos de tela grande —bem como em smartphones padrão—crie apps adaptáveis.
O que são apps adaptáveis?
Os apps adaptáveis mudam os layouts com base nas mudanças na tela do app, principalmente no tamanho da janela. No entanto, eles também acomodam mudanças na posição de dispositivos dobráveis, como a posição de mesa ou de livro, e mudanças na densidade da tela e no tamanho da fonte.
Em vez de apenas esticar ou encolher elementos da interface em resposta a diferentes tamanhos de janela, os apps adaptáveis substituem os componentes de layout e mostram ou ocultam o conteúdo. Por exemplo, em smartphones padrão, um app adaptável pode mostrar uma barra de navegação na parte de baixo, mas em telas grandes, uma coluna de navegação. Em telas grandes, os apps adaptáveis mostram mais conteúdo, como um layout de detalhes e listas de dois painéis. Em telas pequenas, menos conteúdo, seja a lista ou os detalhes.
No passado, os apps eram executados em tela cheia. Hoje, os apps são executados no modo de várias janelas em janelas de tamanho arbitrário, independentemente do tamanho da tela do dispositivo. Os usuários podem mudar o tamanho da janela a qualquer momento. Portanto, mesmo em um único tipo de dispositivo, os apps precisam ser adaptáveis.
Os apps adaptáveis têm uma ótima aparência e funcionam bem em qualquer dispositivo e configuração.
Por que criar interfaces adaptáveis?
Os usuários esperam que o app funcione perfeitamente em todos os dispositivos e ofereça recursos aprimorados em telas grandes. Os usuários fazem várias tarefas no modo de várias janelas para uma experiência de app aprimorada e maior produtividade.
Os apps limitados a uma única tarefa em smartphones padrão perdem uma base de usuários em expansão com diversas possibilidades.
Google Play
O Google Play oferece coleções e recomendações de apps específicos para tablets e dobráveis, que permitem que os usuários descubram apps de alta qualidade.
O Play classifica os apps e jogos otimizados para telas grandes mais alto do que os não otimizados. O Play baseia a classificação nas diretrizes de qualidade de apps para telas grandes. Uma classificação mais alta aumenta a facilidade de descoberta, permitindo que os usuários multidispositivo vejam classificações e avaliações específicas de telas grandes nos smartphones.
Os apps que não atendem aos padrões de qualidade de telas grandes da Play Store mostram um aviso na página de detalhes do app. O aviso informa aos usuários que o app pode não ter um bom desempenho em dispositivos de tela grande.
Crie apps adaptáveis para ampliar a capacidade de descoberta no Google Play e maximizar o número de dispositivos que podem fazer o download do app.
Como começar
Pense no design adaptável em todas as fases do desenvolvimento de apps, do planejamento à implantação. Informe os designers gráficos sobre o design adaptável. Projete seu app para ser adaptável e você vai criar um app gerenciável, extensível e pronto para formatos e modos de janela futuros.
Para criar um app adaptável que ofereça suporte a todos os tamanhos e configurações de tela, faça o seguinte:
- Use classes de tamanho de janela para tomar decisões de layout.
- Crie com a biblioteca adaptável do Compose Material 3.
- Ofereça suporte a entradas além do toque.
- Teste em todos os tipos de dispositivos.
Classes de tamanho de janela
As dimensões da janela do app podem ser diferentes em dispositivos diferentes ou no mesmo dispositivo no caso de dobráveis, mesmo quando o app está em tela cheia. Diferentes orientações de dispositivo produzem proporções diferentes. No modo de várias janelas, o tamanho, a proporção e a orientação da janela do app podem ser diferentes da tela do dispositivo.
Os apps adaptáveis simplificam e generalizam o problema de determinar e gerenciar o tamanho, a proporção e a orientação da janela, considerando apenas a janela do app ao renderizar layouts, o que também funciona quando a janela do app está em tela cheia.
As classes de tamanho de janela categorizam as janelas de apps como compactas, médias ou expandidas com base na largura ou altura da janela.
Calcule WindowSizeClass do app usando a
currentWindowAdaptiveInfo() função de nível superior da biblioteca adaptável do
Compose Material 3. A função retorna uma instância de
WindowAdaptiveInfo, que contém windowSizeClass. O app recebe atualizações sempre que a classe de tamanho da janela muda:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Painéis de conteúdo
O layout de uma atividade às vezes é chamado de tela. Por exemplo, o app pode ter uma tela inicial, uma tela de lista e uma tela de detalhes do item. A terminologia implica que cada atividade preenche a tela do dispositivo.
No entanto, em telas de dispositivos grandes o suficiente para oferecer suporte à classe de tamanho de janela de largura expandida, várias telas de atividade podem aparecer na tela ao mesmo tempo. Painel é um termo mais preciso para telas de conteúdo de atividades individuais.
As classes de tamanho de janela permitem determinar quantos painéis de conteúdo mostrar em layouts de vários painéis, conforme especificado em Material Design.
Os painéis são navegáveis. Em classes de tamanho de janela compactas e médias, os apps mostram um único painel. Portanto, a navegação para qualquer destino mostra um painel.
Na classe de tamanho de janela expandida, os apps podem mostrar conteúdo relacionado em vários painéis, como um layout de lista e detalhes. A navegação para qualquer um dos painéis mostra o layout de dois painéis. Se o tamanho da janela mudar para compacto ou médio, os apps adaptáveis vão mostrar apenas um painel, o destino de navegação, seja a lista ou os detalhes.
|
|
|
Compose Material 3 Adaptive
O Jetpack Compose é a abordagem moderna e declarativa para criar apps adaptáveis sem a duplicação e o trabalho de manutenção de vários arquivos de layout.
A biblioteca adaptável do Compose Material 3 contém elementos combináveis que gerenciam classes de tamanho de janela, componentes de navegação, layouts de vários painéis e posições dobráveis e localização de dobradiças, por exemplo:
NavigationSuiteScaffold: alterna automaticamente entre a barra de navegação e a coluna de navegação, dependendo da classe de tamanho da janela do app e da posição do dispositivo.ListDetailPaneScaffold: implementa o layout canônico de detalhes e listas.Adapta o layout ao tamanho da janela do app. Apresenta uma lista e os detalhes de um item de lista em painéis lado a lado na classe de tamanho de janela expandida, mas apenas a lista ou os detalhes nas classes de tamanho de janela compacta e média.
SupportingPaneScaffold: implementa o layout canônico do painel de suporte.Apresenta o painel de conteúdo principal e um painel de suporte na classe de tamanho de janela expandida, mas apenas o painel de conteúdo principal nas classes de tamanho de janela compacta e média.
A biblioteca adaptável do Compose Material 3 é uma dependência fundamental para o desenvolvimento de apps adaptáveis.
Configuração e continuidade
Os apps adaptáveis mantêm a continuidade durante as mudanças de configuração.
Uma mudança de configuração ocorre quando a janela do app é redimensionada, a posição de um dobrável muda ou a densidade da tela ou a fonte muda.
Por padrão, as mudanças de configuração recriam a atividade do app, e todo o estado da atividade é perdido. Para manter a continuidade, os apps adaptáveis salvam o estado no
método onSaveInstanceState() da atividade ou em uma ViewModel.
Postura
Os apps adaptáveis respondem a mudanças na posição de dispositivos dobráveis. As posições incluem a de mesa e a de livro.
A interface WindowInfoTracker na Jetpack WindowManager permite que você receba uma lista de objetos DisplayFeature para o dispositivo. Entre os recursos de exibição
está FoldingFeature.State, que indica se o dispositivo está
totalmente ou parcialmente aberto.
A biblioteca adaptável do Compose Material 3 fornece a
currentWindowAdaptiveInfo() função de nível superior, que retorna uma
instância de WindowAdaptiveInfo contendo windowPosture.
Entrada além do toque
Os usuários geralmente conectam teclados externos, trackpads, mouses e stylus a dispositivos de tela grande. Os periféricos melhoram a produtividade do usuário, a precisão da entrada, a expressão pessoal e a acessibilidade. A maioria dos dispositivos ChromeOS vem com teclados e trackpads integrados.
Os apps adaptáveis oferecem suporte a dispositivos de entrada externa, mas o framework Android faz grande parte do trabalho para você:
Jetpack Compose 1.7 e versões mais recentes: a navegação por guias do teclado e o clique, a seleção e a rolagem do mouse ou trackpad são compatíveis por padrão.
Biblioteca
androidx.compose.material3do Jetpack: permite que os usuários escrevam em qualquer componenteTextFieldusando uma stylus.Teclado Shortcuts Helper: torna os atalhos de teclado da plataforma Android e do app detectáveis pelos usuários. Publique os atalhos de teclado do app no Teclado Shortcuts Helper substituindo o
onProvideKeyboardShortcuts()callback da janela.
Para oferecer suporte total a formatos de todos os tamanhos, os apps adaptáveis oferecem suporte a entradas de todos os tipos.
Como testar apps adaptáveis
Teste diferentes tamanhos de tela e janela e diferentes configurações de dispositivo. Use capturas de tela do host e visualizações do Compose para verificar os layouts do app. Execute o app em emuladores do Android Studio e dispositivos Android remotos hospedados em data centers do Google.
Diretrizes de qualidade de apps para telas grandes
As diretrizes de qualidade de apps para telas grandes ajudam a verificar se o app adaptável funciona bem em tablets, dobráveis e dispositivos ChromeOS. As diretrizes incluem testes que permitem verificar a funcionalidade do app para jornadas críticas do usuário. Embora as diretrizes se concentrem em telas grandes, elas são compatíveis com todos os tamanhos de tela.
Várias configurações
A interface DeviceConfigurationOverride no Compose 1.7 e versões mais recentes
permite substituir vários aspectos da configuração do dispositivo. A API simula diferentes configurações de dispositivo de maneira localizada para qualquer conteúdo combinável que você queira testar. Por exemplo, é possível testar vários tamanhos de interface arbitrários em uma única execução do conjunto de testes em um único dispositivo ou emulador.
Com a função de extensão DeviceConfigurationOverride.then(), é possível
testar vários parâmetros de configuração, como tamanho da fonte, localidade, tema e
tamanho do layout, tudo ao mesmo tempo.
Capturas de tela do host
Os testes de captura de tela do host são uma maneira rápida e escalonável de verificar a aparência visual dos layouts do app. Use capturas de tela do host para testar a interface em vários tamanhos de tela.
Para mais informações, consulte Testes de captura de tela de visualização do Compose.
Visualizações do Compose
As visualizações do Compose permitem verificar a interface do app na visualização de design do Android Studio. As visualizações usam anotações, como @PreviewScreenSizes,
@PreviewFontScale e @PreviewLightDark, para permitir que você veja o conteúdo combinável
em várias configurações. Você pode até interagir com as visualizações.
O Android Studio também destaca problemas comuns de usabilidade nas visualizações, como botões ou campos de texto muito largos.
Para mais informações, consulte Visualizar a interface com visualizações combináveis.
Emuladores
O Android Studio oferece uma variedade de emuladores para testar diferentes tamanhos de layout:
- Emulador redimensionável: emula um smartphone, tablet ou dispositivo dobrável e permite alternar entre eles em tempo real.
- Emulador do Pixel Fold: emula o smartphone dobrável de tela grande do Pixel Fold.
- Emulador do Pixel Tablet: emula o dispositivo de tela grande do Pixel Tablet.
- Emulador de computador: permite testar janelas de formato livre, passar o cursor do mouse e atalhos de teclado.
Streaming de dispositivos remotos
Conecte-se com segurança a dispositivos Android remotos hospedados em data centers do Google e execute o app nos dispositivos Pixel e Samsung mais recentes. Instale e depure apps, execute comandos ADB e gire e dobre dispositivos para verificar se o app funciona bem em vários dispositivos reais.
O streaming de dispositivos remotos está integrado ao Android Studio. Para mais informações, consulte Streaming de dispositivos Android com tecnologia do Firebase.
Outros recursos
- Apresentação do I/O: como criar apps Android adaptáveis (link em inglês)