Design responsivo/adaptável com visualizações

Os layouts responsivos/adaptáveis proporcionam uma experiência do usuário otimizada, independentemente da tamanho da tela. Implemente layouts responsivos/adaptáveis para permitir baseado em visualização para oferecer suporte a todos os tamanhos de tela, orientações e incluindo as redimensionáveis, como as de várias janelas .

Design responsivo

A primeira etapa para oferecer suporte a vários formatos de dispositivos é criar uma um layout responsivo a variações na quantidade de espaço de exibição disponível ao seu app.

ConstraintLayout

A melhor maneira de criar um layout responsivo é usar ConstraintLayout como o layout básico da sua IU. ConstraintLayout permite que você especifique a posição e o tamanho de cada visualização de acordo com as relações espaciais com os outros visualizações no layout. Todas as visualizações podem então se mover e redimensionar juntas mudanças no espaço de exibição.

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 visualizações propriedades, tudo sem editar qualquer XML manualmente.

Para mais informações, consulte Crie uma interface responsiva com o ConstraintLayout.

Largura e altura responsivas

Para garantir que seu 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 dela.
• match_parent: a visualização se expande o máximo possível dentro da visualização mãe.
• 0dp (match constraint): em um ConstraintLayout, semelhante a match_parent A visualização ocupa todo o espaço disponível no restrições.

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 à tela. a largura muda de acordo com a orientação do dispositivo.

A TextView define a largura para preencher todo o espaço disponível (match_parent) e sua altura com exatamente o espaço exigido pela altura do texto (wrap_content), o que permite que a visualização se adapte a diferentes telas. dimensões e diferentes quantidades de texto.

Se você estiver usando um LinearLayout, também pode expandir as visualizações filhas com base no layout peso 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 realize várias transmissões de layout para determinar o tamanho de cada o que reduz o desempenho da interface.

A ConstraintLayout pode criar quase todos os layouts possíveis com LinearLayout sem impacto no desempenho. Portanto, converta sua LinearLayout para ConstraintLayout. Depois, pode definir layouts com pesos com restrição cadeias de suprimentos.

Design adaptável

O layout do app precisa ser sempre responsivo em diferentes tamanhos de tela. No entanto, nem mesmo um layout responsivo pode oferecer a melhor experiência do usuário em cada dispositivo ou tela do modo de várias janelas. Por exemplo, a interface que você projetado para um celular, provavelmente não oferece uma experiência de usuário ideal em uma tablet. O design adaptável fornece layouts alternativos otimizados para diferentes dimensões de exibição.

SlidingPaneLayout para interfaces de detalhes e listas

Uma interface de detalhes e listas normalmente oferece uma experiência do usuário diferente telas de tamanhos diferentes. Em telas grandes, os painéis de lista e de detalhes são geralmente lado a lado. Quando um item da lista é selecionado, as informações do item são exibido no painel de detalhes sem alterar a IU: os dois painéis permanecem lado a lado. No entanto, em telas pequenas, os dois painéis são exibidos separadamente, cada painel ocupando toda a área de exibição. Quando um item no painel de lista selecionada, o painel de detalhes (contendo as informações do item selecionado) substitui no painel de 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 é apropriados 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 As SlidingPaneLayout determinam o comportamento SlidingPaneLayout. No exemplo, se a janela for grande o suficiente (pelo menos 580 dp de largura) para exibir as duas visualizações, a painéis são exibidos lado a lado. Mas, se a largura da janela for menor que 580 dp, os painéis deslizam sobre os outros para ocupar individualmente todo o app janela.

Se a largura da janela for maior que a largura mínima total especificada (580 dp), Os valores layout_weight podem ser usados para dimensionar os dois painéis proporcionalmente. Na 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 além de 580 dp, porque da 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 recursos qualificadores.

