Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Las barras de la app son contenedores en la parte superior o inferior de la pantalla que les brindan a los usuarios acceso a funciones y elementos de navegación clave:
Por lo general, incluye elementos de navegación principales. Puede otorgar acceso a otras acciones, por ejemplo, mediante un botón de acción flotante.
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Cómo implementar una barra superior de la app
En el siguiente código, se muestran implementaciones para los cuatro tipos de barras de la parte superior de la app, incluidos varios ejemplos de cómo puedes controlar el comportamiento de desplazamiento.
Para crear una barra superior de la app pequeña, usa el elemento componible TopAppBar. Esta es la barra superior de la app más simple posible y, en este ejemplo, solo contiene un título.
En el siguiente ejemplo, no se pasa a TopAppBar un valor para scrollBehavior, por lo que la barra superior de la app no reacciona al desplazamiento del contenido interno.
Resultado
Figura 1: Una barra superior de la app pequeña.
Barra superior de la app centrada
La barra superior de la aplicación alineada en el centro es igual que la barra de la aplicación pequeña, excepto que el título se centra dentro del componente. Para implementarlo, usa el elemento componible CenterAlignedTopAppBar dedicado.
En este ejemplo, se usa enterAlwaysScrollBehavior() para obtener el valor que pasa para scrollBehavior. La barra se contrae cuando el usuario se desplaza por el contenido interno del andamiaje.
Resultado
Figura 2: Una barra superior de la app centrada.
Barra superior de la app mediana
La barra superior de la app mediana coloca el título debajo de los íconos adicionales. Para crear uno, usa el elemento componible MediumTopAppBar.
Al igual que el código anterior, este ejemplo usa enterAlwaysScrollBehavior() para obtener el valor que pasa para scrollBehavior.
Resultado
Figura 3: Una barra superior de la app mediana que demuestra el comportamiento de desplazamiento de enterAlwaysScrollBehavior.
Barra superior de la app grande
Una barra superior de la app grande es similar a la mediana, aunque el padding entre el título y los íconos es mayor y ocupa más espacio en la pantalla en general. Para crear uno, usa el elemento componible LargeTopAppBar.
En este ejemplo, se usa exitUntilCollapsedScrollBehavior() para obtener el valor que pasa para scrollBehavior. La barra se contrae cuando el usuario se desplaza por el contenido interno del andamiaje, pero luego se expande cuando el usuario se desplaza hasta el final del contenido interno.
Resultado
Figura 4: Ejemplo de implementación de una barra de la app superior grande.
Implementa una barra de la aplicación inferior
Para crear una barra inferior de la app, usa el elemento componible BottomAppBar, que es similar al elemento componible de la barra superior de la app.
Pasas elementos componibles para los siguientes parámetros clave:
actions: Es una serie de íconos que aparecen en el lado izquierdo de la barra. Por lo general, estas son acciones clave para la pantalla determinada o elementos de navegación.
floatingActionButton: Es el botón de acción flotante que aparece en el lado derecho de la barra.
Resultado
Figura 5: Ejemplo de implementación de una barra de la app inferior.
Puntos clave
Por lo general, pasas barras de la aplicación al elemento componible Scaffold, que tiene parámetros específicos para recibirlas.
Los elementos componibles que usas para implementar las barras superiores de la app comparten parámetros clave:
title: Es el texto que aparece en la barra de la app.
navigationIcon: Es el ícono principal de navegación, que aparece a la izquierda de la barra de la app.
actions: Íconos que proporcionan al usuario acceso a acciones clave, que aparecen a la derecha de la barra de la app.
scrollBehavior: Determina cómo la barra de la app superior responde al desplazamiento del contenido interno del andamiaje.
colors: Determina cómo aparece la barra de la app.
Puedes controlar cómo responde la barra de la app cuando el usuario se desplaza por el contenido interno del andamiaje. Para ello, crea una instancia de TopAppBarScrollBehavior y pásala a la barra superior de la app para el parámetro scrollBehavior. Existen tres tipos de TopAppBarScrollBehavior:
enterAlwaysScrollBehavior: Cuando el usuario sube el contenido interno del andamiaje, se contrae la barra superior de la app. La barra de la app se expande cuando el usuario baja el contenido interno.
exitUntilCollapsedScrollBehavior: Es similar a enterAlwaysScrollBehavior, aunque la barra de la app también se expande cuando el usuario llega al final del contenido interno del andamiaje.
pinnedScrollBehavior: La barra de la app permanece en su lugar y no reacciona al desplazamiento.
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:
Cómo mostrar componentes interactivos
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,["\u003cbr /\u003e\n\nApp bars are containers at the top or the bottom of the screen that give your\nusers access to key features and navigation items:\n\n| Type | Appearance | Purpose |\n|---------------------------|----------------------------------|-------------------------------------------------------------------------------------------------------------------------------|\n| [Top app bar](#top) | Across the top of the screen. | Provides access to key tasks and information. Typically hosts a title, core action items, and certain navigation items. |\n| [Bottom app bar](#bottom) | Across the bottom of the screen. | Typically includes core navigation items. Might give access to other actions, for example, by using a floating action button. |\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a top app bar\n\nThe following code shows implementations for the four types of top app bars,\nincluding varying examples of how you can control scroll behavior.\n\n- [Small top app bar](#small)\n- [Center-aligned top app bar](#center)\n- [Medium top app bar](#medium)\n- [Large top app bar](#large)\n\nSmall top app bar\n\nTo create a small top app bar, use the [`TopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable. This is the\nsimplest possible top app bar and in this example just contains a title.\n\nThe following example does not pass `TopAppBar` a value for\n`scrollBehavior`, so the top app bar does not react to scrolling of the inner\ncontent.\n\nResult **Figure 1.** A small top app bar.\n\nCenter-aligned top app bar\n\nThe center-aligned top app bar is the same as the small app bar,\nexcept the title is centered within the component. To implement it, use the\ndedicated [`CenterAlignedTopAppBar`](/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)) composable.\n\nThis example uses `enterAlwaysScrollBehavior()` to get the value that it passes\nfor `scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content.\n\nResult **Figure 2.** A center-aligned top app bar.\n\nMedium top app bar\n\nThe medium top app bar places the title beneath any additional icons. To create\none, use the [`MediumTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#MediumTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)) composable.\n\nLike the previous code, this example uses `enterAlwaysScrollBehavior()` to\nget the value that it passes for `scrollBehavior`.\n\nResult\n\n\u003cbr /\u003e\n\n**Figure 3.** A medium top app bar demonstrating the scroll behavior from `enterAlwaysScrollBehavior`.\n\n\u003cbr /\u003e\n\nLarge top app bar\n\nA large top app bar is similar to the medium, though the padding between the\ntitle and the icons is greater and it occupies more space on screen overall. To\ncreate one, use the [`LargeTopAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#LargeTopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior) ) composable.\n\nThis example uses\n`exitUntilCollapsedScrollBehavior()` to get the value that it passes for\n`scrollBehavior`. The bar collapses when the user scrolls the\nscaffold's inner content, but then expands when the user scrolls to the end of\nthe inner content.\n\nResult **Figure 4.** An example implementation of a large top app bar.\n\nImplement a bottom app bar\n\nTo create a bottom app bar, use the [`BottomAppBar`](/reference/kotlin/androidx/compose/material3/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) composable, which is\nsimilar to the top app bar composable.\n\nYou pass composables for the following key\nparameters:\n\n- `actions`: A series of icons that appear on the left side of the bar. These are commonly either key actions for the given screen, or navigation items.\n- `floatingActionButton`: The floating action button that appears on the right side of the bar.\n\n| **Note:** You can also use `BottomAppBar` without passing a value for `actions` and `floatingActionButton`. You create a custom bottom app bar by filling `BottomAppBar` with content as you would other containers.\n\nResult **Figure 5.** An example implementation of a bottom app bar.\n\nKey points\n\n- You generally pass app bars to the `Scaffold` composable, which has specific parameters to receive them.\n- The composables that you use to implement top app\n bars share key parameters:\n\n - `title`: The text that appears across the app bar.\n - `navigationIcon`: The primary icon for navigation, which appears on the left of the app bar.\n - `actions`: Icons that provide the user access to key actions, which appear on the right of the app bar.\n - `scrollBehavior`: Determines how the top app bar responds to scrolling of the scaffold's inner content.\n - `colors`: Determines how the app bar appears.\n- You can control how the app bar responds when the user scrolls the\n scaffold's inner content. To do so, create an instance of\n [`TopAppBarScrollBehavior`](/reference/kotlin/androidx/compose/material3/TopAppBarScrollBehavior) and pass it to your top app bar for the\n `scrollBehavior` parameter. There are three types of `TopAppBarScrollBehavior`:\n\n - `enterAlwaysScrollBehavior`: When the user pulls up the scaffold's inner content, the top app bar collapses. The app bar expands when the user pulls down the inner content.\n - `exitUntilCollapsedScrollBehavior`: Similar to `enterAlwaysScrollBehavior`, though the app bar also expands when the user reaches the end of the scaffold's inner content.\n - `pinnedScrollBehavior`: The app bar remains in place and does not react to scrolling.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \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 \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)"]]
