Toolbar (barra de herramientas) es un componente de Android que reemplazó a ActionBar, mostrando el título de la pantalla, elementos de navegación y acciones. Toolbar forma parte de Material Design Library y es totalmente personalizable: desde un título estándar hasta vistas personalizadas e iconos animados. Más información sobre el componente en la especificación de Material Design 3.
Puntos clave
Toolbar es un componente de Android de la biblioteca Material Design (androidx.appcompat.widget.Toolbar) que proporciona una barra de herramientas flexible para la pantalla de la aplicación. Toolbar reemplazó al obsoleto ActionBar, dando a los desarrolladores control total sobre la apariencia y el comportamiento. Puede colocarse en cualquier lugar del layout, tener vistas secundarias personalizadas, animarse y adaptarse a diferentes tamaños de pantalla.
Material Design 3 (2026) define la Top App Bar — la evolución de Toolbar — con cuatro variantes: Small (compacta, 48 dp), Center-aligned (título centrado), Medium (título ampliado, 112 dp) y Large (título grande, 168 dp). Cada variante tiene su propio comportamiento al hacer scroll: Small permanece fija, Medium y Large se colapsan a Small al desplazar el contenido hacia arriba.
Toolbar muestra tres zonas clave: el icono de navegación (izquierda, normalmente un menú hamburguesa o flecha Atrás), el título de la pantalla (centro o izquierda) y los action items (derecha — iconos de acción, menú overflow). Toolbar puede contener un logotipo, subtítulo, vistas personalizadas (search view, switch) y el CollapsingToolbarLayout animado en combinación con CoordinatorLayout.
ActionBar es una barra del sistema Android que apareció en Android 3.0 (API 11) como reemplazo de la obsoleta Title Bar. ActionBar estaba estrechamente vinculada a Activity, tenía una posición fija en la parte superior de la pantalla y opciones de personalización limitadas. Con el lanzamiento de Android 5.0 (Lollipop, 2014) y la biblioteca AppCompat, Google presentó Toolbar como un reemplazo flexible.
Las principales deficiencias de ActionBar que Toolbar resolvió: posición fija (solo arriba), imposibilidad de animación, dificultad con vistas personalizadas, problemas con CoordinatorLayout y CollapsingToolbarLayout. Google declaró oficialmente ActionBar obsoleto (deprecated) en 2015 y recomienda Toolbar para todos los proyectos nuevos. A partir de Android 12 (2021), ActionBar está deshabilitado por defecto en los nuevos temas de Material 3.
| Característica | ActionBar | Toolbar |
|---|---|---|
| Posición | Fija arriba | Cualquier lugar del layout |
| Personalización | Limitada (color, fondo) | Completa (vistas, estilos, animaciones) |
| Colapsado | No compatible | CollapsingToolbarLayout |
| Animación | Solo del sistema | Cualquiera (ObjectAnimator, Transition) |
| Material 3 | No compatible | Small / Medium / Large App Bar |
Para usar Toolbar es necesario: (1) establecer un tema sin ActionBar (Theme.Material3.NoActionBar o Theme.AppCompat.NoActionBar), (2) agregar Toolbar al layout XML, (3) configurarlo como ActionBar mediante setSupportActionBar. Después, Toolbar obtiene todas las funciones de ActionBar: manejo de Menú, icono de navegación, título desde AndroidManifest.
<!-- activity_main.xml con Toolbar -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:titleTextColor="@android:color/white"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
// Configuración del icono de navegación
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
// Título personalizado
supportActionBar?.title = "Inicio"
supportActionBar?.subtitle = "¡Hola, usuario!"
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.toolbar_menu, menu)
return true
}
}Toolbar se integra con el sistema de Menú de Android a través de los callbacks onCreateOptionsMenu y onOptionsItemSelected. El Menú define action items — iconos de acción que se muestran a la derecha en la Toolbar. Si los action items no caben, se mueven automáticamente al menú overflow (tres puntos). El desarrollador controla esto mediante el atributo app:showAsAction: always, ifRoom, never.
<!-- res/menu/toolbar_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_search"
android:icon="@drawable/ic_search"
android:title="Buscar"
app:showAsAction="ifRoom"
app:actionViewClass="androidx.appcompat.widget.SearchView" />
<item
android:id="@+id/action_notifications"
android:icon="@drawable/ic_notifications"
android:title="Notificaciones"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:title="Ajustes"
app:showAsAction="never" />
</menu>override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
R.id.action_search -> {
Toast.makeText(this, "Buscar", Toast.LENGTH_SHORT).show()
true
}
R.id.action_notifications -> {
openNotifications()
true
}
R.id.action_settings -> {
openSettings()
true
}
else -> super.onOptionsItemSelected(item)
}
}Material 3 introduce cuatro variantes de Top App Bar: Small (compacta, 48 dp), Center-aligned (título centrado), Medium (112 dp con título ampliado) y Large (168 dp con título grande). Medium y Large App Bar admiten comportamiento colapsable — al desplazar el contenido hacia arriba, se colapsan suavemente a Small. La animación se controla mediante CoordinatorLayout y AppBarLayout.
Center-aligned Top App Bar es una nueva variante de Material 3 donde el título se coloca en el centro de la barra. Este estilo se usa a menudo en aplicaciones de Google (Play Store, YouTube) y se recomienda para pantallas con un número mínimo de action items. Small Top App Bar es la Toolbar clásica, compatible con versiones antiguas de Android. Medium y Large son adecuadas para pantallas donde el título es un elemento clave (perfil, página principal).
<!-- Material 3 Large Top App Bar con CollapsingToolbarLayout -->
<CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="168dp"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</CollapsingToolbarLayout>
</AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Contenido de la pantalla..." />
</NestedScrollView>
</CoordinatorLayout>Toolbar admite personalización completa: cambio de altura, animaciones de aparición/ocultación, vistas secundarias personalizadas, logotipo, icono de navegación, PopupMenu e integración con CoordinatorLayout. Para la animación de ocultación al hacer scroll se usa AppBarLayout con las banderas scroll, enterAlways, snap. Para el efecto de paralaje de imagen debajo de Toolbar — CollapsingToolbarLayout con mode parallax.
El logotipo y subtítulo se configuran mediante los métodos setLogo y setSubtitle. El icono de navegación se configura mediante setNavigationIcon y setNavigationOnClickListener. Las vistas personalizadas se agregan mediante addView directamente en la Toolbar. Para SearchView, se usa MenuItem con actionViewClass. Para el tema oscuro, los colores de los atributos de Material 3 se aplican automáticamente.
// Personalización avanzada de Toolbar
with (toolbar) {
// Logotipo y título
setLogo(R.drawable.ic_logo)
setTitle("Mi aplicación")
setSubtitle("Versión 2.0")
// Icono de navegación con controlador
setNavigationIcon(R.drawable.ic_drawer)
setNavigationOnClickListener {
drawerLayout.open()
}
// Vista personalizada — Switch para tema
val themeSwitch = Switch(this@MainActivity).apply {\n thumbDrawable = ContextCompat.getDrawable(
this@MainActivity, R.drawable.ic_theme
)
}
addView(themeSwitch)
// PopupMenu personalizado
setOnMenuItemClickListener { item ->
Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
true
}
}Preguntas frecuentes
ActionBar es una barra del sistema de Android 3.0–4.4 con personalización limitada. Toolbar es un componente flexible de Material Design que se puede colocar en cualquier lugar del layout, animar y llenar con vistas personalizadas. Toolbar reemplaza completamente a ActionBar mediante setSupportActionBar.
Usa CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Configura el flag scroll para Toolbar en layout_scrollBehavior. Al hacer scroll hacia abajo, Toolbar se oculta; al hacer scroll hacia arriba, aparece con animación. En Material 3, Medium/Large Top App Bar se colapsa a Small.
La limitación es el ancho físico de la pantalla. Se recomiendan 2–4 action items (iconos). El resto se mueve al menú overflow (tres puntos). Configuración mediante app:showAsAction: always (mostrar siempre), ifRoom (si hay espacio), never (en overflow).
SearchView se agrega como action view en el Menú. En XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView se colapsa automáticamente a un icono de búsqueda y se expande al pulsarlo. Admite búsqueda por voz y autocompletado mediante SearchRecentSuggestionsProvider.
CollapsingToolbarLayout es un contenedor para Toolbar que se colapsa animadamente al hacer scroll del contenido. Se usa con CoordinatorLayout y AppBarLayout. Admite modos: pin (fijo), parallax (efecto de paralaje). Ideal para pantallas con imagen de cabecera (perfil, página de detalle).
Resumen
Desarrollaremos una aplicación móvil llave en mano
IT Sectr crea aplicaciones para iOS y Android para startups y empresas desde 2017. Le asesoraremos y le propondremos la mejor solución.
Lea también