Você pode fornecer layouts adaptáveis específicos para telas criando Diretórios res/layout/ no código-fonte do seu app. Crie um diretório para cada configuração de tela que exige um layout diferente. Em seguida, adicione uma tela qualificador de configuração para o 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 interface do seu app. O sistema leva em conta todas as decorações (como a barra de navegação) e mudanças na configuração de janelas (como 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 Desenvolver uma interface com visualizações.

Qualificador de menor largura

O qualificador de tamanho de tela de menor largura permite que você forneça alternativas layouts para telas que têm uma largura mínima medida em densidade independente pixels (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 preocupação com densidades de pixel diferentes.

Por exemplo, você pode criar um layout chamado main_activity otimizado para celulares e tablets, criando versões diferentes do arquivo em diferentes diretórios:

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, independentemente da orientação atual do dispositivo, é uma forma de especificar tamanho de exibição geral disponível para seu 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: 7" tablet (600x1024 mdpi)
• 720 dp: 10" tablet (720 x 1280 mdpi, 800 x 1280 mdpi etc.)

A figura abaixo oferece uma visão mais detalhada de como diferentes dp de tela as larguras correspondem a diferentes tamanhos e orientações de tela.

Os valores para o qualificador de menor largura são dp, porque o que importa é o quantidade de espaço de exibição disponível depois que o sistema considerar a densidade de pixels e não a resolução bruta de pixels.

Os tamanhos especificados usando qualificadores de recurso, como "menor largura", são e não nos tamanhos reais das telas. Em vez disso, os tamanhos especificam a largura ou altura As unidades de dp que estão disponíveis para a janela do seu app. O sistema Android pode usar parte da tela da IU do sistema (como a barra de sistema na parte inferior do ou a barra de status na parte superior, então parte da tela pode não estar disponíveis para seu layout. Se o app for usado no modo de várias janelas, o só tem acesso ao tamanho da janela que o contém. Quando o for redimensionada, ele acionará uma configuração mudar com o novo tamanho da janela, permite que o sistema selecione um arquivo de layout adequado. Então, o recurso os tamanhos dos qualificadores declarados precisam especificar somente o espaço necessário para o app. O sistema considera todo o espaço usado pela interface de usuário do sistema ao fornecer espaço para seu layout.

Qualificador de largura disponível

Em vez de alterar o layout com base na menor largura da tela, altere 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 fornece pelo menos 600 dp de largura, que pode mudar dependendo se está na orientação paisagem ou retrato. Nesse caso, você deve usar o método largura disponível da seguinte forma:

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 altura disponível. Por exemplo, layout-h600dp para telas com em pelo menos 600 dp de altura da tela.

Qualificadores de orientação

Mesmo que seja possível oferecer suporte a todas as variações de tamanho usando somente combinações dos qualificadores menor largura e largura disponível, é possível também querem alterar a experiência do usuário quando ele alterna entre o modo retrato e orientações de paisagem.

Para isso, adicione o qualificador port ou land ao diretório de layout. nomes de domínio. Confira se os qualificadores de orientação vêm depois dos qualificadores de tamanho. 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 mais informações sobre todos os qualificadores de configuração de tela, consulte App os recursos de IA generativa.

Classes de tamanho de janela

As classes de tamanho de janela são pontos de interrupção da janela de visualização que ajudam você a criar layouts. Os pontos de interrupção identificam a área de exibição disponível para o app como compacta, média ou expandida. A largura e a altura são especificadas separadamente, para que seu 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 o WindowSizeClass#compute() da Jetpack WindowManager biblioteca
• Inflar o recurso de layout para as classes de tamanho de janela atuais

.

Para mais informações, consulte Tamanho da janela .

Componentes de interface modularizados usando fragmentos

Ao projetar seu app para vários tamanhos de tela, usar fragmentos para extrair a lógica da interface em componentes separados para garantir que não haja duplicando o comportamento da IU em todas as atividades. Em seguida, você pode combinar fragmentos para criar layouts de vários painéis em telas grandes ou posicionar fragmentos em atividades separadas em telas pequenas.

Por exemplo, o padrão de detalhes e listas (consulte SlidingPaneLayout acima) poderiam ser implementadas com um fragmento contendo a lista e outro fragmento contendo o item da lista detalhes. Em telas grandes, os fragmentos podem ser mostrados lado a lado. ativado telas pequenas, individualmente, preenchendo a tela.

Para saber mais, consulte a visão geral de fragmentos.

Incorporação de atividades

Se o app consiste em várias atividades, a incorporação permite: a criar facilmente uma interface adaptável.

A incorporação mostra várias atividades ou instâncias da a mesma atividade simultaneamente na janela de tarefas de um aplicativo. Em telas grandes, as atividades podem ser exibidas lado a lado, em telas pequenas, empilhadas uma em cima uma parte da outra.

Para determinar como o app exibe as atividades dele, crie um XML de configuração do Terraform que o sistema usa para determinar apresentação com base no tamanho de exibição. Como alternativa, você pode tornar o Jetpack API WindowManager chamadas.

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 gira, dobra e desdobra.

Para mais informações, consulte Atividade e embedding.

Tamanhos e proporções de tela

Testar o app em vários tamanhos de tela e proporções para garantir a interface escalona 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 o máximo possível várias das seguintes proporções de tela possíveis:

Se você não tem acesso a dispositivos para todos os diferentes tamanhos de tela que quiser Para testar, use o Android Emulator para emular a quase qualquer tamanho de tela.

Caso você prefira testar em um dispositivo real, mas não tenha o dispositivo, é possível usar 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)