Design responsivo e adaptável
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Para acomodar o tamanho crescente da tela, incorporamos o comportamento responsivo aos modelos de layout do ProtoLayout Material e aos layouts de design do Figma, permitindo que os slots se adaptem automaticamente. Em essência, os slots foram projetados para preencher a largura disponível. Nossas margens são definidas como porcentagens, com margens internas adicionais adicionadas a slots na parte de baixo e de cima da tela, levando em conta as flutuações na curva da tela à medida que ela aumenta.
Para aproveitar ao máximo o tamanho maior da tela e o espaço extra, considere usar o espaço extra para oferecer mais valor, permitindo que os usuários acessem mais informações ou opções. Para conseguir esses layouts, é necessário personalizar mais além do comportamento responsivo integrado. Para isso, adicione mais conteúdo útil ao layout após o ponto de interrupção. É importante observar que o ponto de interrupção recomendado é definido no tamanho de tela de 225 dp.
Termos essenciais
Design responsivo:uma abordagem de design em que os layouts formatam e posicionam elementos como botões, campos de texto e caixas de diálogo de forma dinâmica para uma experiência ideal do usuário. Ofereça valor extra aos usuários em telas maiores usando práticas de design responsivo. Seja mais texto visível de relance, mais ações na tela ou áreas de toque maiores e mais acessíveis, as práticas responsivas oferecem uma experiência aprimorada para os usuários de telas grandes.
Design adaptável:uma abordagem de design em que a interface muda com base em condições conhecidas do usuário, do dispositivo ou do ambiente. O design adaptável no Material Design inclui adaptações de layout e componentes.
Criar designs responsivos e otimizados
Para garantir que os layouts de design se adaptem a tamanhos de tela maiores, atualizamos o comportamento dos nossos layouts e componentes para ter um comportamento responsivo integrado, incluindo margens e paddings com base em porcentagem.
Se você estiver usando nossos modelos de ProtoLayout, poderá herdar essas atualizações automaticamente pela API ProtoLayout e pelas notas da versão Beta. Só será necessário fornecer layouts em que você adicionou conteúdo ou componentes após um ponto de interrupção do tamanho da tela. Para orientações e recomendações completas sobre como aproveitar um tamanho de tela maior, consulte nossas orientações sobre blocos. Os blocos têm uma altura de tela fixa. Por isso, ajustamos o padding para maximizar o espaço limitado da tela sem criar recortes indesejados.
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-07-27 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-07-27 UTC."],[],[],null,["# Responsive and adaptive design\n\nTo accommodate the increasing screen size, we've incorporated responsive behavior into the [ProtoLayout Material layout templates](https://developer.android.com/reference/kotlin/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).primaryLayout(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.wear.protolayout.ModifiersBuilders.Clickable,androidx.wear.protolayout.material3.PrimaryLayoutMargins)) and Figma design layouts, allowing the slots to automatically adapt. In essence, slots are designed to fill the available width. Our margins are set as percentages, with additional inner margins added to slots at the bottom and top of the screen, accounting for fluctuations in the curve of the screen as it enlarges.\n\nTo maximize the larger screen size and additional space, consider utilizing the extra screen space to provide more value by allowing users to access additional information or options. Achieving these layouts requires additional customization beyond the built-in responsive behavior. This can be accomplished by adding more helpful content to the layout after the breakpoint. It's important to note that the recommended breakpoint is set at the 225dp screen size.\n\nEssential terms\n---------------\n\n**Responsive design:** A design approach in which layouts dynamically format and position elements such as buttons, text fields, and dialogs for an optimal user experience. Automatically offer users additional value on larger screens by utilizing responsive design practices. Whether it's more text visible at a glance, more actions on screen, or larger, more accessible tap targets, responsive practices provide an enhanced experience for users of large screens.\n\n**Adaptive design:** A design approach in which the interface changes based on known user, device, or environmental conditions. Adaptive design in Material includes layout and component adaptations.\n\nBuilding responsive and optimized designs\n-----------------------------------------\n\nTo ensure your design layouts adapt to larger screen sizes, we have updated the behavior of our layouts and components to have built-in responsive behavior, including percentage-based margins and padding.\nIf you are using our ProtoLayout templates, you can inherit these updates automatically through the [ProtoLayout API](/design/ui/wear/guides/surfaces/tiles/reference/kotlin/androidx/wear/protolayout/material3/package-summary) and the [beta release notes](https://developer.android.com/jetpack/androidx/releases/wear-protolayout#1.3.0-beta02), and only need to supply layouts where you have added additional content or components after a screen size breakpoint. For full guidance and recommendations on how to take advantage of a larger screen size, view our [Tiles guidance](/design/ui/wear/guides/surfaces/tiles/wear/guides/surfaces/tiles). Tiles have a fixed screen height, so we've adjusted the padding to maximize the limited screen real estate without creating unwanted clipping."]]
