Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O Material 3 Expressive usa a linguagem de formas de uma maneira muito mais ampla e significativa, utilizando formas de contêiner flexíveis para aplicar arredondamento e nitidez de raios de canto para oferecer suporte a listas de transformação de formas e estados de botões.
O sistema de design também apresenta botões que se ajustam à borda como um padrão de design
icônico e próprio para dispositivos redondos no Wear OS.
Manter o escalonamento de elementos da interface
Ao criar layouts em uma tela redonda, as visualizações roláveis e não roláveis têm requisitos exclusivos para manter o dimensionamento dos elementos da interface e preservar um layout e uma composição equilibrados.
Visualizações de rolagem
Para visualizações de rolagem, use porcentagens para definir todas as margens superior, inferior e laterais, evitando o corte e proporcionando o dimensionamento proporcional dos elementos.
Todas as margens superior, inferior e laterais precisam ser definidas em porcentagens para evitar cortes e fornecer escalonamento proporcional dos elementos.
Visualizações sem rolagem
Para visualizações sem rolagem, use porcentagens e restrições verticais em todas as margens. Assim, o conteúdo principal no meio pode se estender para preencher a área disponível.
Todas as margens precisam ser definidas em porcentagens, e as restrições verticais precisam ser definidas para que o conteúdo principal no meio possa ser esticado para preencher a área disponível.
Níveis de diretrizes de qualidade
Nossas diretrizes de qualidade são organizadas em três níveis. Ofereça a melhor experiência possível aos usuários seguindo as diretrizes em todos os três níveis.
Pronto para todos os tamanhos de tela
Garanta que o app ofereça uma experiência de qualidade em todos os tamanhos de tela.
Crie layouts que usem totalmente o espaço disponível do app.
Responsivo e otimizado
Ofereça mais conteúdo aos usuários em dispositivos que permitem isso e use layouts responsivos que se adaptam automaticamente a diferentes tamanhos de tela.
Adaptável e diferenciado
Aproveite ao máximo o espaço extra usando pontos de interrupção para oferecer
novas experiências incríveis em telas maiores, o que não é possível em dispositivos
com telas menores.
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-26 UTC.
[null,null,["Última atualização 2025-07-26 UTC."],[],[],null,["# Design quality tiers\n\nMaterial 3 Expressive leans into shape language in a much more expansive and\nmeaningful way by utilizing flexible container shapes to apply rounding and\nsharpening of corner radii to support shape morphing lists and button states.\nThe design system also introduces edge-hugging buttons as an ownable and iconic\ndesign pattern for round devices on Wear OS.\n\nMaintain UI element scaling\n---------------------------\n\nWhen designing layouts on a round screen, scrolling and non-scrolling\nviews each have unique requirements to maintain UI element scaling and preserve\na balanced layout and composition.\n\n\n**Scrolling views**\n\nFor scrolling views, use percentages to define all top, bottom, and side\nmargins to avoid clipping and provide proportional scaling of elements.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. \n**Non-scrolling views**\n\nFor non-scrolling views, use percentages and vertical constraints for all\nmargins. That way, the main content in the middle can stretch to fill the\navailable area.\n\nAll margins should be defined in percentages and vertical constraints should be\ndefined such that the main content in the middle can stretch to fill the\navailable area.\n\n\u003cbr /\u003e\n\nTiers of quality guidelines\n---------------------------\n\nOur quality guidelines are organized into three tiers. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n\n**Ready for all screen sizes**\n\nEnsure your app is delivering a quality experience across all screen sizes.\nCreate layouts that fully use the available app space. \n\n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes. \n\n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n\u003cbr /\u003e\n\n| **Caution:** A larger display size should *never* display less information than ones that are smaller than it, this is especially relevant for custom behaviors added in at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less are the larger screens. Screens should always show \"more value\" and never \"less value\" with increasing size."]]