UX
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
NIVEL 2: App optimizada para pantallas grandes
Para los usuarios, la interfaz de usuario es la app. La IU determina la experiencia del usuario, que determina la satisfacción del usuario, el uso de la app, las compras en la app y la retención de clientes.
Las pantallas grandes ofrecen un espacio de visualización amplio para IUs innovadoras y adaptables que proporcionan una UX que las pantallas pequeñas no pueden replicar.
Para optimizar tu app para pantallas grandes, incluye los siguientes elementos de la IU:
- Riel de navegación o panel lateral de navegación
- Objetivos táctiles grandes
- Menús y diálogos bien ubicados
- Diseños de varios paneles
Diseños adaptables
Crea diseños adaptables que optimicen la IU de tu app en pantallas grandes y pequeñas.
Diseña y compila para varios factores de forma de forma simultánea. Prepara tu app para el futuro para tipos de dispositivos nuevos.
Diseños canónicos
Aprovecha los diseños de pantalla grande probados para que la UX de tu app sea excepcional.
Crea un diseño de lista-detalles, panel complementario o feed para que el contenido sea más fácil de administrar y disfrutar.
IU responsiva
Aplica formato a los elementos de la IU según el tamaño de la pantalla. Restringe los anchos de los botones, las tarjetas y los campos de texto de pantalla completa a un tamaño funcionalmente adecuado en pantallas grandes. No permitas que los cuadros de diálogo y otras ventanas modales ocupen toda la pantalla. Se muestran menús contextuales y otras ventanas emergentes relacionadas con el elemento junto al elemento que el usuario seleccionó, no centrado en la pantalla.
Incorporación de actividades
Actualiza tus apps heredadas basadas en actividades con diseños de varios paneles en pantallas grandes. No es necesario refactorizar el código. Configura tus diseños en XML o con algunas llamadas a la API de Jetpack WindowManager.
Próximos pasos
Para obtener información sobre el desarrollo de la IU para una UX optimizada, consulta las siguientes guías para desarrolladores:
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,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]
