Diseño responsivo y adaptable
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Para adaptarse al aumento del tamaño de la pantalla, incorporamos el comportamiento responsivo en las plantillas de diseño de Material de ProtoLayout y los diseños de Figma, lo que permite que los espacios se adapten automáticamente. En esencia, las ranuras están diseñadas para ocupar el ancho disponible. Nuestros márgenes se establecen como porcentajes, con márgenes internos adicionales que se agregan a las ranuras de la parte inferior y superior de la pantalla, lo que da cuenta de las fluctuaciones en la curva de la pantalla a medida que se amplía.
Para maximizar el tamaño de pantalla más grande y el espacio adicional, considera usar el espacio adicional de la pantalla para proporcionar más valor, ya que permite que los usuarios accedan a información o opciones adicionales. Para lograr estos diseños, se requiere una personalización adicional más allá del comportamiento responsivo integrado. Para lograrlo, agrega contenido más útil al diseño después del punto de inflexión. Es importante tener en cuenta que el punto de interrupción recomendado se establece en el tamaño de pantalla de 225 dp.
Términos esenciales
Diseño responsivo: Es un enfoque de diseño en el que los diseños formatean y posicionan de forma dinámica elementos como botones, campos de texto y diálogos para lograr una experiencia del usuario óptima. Utiliza prácticas de diseño responsivo para ofrecer automáticamente a los usuarios valor adicional en pantallas más grandes. Ya sea que se trate de más texto visible de un vistazo, más acciones en pantalla o objetivos táctiles más grandes y accesibles, las prácticas responsivas proporcionan una experiencia mejorada para los usuarios de pantallas grandes.
Diseño adaptable: Es un enfoque de diseño en el que la interfaz cambia en función de las condiciones conocidas del usuario, el dispositivo o el entorno. El diseño adaptable en Material incluye adaptaciones de diseño y componentes.
Cómo crear diseños responsivos y optimizados
Para garantizar que tus diseños se adapten a tamaños de pantalla más grandes, actualizamos el comportamiento de nuestros diseños y componentes para que tengan un comportamiento responsivo integrado, incluidos los márgenes y el padding basados en porcentajes.
Si usas nuestras plantillas de ProtoLayout, puedes heredar estas actualizaciones automáticamente a través de la API de ProtoLayout y las notas de la versión beta, y solo debes proporcionar diseños en los que hayas agregado contenido o componentes adicionales después de un punto de inflexión de tamaño de pantalla. Para obtener orientación y recomendaciones completas sobre cómo aprovechar un tamaño de pantalla más grande, consulta nuestra Guía de tarjetas. Las tarjetas tienen una altura de pantalla fija, por lo que ajustamos el padding para maximizar el espacio limitado de la pantalla sin crear recortes no deseados.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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."]]
