Nivel 2: Responsivo y optimizado
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Las apps que emplean diseños responsivos y se adaptan automáticamente a diferentes tamaños de pantalla ofrecen valor adicional a los usuarios y proporcionan experiencias del usuario más productivas y atractivas.
Los diseños responsivos formatean y posicionan de forma dinámica elementos como botones, campos de texto y diálogos para lograr una experiencia del usuario óptima. Ofrece automáticamente valor adicional a los usuarios de tu app en pantallas más grandes con prácticas de diseño responsivo. Ya sea que se trate de más texto visible de un vistazo, más acciones en la pantalla o botones táctiles más grandes y accesibles, las prácticas responsivas brindan una experiencia mejorada para los usuarios de pantallas más grandes.
Agrega valor a través del diseño responsivo
check_circle
Qué debes hacer
- Usa la biblioteca de componentes de M3 Compose, que tiene un comportamiento adaptable y responsivo integrado.
- Utiliza diseños responsivos, que se ajustan de forma automática y fluida para ocupar el espacio disponible en todos los tamaños de pantalla.
cancel
Qué no debes hacer
- No estires los elementos de la IU (incluidos los campos de texto, los botones y los diálogos) para llenar espacio adicional.
- Aumenta el tamaño de las fuentes, a menos que cumplan un propósito principalmente gráfico.
Ejemplos
En las siguientes imágenes, se muestran ejemplos de apps responsivas y optimizadas.
Mosaico con tarjetas de imágenes
Lista de tarjetas con imágenes
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,["# Tier 2: Responsive and optimized\n\nApps that employ responsive layouts and automatically adapt to different screen\nsizes offer additional value to users and provide more productive, engaging user\nexperiences.\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\nAdd value through responsive design\n-----------------------------------\n\ncheck_circle\n\n### Do\n\n- Use the M3 Compose component library which has built-in responsive and adaptive behavior.\n- Utilize responsive layouts, which automatically and smoothly adjust to fill the available space across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements---including text fields, buttons, dialogs---to fill extra space.\n- Increase the sizes of fonts, unless they're serving a primarily graphic purpose.\n\nExamples\n--------\n\nThe following images show examples of apps that are responsive and optimized.\n\n\n### Edge-hugging buttons\n\n\u003cbr /\u003e\n\n\n### List of cards\n\n\u003cbr /\u003e\n\n\n### List of switchers and buttons\n\n\u003cbr /\u003e\n\n\n### Tile with image cards\n\n\u003cbr /\u003e\n\n\n### List of cards with images\n\n\u003cbr /\u003e\n\n\n### Tile with graph\n\n\u003cbr /\u003e"]]
