Responsivo y optimizado
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.

Las apps responsivas y optimizadas usan diseños responsivos que se adaptan automáticamente a diferentes tamaños de pantalla, lo que ofrece un valor adicional a los usuarios y proporciona una experiencia del usuario productiva y atractiva.
Agrega valor mediante el diseño responsivo
Los diseños responsivos dan formato y posicionan dinámicamente elementos como botones, campos de texto y diálogos para brindar una experiencia del usuario óptima. Ofrece automáticamente a los usuarios de tu app valor adicional en pantallas más grandes con prácticas de diseño responsivos. Ya sea que se trate de una mayor visibilidad del texto de un vistazo, de más acciones en la pantalla o de objetivos táctiles más grandes y accesibles, las prácticas responsivas ofrecen una experiencia mejorada para los usuarios de pantallas más grandes.

Cómo compilar apps y tarjetas responsivas para Wear OS
Las IUs responsivas se estiran y cambian para aprovechar al máximo todo el espacio de pantalla disponible, independientemente del tamaño de la pantalla en el que se rendericen. Cuando creas diseños responsivos en una pantalla redonda, las vistas con desplazamiento y sin desplazamiento tienen requisitos únicos para mantener el escalamiento de los elementos de la IU, así como para preservar un diseño y una composición equilibrados. Para las vistas de desplazamiento, usa porcentajes para definir todos los márgenes superior, inferior y lateral para evitar el recorte y proporcionar un escalamiento proporcional de los elementos. En el caso de las vistas sin desplazamiento, usa porcentajes y restricciones verticales para todos los márgenes. De esa manera, el contenido principal en el medio se puede estirar para llenar el área disponible.
Consulta la guía de implementación de Compose y tarjetas para obtener diseños responsivos.
check_circle
Qué debes hacer
- Usa componentes estándar diseñados para la adaptación.
- Usa diseños adaptables que se adapten sin problemas a todos los tamaños de pantalla.
cancel
Lo que no debes hacer
- No estires los elementos de la IU (campos de texto, botones y diálogos) para llenar espacio adicional.
- Aumenta el tamaño de las fuentes (a menos que tengan un propósito principalmente gráfico).
Próximo paso: Adaptación y diferenciada
Las apps que son adaptables y diferenciadas crean una experiencia del usuario que no es posible en dispositivos con pantallas más pequeñas.
Comenzar
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)
[null,null,["Última actualización: 2025-07-27 (UTC)"],[],[],null,["# Responsive and optimized\n\nApps that are **responsive and optimized** utilize responsive layouts that\nautomatically adapt to different screen sizes, offering some additional value to\nusers and providing a productive, engaging user experience.\n\nAdd value through responsive design\n-----------------------------------\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\n\nBuild responsive apps and tiles for Wear OS\n-------------------------------------------\n\nResponsive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on. When designing\nresponsive layouts on a round screen, scrolling and non-scrolling views each\nhave unique requirements to maintain UI element scaling, as well as preserve a\nbalanced layout and composition. For [scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#scrolling), use percentages to\ndefine all top, bottom, and side margins to avoid clipping and provide\nproportional scaling of elements. For [non-scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#non-scrolling), use percentages\nand vertical constraints for all margins. That way, the main content in the\nmiddle can stretch to fill the available area.\n\nSee the [Compose](/training/wearables/compose/screen-size#responsive-layouts) and [Tiles](/training/wearables/tiles/screen-size#responsive-layouts) implementation guidance for responsive\nlayouts. \ncheck_circle\n\n### Do\n\n- Use standard components which are designed for adaptation.\n- Utilize adaptive layouts which adapt smoothly across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space.\n- Increase the sizes of fonts (unless they're serving a primarily graphic purpose).\n\nNext step: adaptive and differentiated\n--------------------------------------\n\nApps that are **adaptive and differentiated** create a user experience that\nisn't possible on devices with smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)"]]