Criar designs para diferentes formatos

O design da interface do app não está vinculado a um determinado formato do dispositivo. Os apps Android precisam se adaptar a vários tipos diferentes de dispositivos, desde celulares de 4 polegadas a TVs de 50 polegadas e dispositivos ChromeOS com janelas redimensionáveis.

A interface do usuário do seu app é desenhada dentro de uma janela, cujo tamanho pode ser alterado à vontade. Você usa qualificadores de recursos para fornecer layouts diferentes para tamanhos variados de janelas. Essas diferenças podem ocorrer devido a restrições no tamanho da tela do dispositivo ou pelo usuário que usa o modo de várias janelas para mudar o tamanho da janela.

Como projetar conteúdo responsivo

Você precisa fornecer uma experiência avançada para todos os usuários. Cada tela do seu app precisa aproveitar ao máximo o espaço disponível da janela.

Por exemplo, um app executado em uma janela ocupando toda a largura da tela de um smartphone pode ocultar detalhes de uma parte do conteúdo ao entrar no modo de várias janelas. Pode também expandir a interface para fornecer mais conteúdo ao executar em uma janela ocupando toda a largura da tela de um dispositivo ChromeOS.

Além de abordar essas expectativas do usuário, muitas vezes é necessário fornecer mais conteúdo em dispositivos maiores para evitar deixar espaço em branco ou introduzir involuntariamente interações inadequadas. Na figura a seguir, você pode ver alguns dos problemas que podem surgir durante a adaptação de um design de interface do usuário para uma janela maior:

Figura 1. Conteúdo insuficiente em janelas de largura ampla leva a um espaço em branco inadequado e a linhas excessivamente longas.

Para saber mais sobre o design de experiências de navegação responsiva, consulte Navegação para IUs responsivas.

Oferecer experiências personalizadas dos usuários

É importante oferecer experiências únicas que vão além de expandir as visualizações de conteúdo para preencher o espaço disponível. Você pode personalizar interfaces para criar a experiência do usuário ideal para determinados tamanhos de janela, mesmo usando layouts e widgets totalmente diferentes.

Na Figura 2, uma BottomNavigationView é usada como navegação de nível superior quando há espaço vertical adequado para fazer isso. Quando o tamanho da janela é reduzido, como mostrado no lado direito da figura, a navegação de nível superior é implementada usando um DrawerLayout.

Figura 2. A barra de navegação inferior é substituída por uma gaveta de navegação quando o espaço vertical é limitado.

Veja outros exemplos:

  • Uma Toolbar pode mostrar ou ocultar itens do menu de ações de acordo com a quantidade de espaço disponível.
  • Um RecyclerView.LayoutManager pode mudar a contagem de amplitude para aproveitar ao máximo o tamanho de uma janela
  • Você pode aumentar a quantidade de detalhes mostrados para visualizações personalizadas, já que há mais espaço disponível.

Essas são ótimas maneiras de garantir que seus usuários tenham ótimas experiências onde quer que estejam executando o app.

Você pode encontrar mais exemplos de padrões de design responsivo e ideias para layouts adaptáveis em material.io (link em inglês).