Mais de 300 milhões de dispositivos Android de tela grande, incluindo tablets, dobráveis, Googlebooks, dispositivos ChromeOS, telas de carro e TVs, estão em uso atualmente, e esse número não para de crescer. Para oferecer uma experiência do usuário ideal no número e na diversidade crescentes 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 de layout com base nas mudanças na exibição do app, principalmente no tamanho da janela. Mas os apps adaptáveis também se ajustam a mudanças na posição de dispositivos dobráveis, como de mesa ou de livro, e a mudanças na densidade da tela e no tamanho da fonte.
Em vez de apenas esticar ou reduzir os elementos da interface em resposta a diferentes tamanhos de janela, os apps adaptáveis substituem componentes de layout e mostram ou ocultam 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 geralmente 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 realizam várias tarefas ao mesmo tempo no modo de várias janelas para ter uma experiência no app melhor e aumentar a 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íficas para tablets e dobráveis, o que permite que os usuários descubram apps de alta qualidade.
O Google Play classifica os apps e jogos otimizados para telas grandes em uma posição mais alta do que os não otimizados. O Google 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 de vários dispositivos vejam notas e avaliações específicas de telas grandes nos smartphones.
Os apps que não atendem aos padrões de qualidade da Google Play Store para telas grandes mostram um aviso na página de detalhes do app. O aviso informa aos usuários que o app pode não funcionar bem em dispositivos de tela grande.
Crie apps adaptáveis para aumentar a facilidade de descoberta no Google Play e maximizar o número de dispositivos que podem fazer o download do seu app.
Como começar
Pense no design adaptável em todas as fases do desenvolvimento do app, do planejamento à implantação. Informar 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 futuros formatos e modos de janela.
Para criar um app adaptável que ofereça suporte a todos os tamanhos e configurações de tela, faça o seguinte:
- Usar classes de tamanho de janela para tomar decisões de layout
- Criar com a biblioteca adaptável do Compose Material 3
- Suporte para entrada além do toque
- Testar em todos os tipos de dispositivo
Habilidades do Android
Ver no GitHubTornar seu app adaptável
adaptive para atualizar a interface do seu app para que ele se adapte a diferentes dispositivos Android e telas.android skills add adaptiveClasses de tamanho de janela
As dimensões da janela do app podem ser diferentes em dispositivos distintos ou no mesmo dispositivo, no caso de dobráveis, mesmo quando o app está em tela cheia. Orientações diferentes do 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 do app como compactas, médias ou expandidas com base na largura ou altura da janela.
Calcule o WindowSizeClass do app usando a
função de nível superior currentWindowAdaptiveInfo() 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 de janela muda:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Painéis de conteúdo
O layout de uma atividade às vezes é chamado de tela. Por exemplo, seu 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 ser exibidas ao mesmo tempo. Painel é um termo mais preciso para exibições 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 no Material Design.
Os painéis são navegáveis. Nas classes de tamanho de janela compacta e média, 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 detalhes e listas. 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, que pode ser 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, posturas dobráveis e localização da articulação, 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 postura 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 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 postura de um dobrável muda ou a densidade da tela ou a fonte é alterada.
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 um 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
receber uma lista de objetos DisplayFeature para o dispositivo. Entre os recursos de tela,
está o FoldingFeature.State, que indica se o dispositivo está
total ou parcialmente aberto.
A biblioteca adaptável do Compose Material 3 oferece a
função de nível superior currentWindowAdaptiveInfo(), que retorna uma
instância de WindowAdaptiveInfo contendo windowPosture.
Entrada além do toque
Os usuários geralmente conectam teclados, trackpads, mouses e stylus externos a dispositivos de tela grande. Os periféricos melhoram a produtividade do usuário, a precisão de 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 do 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.Assistente de atalhos do teclado: permite que os usuários descubram os atalhos do teclado da plataforma Android e dos apps. Publique os atalhos do teclado do seu app no Auxiliar de Atalhos do Teclado substituindo o callback de janela
onProvideKeyboardShortcuts().
Para oferecer suporte total a formatos de todos os tamanhos, os apps adaptáveis aceitam 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 lado do host e prévias do Compose para verificar os layouts do app. Execute o app em emuladores do Android Studio e em dispositivos Android remotos hospedados em data centers do Google.
Diretrizes de qualidade de apps para telas grandes
As diretrizes de qualidade de apps em 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 ideais 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 forma 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 pacote 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 lado do host
Os testes de captura de tela do lado 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 lado do host para testar sua IU em uma variedade de tamanhos de tela.
Para mais informações, consulte Teste de captura de tela de visualização do Compose.
Visualizações do Compose
As prévias do Compose permitem que você verifique a IU do app na visualização de design do Android
Studio. As prévias usam anotações, como @PreviewScreenSizes,
@PreviewFontScale e @PreviewLightDark, para que você possa ver o conteúdo
combinável em várias configurações. Você pode até interagir com as prévias.
O Android Studio também destaca problemas comuns de usabilidade nas prévias, como botões ou campos de texto muito largos.
Para mais informações, consulte Visualizar a interface com prévias de elementos combináveis.
Emuladores
O Android Studio oferece vários emuladores para testar diferentes tamanhos de layout:
- Emulador redimensionável: emula um smartphone, tablet ou dispositivo dobrável e permite alternar entre eles rapidamente.
- Emulador do Pixel Fold: emula o smartphone dobrável de tela grande Pixel Fold.
- Emulador do Pixel Tablet: emula o dispositivo de tela grande do Pixel Tablet.
- Emulador de computador: permite testar janelas de formato livre, passagem do mouse e atalhos de teclado.
Streaming em dispositivo remoto
Conecte-se com segurança a dispositivos Android remotos hospedados em data centers do Google e execute seu 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