Os layouts responsivos/adaptáveis proporcionam uma experiência do usuário otimizada, independente do tamanho da tela. Implemente layouts responsivos/adaptáveis para permitir que o app baseado em visualização ofereça suporte a todos os tamanhos de tela, orientações e configurações, incluindo configurações redimensionáveis, como o modo de várias janelas.
Design responsivo
A primeira etapa para oferecer suporte a vários formatos de dispositivos é criar um layout que responda às variações na quantidade de espaço de exibição disponível para o app.
ConstraintLayout
A melhor maneira de criar um layout responsivo é usar
ConstraintLayout
como o layout base da IU. ConstraintLayout
permite especificar a
posição e o tamanho de cada visualização de acordo com as relações espaciais com outras
visualizações no layout. Todas as visualizações podem ser movidas e redimensionadas juntas à medida que o
espaço de exibição muda.
A maneira mais fácil de criar um layout com o ConstraintLayout
é usar o Layout
Editor no Android Studio. O Layout Editor permite arrastar novas visualizações para o
layout, aplicar restrições relativas a visualizações mãe e irmãs e definir propriedades
de visualização, tudo sem editar qualquer XML manualmente.
Para ver mais informações, consulte Criar uma IU responsiva com o ConstraintLayout.
Largura e altura responsivas
Para garantir que o layout seja responsivo a diferentes tamanhos de tela, use
wrap_content
, match_parent
ou 0dp (match constraint)
para a largura e
altura dos componentes de visualização, em vez de valores codificados:
wrap_content
: a visualização define o próprio tamanho para se ajustar ao conteúdo que ela inclui.match_parent
: a visualização se expande o máximo possível dentro da visualização mãe.0dp (match constraint)
: em umaConstraintLayout
, semelhante amatch_parent
. A visualização ocupa todo o espaço disponível dentro das restrições da visualização.
Por exemplo:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum" />
A Figura 4 mostra como a largura e a altura da TextView
se ajustam à medida que a largura
da tela muda com a orientação do dispositivo.
A TextView
define a largura para preencher todo o espaço disponível (match_parent
) e
a altura como exatamente o espaço necessário para a altura do
texto contido (wrap_content
), permitindo que a visualização se adapte a diferentes
dimensões de exibição e quantidades de texto.
Se você estiver usando um LinearLayout
, também
poderá expandir as visualizações filhas com base no
peso do layout para que as visualizações
preencham proporcionalmente o espaço disponível. No entanto, o uso de pesos em um LinearLayout
aninhado exige que o sistema execute várias transmissões de layout para
determinar o tamanho de cada visualização, diminuindo a performance da interface.
O ConstraintLayout
pode criar quase todos os layouts possíveis com
LinearLayout
sem afetar o desempenho. Portanto, converta seu LinearLayout
aninhado em ConstraintLayout
.
Em seguida, você pode
definir layouts ponderados com cadeias de restrição.
Design adaptável
O layout do app precisa sempre ser responsivo a diferentes tamanhos de tela. No entanto, mesmo um layout responsivo não pode oferecer a melhor experiência do usuário em todos os dispositivos ou telas no modo de várias janelas. Por exemplo, a interface que você projetou para um smartphone provavelmente não oferece uma experiência do usuário ideal em um tablet. O design adaptável fornece layouts alternativos otimizados para diferentes dimensões de tela.
SlidingPaneLayout para interfaces de detalhes e listas
Uma interface de detalhes e listas normalmente oferece uma experiência do usuário diferente em telas de tamanhos variados. Em telas grandes, os painéis de lista e de detalhes costumam estar lado a lado. Quando um item da lista é selecionado, as informações do item são mostradas no painel de detalhes sem mudar a interface. Os dois painéis permanecem lado a lado. No entanto, em telas pequenas, os dois painéis são mostrados separadamente, cada um ocupando toda a área de exibição. Quando um item no painel da lista é selecionado, o painel de detalhes (que contém as informações do item selecionado) substitui o painel da lista. A navegação de retorno substitui o painel de detalhes pela lista.
SlidingPaneLayout
gerencia a lógica para determinar qual das duas experiências do usuário é
adequada para o tamanho atual da janela:
<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/item_navigation" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>
Os atributos layout_width
e layout_weight
das duas visualizações contidas em
SlidingPaneLayout
determinam o comportamento SlidingPaneLayout
. No exemplo,
se a janela for grande o suficiente (pelo menos 580 dp de largura) para mostrar as duas visualizações, os painéis vão ser mostrados lado a lado. No entanto, se a largura da janela for menor que
580 dp, os painéis vão deslizar uns sobre os outros para ocupar individualmente toda a
janela do app.
Se a largura da janela for maior que a largura mínima especificada (580 dp),
os valores layout_weight
poderão ser usados para dimensionar os dois painéis proporcionalmente. No
exemplo, o painel de lista tem sempre 280 dp de largura, porque não tem um peso.
No entanto, o painel de detalhes sempre preenche qualquer espaço horizontal acima de 580 dp devido
à configuração layout_weight
da visualização.
Recursos de layouts alternativos
Para adaptar o design da interface a tamanhos de tela muito variados, use layouts alternativos identificados por qualificadores de recursos.
Você pode fornecer layouts adaptáveis e específicos da tela criando outros
diretórios res/layout/
no código-fonte do app. Crie um diretório para
cada configuração de tela que exija um layout diferente. Em seguida, anexe um
qualificador de configuração de tela ao nome do diretório layout
, por exemplo,
layout-w600dp
para telas com 600 dp de largura disponível.
Os qualificadores de configuração representam o espaço de exibição visível disponível para a IU do app. O sistema considera todas as decorações do sistema (como a barra de navegação) e mudanças na configuração de janelas (como o modo de várias janelas) ao selecionar o layout do app.
Para criar layouts alternativos no Android Studio, consulte Usar variantes de layout para otimizar para diferentes telas em Desenvolver uma interface com visualizações.
Qualificador de menor largura
O qualificador de tamanho de tela de menor largura permite que você forneça layouts alternativos para telas que tenham uma largura mínima medida em pixels de densidade independente (dp).
Ao descrever o tamanho da tela como uma medida de dp, o Android permite criar layouts projetados para dimensões de exibição específicas sem se preocupar com diferentes densidades de pixel.
Por exemplo, você pode criar um layout chamado main_activity
otimizado para
smartphones e tablets criando versões diferentes do arquivo em diretórios
diferentes:
res/layout/main_activity.xml # For phones (smaller than 600dp smallest width) res/layout-sw600dp/main_activity.xml # For 7" tablets (600dp wide or wider)
O qualificador de menor largura especifica o menor dos dois lados da tela, independente da orientação atual do dispositivo. Portanto, essa é uma maneira de especificar o tamanho geral da tela disponível para o layout.
Veja como outros valores de menor largura correspondem a tamanhos de tela típicos:
- 320 dp: tela pequena de smartphone (240 x 320 ldpi, 320 x 480 mdpi, 480 x 800 hdpi etc.)
- 480 dp: tela grande de smartphone (aprox. 5 pol.) (480 x 800 mdpi)
- 600 dp: tablet de 7 pol. (600 x 1024 mdpi)
- 720 dp: tablet de 10 pol. (720 x 1280 mdpi, 800 x 1280 mdpi etc.)
A figura abaixo oferece uma visão mais detalhada de como diferentes larguras de tela em dp correspondem a diferentes tamanhos e orientações de tela.
Os valores do qualificador de menor largura são dp, porque o que importa é a quantidade de espaço de exibição disponível após o sistema considerar a densidade de pixels, e não a resolução bruta de pixels.
Os tamanhos especificados usando qualificadores de recursos, como menor largura, não são tamanhos reais de tela. Em vez disso, os tamanhos especificam a largura ou altura em unidades dp que estão disponíveis para a janela do app. O sistema Android pode usar parte da tela para a IU do sistema (como a barra de sistema na parte de baixo da tela ou a barra de status na parte de cima). Portanto, parte da tela pode não estar disponível para seu layout. Se o app for usado no modo de várias janelas, ele terá acesso apenas ao tamanho da janela que o contém. Quando a janela for redimensionada, ela acionará uma mudança de configuração com o novo tamanho de janela, permitindo que o sistema selecione um arquivo de layout adequado. Portanto, os tamanhos dos qualificadores de recursos declarados precisam especificar apenas o espaço necessário para o app. O sistema considera todo o espaço usado pela interface do sistema ao fornecer espaço para o layout.
Qualificador de largura disponível
Em vez de mudar o layout com base na menor largura da tela, você pode mudar o layout com base na largura ou altura disponível. Por exemplo, você pode querer usar um layout de dois painéis sempre que a tela fornecer pelo menos 600 dp de largura, o que pode mudar dependendo da orientação do dispositivo (paisagem ou retrato). Nesse caso, use o qualificador de largura disponível da seguinte maneira:
res/layout/main_activity.xml # For phones (smaller than 600dp available width) res/layout-w600dp/main_activity.xml # For 7" tablets or any screen with 600dp available width # (possibly landscape phones)
Se a altura disponível for uma preocupação para o app, use o
qualificador de altura disponível. Por exemplo, layout-h600dp
para telas com
pelo menos 600 dp de altura.
Qualificadores de orientação
Embora seja possível oferecer suporte a todas as variações de tamanho usando apenas combinações dos qualificadores menor largura e largura disponível, você também pode querer mudar a experiência do usuário quando ele alternar entre as orientações de retrato e paisagem.
Para isso, adicione os qualificadores port
ou land
aos nomes do diretório
de layout. Confira se os qualificadores de orientação vêm depois dos qualificadores de tamanho.
Por exemplo:
res/layout/main_activity.xml # For phones res/layout-land/main_activity.xml # For phones in landscape res/layout-sw600dp/main_activity.xml # For 7" tablets res/layout-sw600dp-land/main_activity.xml # For 7" tablets in landscape
Para ver mais informações sobre todos os qualificadores de configuração de tela, consulte Visão geral dos recursos de app.
Classes de tamanho de janela
As classes de tamanho de janela são pontos de interrupção da janela de visualização que ajudam a criar layouts adaptáveis. Os pontos de interrupção identificam a área de exibição disponível para o app como compacta, média ou expandida. Largura e altura são especificadas separadamente, para que o app sempre tenha uma classe de tamanho de janela para largura e uma classe de tamanho de janela para a altura.
Para aplicar layouts adaptáveis de forma programática, faça o seguinte:
- Criar recursos de layout com base nos pontos de interrupção da classe de tamanho da janela
- Calcule as classes de tamanho de janela de largura e altura do app usando a função
WindowSizeClass#compute()
da biblioteca Jetpack WindowManager. - Inflar o recurso de layout para as classes de tamanho de janela atuais
Para mais informações sobre classes de tamanho de janelas, consulte Suporte a tamanhos de tela diferentes.
Componentes de interface modularizados usando fragmentos
Ao projetar seu app para vários tamanhos de tela, use fragmentos para extrair a lógica da interface em componentes separados e garantir que você não duplique o comportamento da interface em diferentes atividades desnecessariamente. Em seguida, você pode combinar fragmentos para criar layouts de vários painéis em telas grandes ou os colocar em atividades separadas em telas pequenas.
Por exemplo, o padrão de detalhes e listas (consulte SlidingPaneLayout acima) pode ser implementado com um fragmento que contém a lista e outro com os detalhes do item dela. Em telas grandes, os fragmentos podem ser mostrados lado a lado ou, em telas pequenas, individualmente, preenchendo a tela.
Para saber mais, consulte a visão geral de fragmentos.
Incorporação de atividades
Caso seu app seja composto por várias atividades, a incorporação permite criar facilmente uma interface adaptável.
A incorporação de atividades mostra várias atividades ou instâncias da mesma atividade simultaneamente na janela de tarefas de um app. Em telas grandes, as atividades podem ser mostradas lado a lado ou, em telas pequenas, empilhadas uma sobre a outra.
Para determinar como o app exibe as atividades, crie um arquivo de configuração XML que o sistema usa para determinar a apresentação adequada com base no tamanho da tela. Como alternativa, você pode fazer chamadas da API Jetpack WindowManager.
A incorporação de atividades oferece suporte a mudanças de orientação do dispositivo e dispositivos dobráveis, empilhando e desempilhando atividades conforme o dispositivo é girado, dobrado e desdobrado.
Para mais informações, consulte Incorporação de atividades.
Tamanhos e proporções de tela
Teste o app em vários tamanhos e proporções de tela para garantir que a interface seja dimensionada corretamente.
O Android 10 (nível 29 da API) e versões mais recentes oferecem suporte a várias proporções. Os formatos dobráveis podem variar de telas altas e estreitas, como 21:9 quando dobrado, para uma proporção quadrada de 1:1 quando desdobrado.
Para garantir a compatibilidade com o maior número possível de dispositivos, teste seus apps com o maior número possível de proporções de tela:
Se você não tiver acesso a dispositivos para todos os diferentes tamanhos de tela que quer testar, use o Android Emulator para emular quase qualquer tamanho de tela.
Caso você prefira testar em um dispositivo real, mas não tem um, use o Firebase Test Lab para acessar dispositivos em um data center do Google.
Outros recursos
- Material Design: Noções básicas sobre layout (link em inglês)