Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Un diseño define la estructura visual para que un usuario interactúe con tu app, como en una actividad. Android proporciona una variedad de bibliotecas, puntos de partida canónicos y técnicas para mostrar y posicionar contenido.
Respeta las zonas seguras del dispositivo Honor, que incluyen partes de la IU, como cortes de pantalla, inserciones de borde a borde, pantallas de borde, teclados de software y barras del sistema. Proporciona un diseño flexible para que los usuarios interactúen con el teclado.
Advertencia: Ten cuidado cuando cubras el contenido con el teclado.
Ergonomía de interacción
Mantén las interacciones esenciales, como la navegación principal, en un área de la pantalla accesible. Los botones de acción flotantes (BAF) proporcionan un
punto de interacción destacado y accesible.
Grupos de contención
Usa la contención para agrupar contenido relacionado y guiar al usuario a través del contenido y las acciones. Tarjetas que usan contención explícita para agrupar contenido con acciones relacionadas.
Alineación
Proporciona una alineación coherente entre el contenido y los elementos de la IU similares.
check_circle
Qué debes hacer
Establece un espaciado coherente entre elementos similares.
cancel
Qué no debes hacer
Interrumpe la legibilidad al espaciar de forma incoherente elementos similares, lo que puede hacer que los diseños parezcan aleatorios.
Orientación del diseño
No te limites al modo vertical ni a un diseño idealizado: Considera las diferentes relaciones de aspecto, clases de tamaño y resoluciones que los usuarios pueden encontrar.
Interacciones esenciales
No abrumes al usuario con demasiadas acciones por vista.
Anota las especificaciones de diseño
Cuando compiles diseños personalizados, anota cómo debe ubicarse el contenido dentro del diseño con términos de alineación, restricciones o gravedad. Incluye cómo deben responder las imágenes a su contenedor para que se muestren correctamente.
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-08-28 (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-08-28 (UTC)"],[],[],null,["A layout defines the visual structure for a user to interface with your app,\nsuch as in an activity. Android provides a range of libraries, canonical\nstarting points, and techniques to display and position content.\n\nGet Started\n\nStart designing Android layouts by learning [app anatomy](/develop/ui/compose/layouts/adaptive/app-anatomy) then how to\n[structure your app's content](/develop/ui/compose/layouts/adaptive/content-structure).\n\nTakeaways \n**Device safe areas**\n\n\nHonor device safe areas, which includes parts of the UI such as display\ncutouts, edge-to-edge insets, edge displays, software keyboards, and system\nbars. Provide a flexible layout for users to\ninteract with the keyboard.\nWarning: Be careful when covering content with the keyboard.\nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](/static/images/design/ui/mobile/layout-basics-video-1.mp4) and watch it with a video player. \n**Interaction ergonomics**\n\n\nKeep essential interactions, like primary navigation, in a reachable screen\narea. Floating action buttons (FABs) provide a\nprominent and reachable interaction point \n**Containment groups**\n\n\nUse containment to group related content to guide the user through content and\nactions. Cards using explicit containment to group content with related actions.\n\n**Alignment**\n\nProvide consistent alignment between similar content and UI elements.\n\n\u003cbr /\u003e\n\ncheck_circle\n\nDo \nEstablish consistent spacing between like elements. \ncancel\n\nDon't \nDisrupt readability by inconsistently spacing like elements, which can make designs appear haphazard. \n**Layout orientation**\n\n\nDon't stick to portrait or an idealized layout: Consider different aspect\nratios, size classes, and resolutions that users may encounter.\n\n\n**Essential interactions**\n\n\nDon't overwhelm your user with too many actions per view. \n**Notate layout specs**\n\n\nWhen building custom layouts, notate how content should sit within the layout\nusing alignment, constraints, or gravity terms. Include how images should\nrespond to their container to display properly.\n\n\u003cbr /\u003e"]]
