Toolbar: la barra de herramientas en aplicaciones Android

Autor: IT Sectr Publicado: 2026-02-23 Tiempo de lectura: 12 min

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 una barra de herramientas Android personalizable, sucesora de ActionBar de Material Design
  • ActionBar es la barra del sistema que existía antes de Android 5.0, reemplazada por Toolbar
  • Material 3 — Top App Bar con cuatro variantes: Small, Center-aligned, Medium, Large
  • Menu — menú XML con action items, integrado en Toolbar mediante onCreateOptionsMenu
  • Personalización — título, logotipo, icono de navegación, vistas personalizadas y animaciones

¿Qué es Toolbar?

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: historia y evolución

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ísticaActionBarToolbar
PosiciónFija arribaCualquier lugar del layout
PersonalizaciónLimitada (color, fondo)Completa (vistas, estilos, animaciones)
ColapsadoNo compatibleCollapsingToolbarLayout
AnimaciónSolo del sistemaCualquiera (ObjectAnimator, Transition)
Material 3No compatibleSmall / Medium / Large App Bar

Configurar Toolbar en Android

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.

xml
<!-- 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>
kotlin
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
    }
}

Integrar Menú en Toolbar

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.

xml
<!-- 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>
kotlin
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: Center y Large Top App Bar

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).

xml
<!-- 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>

Personalización avanzada de Toolbar

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.

kotlin
// 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

¿Cuál es la diferencia entre Toolbar y ActionBar?

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.

¿Cómo ocultar Toolbar al hacer scroll?

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.

¿Cuántos action items se pueden colocar en Toolbar?

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).

¿Cómo agregar SearchView a Toolbar?

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.

¿Qué es CollapsingToolbarLayout?

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

  • Toolbar es una barra de herramientas Android flexible que reemplazó a ActionBar y está totalmente integrada con Material Design
  • Material 3 Top App Bar — cuatro variantes: Small, Center-aligned, Medium, Large con diferente comportamiento al hacer scroll
  • ActionBar es una barra del sistema obsoleta, limitada en personalización y animación
  • Menú y action items — integración mediante menú XML con banderas always/ifRoom/never para control de visibilidad
  • CollapsingToolbarLayout — colapso animado de Toolbar al hacer scroll para pantallas con imagen de cabecera
  • Personalización — logotipo, subtítulo, vistas personalizadas, SearchView, PopupMenu y colores de Material 3
  • SearchView — action view integrado para búsqueda con entrada de voz y autocompletado

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.

Discutir el proyecto

Lea también