Optimización de la app para pantallas grandes
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
NIVEL 2: Lineamientos de calidad de las apps para pantallas grandes que preparan tu app para pantallas grandes y pequeñas.
LAS APPS OPTIMIZADAS PARA PANTALLAS GRANDES aprovechan la gran variedad de pantallas de los dispositivos con pantalla grande para brindar una experiencia del usuario atractiva y productiva.
Las apps optimizadas se compilan con diseños responsivos o adaptables que se ajustan a las orientaciones vertical y horizontal, al modo multiventana y a los estados del dispositivo plegado y desplegado. Los paneles laterales y rieles de navegación mejoran una interfaz de usuario que formatea y posiciona de forma dinámica elementos como botones, campos de texto y diálogos para lograr una experiencia del usuario óptima.
Las apps optimizadas para pantallas grandes son compatibles con la navegación con teclado, las combinaciones de teclas, el zoom del mouse y el panel táctil, el "clic con el botón derecho" y el comportamiento de desplazamiento del mouse.
Sugerencias y precauciones
check_circle
Qué debes hacer
- Crea diseños de dos paneles.
- Usa diseños de cuadrícula y columna.
- Reemplaza las barras de navegación por rieles y paneles laterales de navegación.
- Usa la incorporación de actividades en apps heredadas de varias actividades.
- Brinda compatibilidad con la funcionalidad avanzada de teclado, mouse y panel táctil.
cancel
Qué no debes hacer
- No estires los elementos de la IU (campos de texto, botones y diálogos) para llenar espacio adicional.
- No estires ni recortes imágenes.
- No hagas que paneles ni hojas de cálculo sean de ancho completo.
Lineamientos
Sigue los lineamientos del nivel 2 para optimizar tus apps para pantallas grandes.
Admite pantallas de todos los tamaños en dispositivos de todo tipo con diseños responsivos o adaptables que proporcionen una experiencia del usuario óptima.
Lineamientos LS-U1 a LS-U4
Qué
Los diseños de la app se ajustan a las dimensiones de las pantallas grandes. La IU de la app incluye lo siguiente:
- Paneles laterales y rieles de navegación de vanguardia
- Diseños de cuadrícula que se adaptan a los cambios de tamaño de la ventana
- Diseños de columnas
- Paneles del extremo final que se abren de forma predeterminada en pantallas grandes
Los diseños de dos paneles aprovechan el espacio de pantalla grande. Las apps de varias actividades implementan la incorporación de actividades para crear diseños de varios paneles de actividades en paralelo.
Los objetivos táctiles son grandes y accesibles. Los elementos de diseño interactivos son enfocables.
Por qué
Los dispositivos con pantalla grande abarcan una variedad de factores de forma, como tablets, plegables y dispositivos ChromeOS. Los tamaños de visualización varían. En algunos casos, los dispositivos se usan principalmente en orientación horizontal.
Cómo
Consulta la descripción general de la UX.
Admite dispositivos de entrada de hardware externos para aumentar la usabilidad de la app y la satisfacción del usuario.
Lineamientos LS-I3 a LS-I9
Qué
La app ofrece compatibilidad mejorada con la entrada de teclado, mouse y panel táctil. Se puede acceder a los menús de opciones con el botón derecho del mouse y el panel táctil (botón secundario del mouse o presión secundaria). Se puede acercar el contenido de la app con la rueda del mouse y los gestos de pellizcar del panel táctil. Los elementos de la IU tienen estados de desplazamiento.
Por qué
Los periféricos, como teclado, mouse y panel táctil, suelen conectarse a dispositivos con pantallas grandes. Los dispositivos ChromeOS suelen tener un teclado y un panel táctil integrados. Los usuarios están acostumbrados a usar combinaciones de teclas, varios botones del mouse, la rueda del mouse y gestos del panel táctil.
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,["# Large screen optimized\n\nTIER 2 --- [Large screen app\nquality](/docs/quality-guidelines/large-screen-app-quality) guidelines that\nprepare your app for displays large and small.\n\nAPPS OPTIMIZED FOR LARGE SCREENS take advantage of the expansive displays of\nlarge screen devices to provide a productive, engaging user experience.\n\nOptimized apps are built with responsive/adaptive layouts that conform to\nportrait and landscape orientations, multi‑window mode, and folded and\nunfolded device states. Navigation rails and drawers enhance a user interface\nthat dynamically formats and positions elements such as buttons, text fields,\nand dialogs for an optimal user experience.\n\nApps optimized for large screens provide support for keyboard navigation,\nkeyboard shortcuts, and mouse and trackpad zoom, \"right‑click,\" and hover\nbehavior.\n\nDo's and don'ts\n---------------\n\ncheck_circle\n\n### Do\n\n- Create two-pane layouts\n- Use grid and column layouts\n- Replace navigation bars with navigation rails and drawers\n- Use activity embedding in legacy, multi-activity apps\n- Support advanced keyboard, mouse, and trackpad functionality \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space\n- Stretch or crop images\n- Make panels or sheets full width\n\nGuidelines\n----------\n\nFollow the Tier 2 guidelines to optimize your apps for large screens. \n\n### [UX](/docs/quality-guidelines/large-screen-app-quality#t2_ux)\n\nSupport screens of all sizes on devices of all kinds with responsive/adaptive layouts that provide an optimal user experience.\n\nGuidelines [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) \n\n#### What\n\nApp layouts conform to large screen dimensions. App UI includes:\n\n- Leading-edge navigation rails and drawers\n- Grid layouts that accommodate window size changes\n- Column layouts\n- Trailing-edge panels that are open by default on large screens\n\nTwo-pane layouts take advantage of large screen space. Multi‑activity apps implement activity embedding to create multi‑pane layouts of activities side by side.\n\nTouch targets are large and reachable. Interactive drawables are focusable. \n\n#### Why\n\nLarge screen devices encompass a variety of form factors, including tablets, foldables, and ChromeOS devices. Display sizes vary. Devices are often---sometimes primarily---used in landscape orientation. \n\n#### How\n\nSee the [UX](/guide/topics/large-screens/ux) overview. \n\n### [Keyboard, mouse, and trackpad](/docs/quality-guidelines/large-screen-app-quality#t2_keyboard_mouse_trackpad)\n\nSupport external hardware input devices to increase app usability and user satisfaction.\n\nGuidelines [LS-I3](/docs/quality-guidelines/large-screen-app-quality#LS-I3) through [LS-I9](/docs/quality-guidelines/large-screen-app-quality#LS-I9) \n\n#### What\n\nApp provides enhanced support for keyboard, mouse, and trackpad input. Options menus are accessible by mouse and trackpad right‑click (secondary mouse button or secondary tap) behavior. App content can be zoomed using the mouse scroll wheel and trackpad pinch gestures. UI elements have hover states. \n\n#### Why\n\nPeripherals such as keyboards, mice, and trackpads are often connected to large screen devices. ChromeOS devices typically have a built‑in keyboard and trackpad. Users are accustomed to using keyboard shortcuts, multiple mouse buttons, mouse scroll wheel, and trackpad gestures. \n\n#### How\n\nSee the [Keyboard, mouse, and trackpad](/guide/topics/large-screens/keyboard-mouse-and-trackpad-tier-2) overview."]]
