Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Se o app tiver vários destinos para os usuários acessarem, recomendamos
usar combinações de layout e navegação que são comumente usadas por outros apps.
Como muitos usuários já têm os modelos mentais para essas combinações, seu app será mais intuitivo para eles.
Combinações de layout e navegação
A barra de navegação e a gaveta de navegação modal são usadas como padrões de navegação
principais para visualizações de layout pai e destinos de navegação principais.
A barra de navegação pode conter de três a cinco destinos de navegação no mesmo nível de hierarquia. Esse componente é traduzido para a barra de navegação em telas grandes.
Embora a gaveta de navegação possa conter mais de cinco destinos de navegação, o padrão não é tão ideal quanto a barra de navegação.
Isso ocorre devido à necessidade de alcançar a barra superior em tamanhos compactos.
Nesse caso, as guias funcionam como uma camada de navegação secundária para agrupar conteúdo relacionado.
Ações de layout
Ofereça controles para que os usuários possam realizar ações. Os padrões comuns incluem ações da barra superior, botão de ação flutuante (FAB) e menus.
Para ações de maior importância, um FAB oferece um botão grande e em destaque para o usuário. Forneça apenas uma ação por vez nesse nível. Um FAB pode aparecer em vários tamanhos e em uma forma expandida, que inclui um
rótulo. Use Scaffold para fixar um FAB, garantindo que ele esteja sempre
visível, mesmo ao rolar.
Um botão de ação flutuante (FAB) que permite ao
usuário adicionar rapidamente plantas à galeria de plantas
É possível colocar ações secundárias na barra superior ou, se estiverem agrupadas perto de
conteúdo relacionado, na página.
Figura 20:ação de alerta na barra superior em "Mostrar detalhes"
(à esquerda) e ícone de estouro em linha do item da lista (à direita)
Para outras ações que não são necessárias com frequência ou de imediato, adicione-as
em um menu flutuante.
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-28 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-08-28 UTC."],[],[],null,["If your app contains multiple destinations for users to traverse, we recommend\nemploying layout and navigation pairings that are commonly used by other apps.\nBecause many users already possess the mental models for these pairings, your\napp will be more intuitive for them.\n\nLayout and navigation pairings\n\nThe navigation bar and modal navigation drawer are used as primary navigation\npatterns for parent layout views and primary navigation destinations. \n\nThe navigation bar can hold three to five navigation destinations across the\nsame hierarchy level. This component translates to the navigation rail for large\nscreens.\n\n\nAlthough the navigation drawer can hold more than five navigation destinations,\nthe pattern is not as ideal as the navigation bar.\nThis is due to the need to reach to the top bar on compact sizes. \n\n[Material 3 Tabs](https://m3.material.io/components/tabs/overview) and the [bottom app bar](https://m3.material.io/components/bottom-app-bar/overview) are\nsecondary navigation patterns that you can can use to supplement primary\nnavigation or appear on children views.\n\n\nHere, tabs act as a secondary navigation layer to group sibling content.\n\nLayout actions\n\nProvide controls to enable users to accomplish actions. Common patterns include\ntop bar actions, floating action button (FAB), and menus. \n\nFor actions of the highest importance, a [FAB](https://m3.material.io/components/floating-action-button/overview) provides a large\nand prominent button for the user. Provide only one action at a time at this\nlevel. A FAB can appear in multiple sizes and an expanded form, which includes a\nlabel. Use [Scaffold](/jetpack/compose/components/scaffold) to pin a FAB, making sure it's always\nvisible even on scroll by.\n\n\nA floating action button (FAB) that allows the\nuser to quickly add plants to the plant gallery\n\nYou can place secondary actions within the top bar or, if it's grouped near\nrelated content, within the page.\n**Figure 20:** Alert action in the top bar on show detail (left) and overflow icon inline of list item (right)\n\nFor any additional actions that aren't promptly or frequently needed, add those\nactions in an overflow menu."]]
