Crea un componente de andamiaje para mantener unida la IU
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
En Material Design, un andamiaje es una estructura fundamental que proporciona una plataforma estandarizada para interfaces de usuario complejas. Une diferentes partes de la IU, como las barras de la app y los botones de acción flotantes, lo que les da a las apps un aspecto y estilo coherentes.
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o una versión posterior.
Dependencias
Crea un andamiaje
En el siguiente ejemplo, se proporciona un ejemplo completo de cómo puedes implementar Scaffold. Contiene una barra de la app superior, una barra de la app inferior y un botón de acción flotante que interactúa con el estado interno de Scaffold.
Resultados
Figura 1: Una implementación de andamiaje.
Puntos clave
El elemento componible Scaffold proporciona una API sencilla que puedes usar para ensamblar rápidamente la estructura de tu app según los lineamientos de Material Design.
Scaffold acepta varios elementos componibles como parámetros. Entre estos, se incluyen los siguientes:
topBar: Es la barra de la app que se encuentra en la parte superior de la pantalla.
bottomBar: Es la barra de la app que se encuentra en la parte inferior de la pantalla.
floatingActionButton: Es un botón que se coloca sobre la esquina inferior derecha de la pantalla y que puedes usar para exponer acciones clave.
Para obtener ejemplos más detallados sobre cómo implementar barras de la app superior e inferior, consulta la página de barras de la app.
También puedes pasar contenido Scaffold como lo harías con otros contenedores. Pasa un valor innerPadding a la lambda content que puedes usar en elementos secundarios componibles.
Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
Crea una estructura de pantalla principal
Descubre cómo usar una plataforma estandarizada para compilar interfaces de usuario complejas. El andamiaje une diferentes partes de la IU, lo que les da a las apps un aspecto coherente.
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
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-02-06 (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-02-06 (UTC)"],[],[],null,["# Create a scaffold component to hold the UI together\n\n\u003cbr /\u003e\n\nIn Material Design, a scaffold is a fundamental structure that provides a\nstandardized platform for complex user interfaces. It holds together different\nparts of the UI, such as app bars and floating action buttons, giving apps a\ncoherent look and feel.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21\nor higher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a scaffold\n-----------------\n\nThe following example provides a full example of how you might implement\n[`Scaffold`](/reference/kotlin/androidx/compose/material/package-summary#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)). It contains a top app bar, bottom app bar, and a floating action\nbutton that interacts with `Scaffold`'s internal state.\n\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun ScaffoldExample() {\n var presses by remember { mutableIntStateOf(0) }\n\n Scaffold(\n topBar = {\n TopAppBar(\n colors = topAppBarColors(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n titleContentColor = MaterialTheme.colorScheme.primary,\n ),\n title = {\n Text(\"Top app bar\")\n }\n )\n },\n bottomBar = {\n BottomAppBar(\n containerColor = MaterialTheme.colorScheme.primaryContainer,\n contentColor = MaterialTheme.colorScheme.primary,\n ) {\n Text(\n modifier = Modifier\n .fillMaxWidth(),\n textAlign = TextAlign.Center,\n text = \"Bottom app bar\",\n )\n }\n },\n floatingActionButton = {\n FloatingActionButton(onClick = { presses++ }) {\n Icon(Icons.Default.Add, contentDescription = \"Add\")\n }\n }\n ) { innerPadding -\u003e\n Column(\n modifier = Modifier\n .padding(innerPadding),\n verticalArrangement = Arrangement.spacedBy(16.dp),\n ) {\n Text(\n modifier = Modifier.padding(8.dp),\n text =\n \"\"\"\n This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.\n\n It also contains some basic inner content, such as this text.\n\n You have pressed the floating action button $presses times.\n \"\"\".trimIndent(),\n )\n }\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Scaffold.kt#L47-L100\n \n```\n\n\u003cbr /\u003e\n\nResults\n-------\n\n**Figure 1.** An implementation of scaffold.\n\nKey points\n----------\n\nThe [`Scaffold`](/reference/kotlin/androidx/compose/material/ScaffoldState) composable provides a straightforward API you can use to\nquickly assemble your app's structure according to Material Design guidelines.\n`Scaffold` accepts several composables as parameters. Among these are the\nfollowing:\n\n- `topBar`: The app bar across the top of the screen.\n- `bottomBar`: The app bar across the bottom of the screen.\n- `floatingActionButton`: A button that hovers over the bottom-right corner of the screen that you can use to expose key actions.\n\nFor more detailed examples on how you can implement both top and bottom\napp bars, see the app bars page.\n\nYou can also pass `Scaffold` content as you would to other containers. It passes\nan `innerPadding` value to the `content` lambda that you can then use in child\ncomposables.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Create a home screen scaffold\n\nFind out how to use a standardized platform to build complex user interfaces. The scaffold holds together different parts of the UI, giving apps a coherent look and feel. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/create-a-home-screen-scaffold) \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
