Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Las entradas, el contenido o las demás acciones pueden aparecer en relación con otros elementos o estar restringidos a un contenedor principal. Los diseños pueden ser más personalizados, pero asegúrate de seguir una agrupación, columnas y espaciado coherentes.
La autenticación es un diseño relativo común, como se muestra en la siguiente figura. Donde un diseño personalizado se describe por la forma en que se relacionan los elementos de la IU entre sí.
Los diseños también pueden usar una combinación de tipos de diseño. Por ejemplo, puedes combinar un carrusel o un desplazamiento horizontal con tarjetas verticales. O bien, puedes presentar un gráfico personalizado con datos de lista vertical.
Puedes presentar contenido en filas o columnas desplazables con filas y columnas diferidas.
El diseño de pantalla completa es otro diseño común, como se usa en el modo envolvente.
Figura 27: Diseño de pantalla completa, como se usa en el modo envolvente
Si trabajas con Views en lugar de Compose, puedes usar ConstraintLayout para diseñar vistas según las relaciones entre las vistas secundarias y el diseño principal, lo que permite diseños grandes y complejos.
ConstraintLayout te permite compilar todo arrastrando y soltando elementos, en lugar de editar el XML con el editor de diseño. Obtén más información para compilar una IU con el editor de diseño.
Un WebView es una vista que muestra páginas web integradas en la app. En la mayoría de los casos, recomendamos usar un navegador web estándar, como Chrome, para entregar contenido al usuario. Para obtener más información sobre los navegadores web, consulta la guía para invocar un navegador con un intent.
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,["Inputs, content, or other actions may appear relative to each other or\nconstrained to a parent container. Layouts can be more custom, but make sure to\nfollow consistent grouping, columns, and spacing.\n\nAuthentication is a common relative layout, as shown in the following figure. Where a custom layout is described by how the UI elements in relation to each other.\n\nLayouts can also use a combination of layout types. For example, you might pair a\ncarousel or horizontal scroll with vertical cards. Or, you could present a\ncustom chart with vertical list data.\n\nYou can present content in scrolling rows or columns with lazy rows and lazy\ncolumns.\n\nFull-screen layout is another common layout, as used in [immersive mode](/design/ui/mobile/guides/layout-and-content/immersive-content).\n**Figure 27:** Full screen layout, as used in immersive mode\n\nIf you're working with Views instead of Compose, you can use\n[`ConstraintLayout`](/develop/ui/views/layout/constraint-layout) to lay out views according to relationships between\nsibling views and the parent layout, allowing for large and complex layouts.\n`ConstraintLayout` lets you build entirely by dragging and dropping instead of\nediting the XML using the layout editor. Learn more about [building a UI with\nLayout Editor](/studio/write/layout-editor).\n\nLearn more about [Compose layout basics](/develop/ui/compose/layouts/basics) and what makes up a composable.\n\nWebviews\n\nA Webview is a view that displays in-app web pages. In most cases, we recommend\nusing a standard web browser, like Chrome, to deliver content to the user. To\nlearn more about web browsers, read the guide for [invoking a browser with an\nintent](/guide/components/intents-common#Browser)."]]
