Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
As visualizações sem rolagem se concentram em informações rápidas e oferecem valor aos usuários com pouca ou nenhuma interação. Por isso, pode ser difícil criar um comportamento responsivo nesses layouts.
Componentes de layout predefinidos que não rolam
Dialog
Uma caixa de diálogo é uma sobreposição temporária que ocupa a tela inteira. Ele permite que os usuários
realizem uma única ação.
Considere os seguintes pontos:
As caixas de diálogo concentram sua atenção para verificar se o conteúdo foi abordado.
As caixas de diálogo precisam ser diretas ao comunicar informações e dedicadas a
concluir uma tarefa.
As caixas de diálogo precisam aparecer em resposta a uma tarefa ou ação do usuário, mostrando informações relevantes ou contextuais.
Sobreposição de confirmação
A sobreposição de confirmação mostra uma mensagem ao usuário por um curto
período. Use esse componente para chamar a atenção do usuário depois que uma ação for
executada.
Abrir no smartphone
A sobreposição "Abrir no smartphone" é acionada quando o usuário escolhe continuar a
jornada em um smartphone. A sobreposição tem um indicador de progresso e informa ao usuário quando
verificar o smartphone.
Stepper
Os steppers oferecem uma experiência de controle em tela cheia que permite que os usuários escolham um valor entre um
intervalo. É possível controlar a interação usando os botões ou a coroa, e o nível específico é mostrado usando um indicador de nível curvo.
Seletor de horário
Os seletores permitem que os usuários escolham entre um número finito de itens em seções roláveis.
O seletor de horário tem até três colunas, dependendo se os segundos estão disponíveis ou se o relógio é de 12 ou 24 horas. Os usuários interagem com cada coluna por vez, fazendo a seleção ao deixar o número em foco antes de continuar.
Seletor de data
Os seletores permitem que os usuários escolham entre um número finito de itens em seções roláveis.
O seletor de datas tem até três colunas, que têm uma ordem intercambiável entre data, hora e ano, dependendo do caso de uso.
Os seletores de data exigem strings de conteúdo mais longas. Por isso, apenas uma coluna fica visível por vez, dando uma dica do que está à esquerda ou à direita. Os usuários interagem com cada coluna por vez, fazendo a seleção ao deixar o número em foco antes de continuar.
Exemplos de layouts personalizados sem rolagem
As telas de apps que não rolam não se limitam aos componentes definidos. É possível combinar
uma série de elementos para criar o layout desejado.
É importante considerar o espaço limitado em uma tela sem rolagem e usar margens e padding responsivos (porcentagem) para aproveitar o espaço disponível. Você também pode aplicar um ponto de interrupção em 225 dp para apresentar conteúdo adicional ou tornar o conteúdo atual mais fácil de visualizar em telas maiores.
Maps
Sobreposição de emergência
Alerta de emergência
Comportamento responsivo e adaptativo
Todos os componentes da biblioteca Compose se adaptam automaticamente ao tamanho maior da tela e ganham largura e altura. Para essas visualizações em particular, o uso de
pontos de interrupção pode oferecer uma experiência particularmente rica e valiosa para todos
os usuários.
Para muitos dos botões, cards e margens da sua interface, estique e preencha o espaço
para diferentes tamanhos de tela e aproveite o espaço disponível na interface
e também crie um layout bem equilibrado.
Use a lista de verificação a seguir para verificar se os parâmetros responsivos estão definidos corretamente:
Crie layouts flexíveis que tenham uma aparência razoável em todos os tamanhos de tela.
Aplique as margens recomendadas na parte superior, inferior e nas laterais.
Defina margens em valores percentuais em locais onde o conteúdo possa ser cortado.
Use restrições de layout para que os elementos façam o melhor uso possível do espaço na tela e mantenham o equilíbrio em diferentes tamanhos de dispositivos.
Acomode o texto de hora, se usado, mas não o sobreponha à seção superior da página.
Considere usar botões que se ajustam à borda para aproveitar mais o espaço limitado.
Considere aplicar um ponto de interrupção em 225 dp para apresentar mais conteúdo ou
tornar o conteúdo atual mais fácil de visualizar em tamanhos de tela maiores.
Várias jornadas de página sem rolagem usando paginação
Em cenários em que uma experiência exige mais conteúdo, mas quer manter um layout sem rolagem, considere um layout de várias páginas com paginação vertical ou horizontal.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-08-25 UTC.
[null,null,["Última atualização 2025-08-25 UTC."],[],[],null,["# Non-scrolling app layouts\n\nNon-scrolling views focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts.\n\nPreset non-scrolling layout components\n--------------------------------------\n\n### Dialog\n\nA dialog is a transient overlay that occupies the whole screen. It lets users\nperform a single action. \n\n\u003cbr /\u003e\n\n\nConsider the following points:\n\n\u003cbr /\u003e\n\n- Dialogs focus your attention to verify their content is addressed.\n- Dialogs should be direct in communicating information and dedicated to completing a task.\n- Dialogs should appear in response to a user task or an action, with relevant or contextual information. \n\n\u003cbr /\u003e\n\n### Confirmation overlay\n\nThe confirmation overlay displays a confirmation message to the user for a short\nperiod. Use this component to capture the user's attention after an action has\nbeen executed.\n\n\u003cbr /\u003e\n\n### Open on phone\n\nThe open on phone overlay is triggered when the user chooses to continue their\njourney on a phone. The overlay has a progress indicator and tells the user when\nto check their phone.\n\n\u003cbr /\u003e\n\n### Stepper\n\nSteppers provide a full-screen control experience that let users make a\nselection from a range of values. They can control the interaction using the\nbuttons or crown, and the specific level is shown using a curved level\nindicator.\n\n\u003cbr /\u003e\n\n### Time picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Time Picker** has up to three columns, depending on whether seconds are\navailable or if the clock is a 12-hour or 24-hour clock. Users interact with\neach column at a time, making your selection by leaving the number in focus\nbefore continuing.\n\n\u003cbr /\u003e\n\n### Date picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Date Picker** has up to three columns, which have an interchangeable order\nbetween date, time, and year, depending on the use case.\n**Date Pickers** require longer strings of content, so only one column is in\nview at a time, giving a hint of what's to the left or right. Users interact\nwith each column at a time, making their selection by leaving the number in\nfocus before continuing.\n\n\u003cbr /\u003e\n\nCustom non-scrolling layout examples\n------------------------------------\n\nNon-scrolling app screens are not limited to the set components. You can combine\na combination of elements to create the layout you want.\n\nYou should be mindful of the limited space on a non-scrolling screen and the use\nof responsive (percentage) margins and padding to use the available screen\nspace. You can also consider applying a breakpoint at 225dp to introduce\nadditional content or make existing content more glanceable when on bigger\nscreen sizes. \n\n### Maps\n\n\u003cbr /\u003e\n\n### Emergency overlay\n\n\u003cbr /\u003e\n\n### Emergency alert\n\n\u003cbr /\u003e\n\nResponsive and adaptive behavior\n--------------------------------\n\nAll components in the Compose library automatically adapt to the wider screen\nsize and gain width and height. For these views in particular, utilizing\nbreakpoints can deliver a particularly rich and valuable experience for all\nusers.\n\nFor many of your UI's buttons, cards, and margins, stretch and fill the space\nfor different screen sizes to take advantage of the available space on the UI\nand also make for a well-balanced layout.\n\nUse the following checklist to verify that responsive parameters are properly\ndefined:\n\n- Create flexible layouts that look reasonable on all screen sizes.\n- Apply the recommended top, bottom, and side margins.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Utilize layout constraints so that elements make the best possible use of the space within the screen and maintain balance across different device sizes.\n- Accommodate **Time Text** if used, but don't overlap the top section of the page.\n- Consider using edge-hugging buttons to utilize more of the limited space.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes.\n\n| **Caution:** A display size shouldn't display less information than ones that are smaller than it. This is especially relevant for custom behaviors added at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less on the larger screens. Screens should show more value, not less, with increasing size.\n\nMultiple non-scrolling page journeys using pagination\n-----------------------------------------------------\n\nIn scenarios where an experience requires more content but wants to retain a\nnon-scrolling layout, consider a multi-page layout with either vertical or\nhorizontal pagination."]]
