Toolbar: a barra de ferramentas em aplicações Android

Autor: IT Sectr Publicado: 2026-02-23 Tempo de leitura: 12 min

Toolbar (barra de ferramentas) é um componente Android que substituiu o ActionBar, exibindo o título da tela, elementos de navegação e ações. Toolbar faz parte da Material Design Library e é totalmente personalizável: desde um título padrão até visualizações personalizadas e ícones animados. Saiba mais sobre o componente na especificação do Material Design 3.

Pontos principais

  • Toolbar é uma barra de ferramentas Android personalizável, sucessora do ActionBar do Material Design
  • ActionBar é a barra do sistema que existia antes do Android 5.0, substituída por Toolbar
  • Material 3 — Top App Bar com quatro variantes: Small, Center-aligned, Medium, Large
  • Menu — menu XML com action items, integrado no Toolbar via onCreateOptionsMenu
  • Personalização — título, logotipo, ícone de navegação, visualizações personalizadas e animações

O que é Toolbar?

Toolbar é um componente Android da biblioteca Material Design (androidx.appcompat.widget.Toolbar) que fornece uma barra de ferramentas flexível para a tela do aplicativo. Toolbar substituiu o obsoleto ActionBar, dando aos programadores controlo total sobre a aparência e o comportamento. Pode ser colocado em qualquer lugar do layout, ter visualizações filhas personalizadas, ser animado e adaptar-se a diferentes tamanhos de ecrã.

O Material Design 3 (2026) define a Top App Bar — a evolução do Toolbar — com quatro variantes: Small (compacta, 48 dp), Center-aligned (título centralizado), Medium (título ampliado, 112 dp) e Large (título grande, 168 dp). Cada variante tem o seu próprio comportamento de scroll: Small permanece fixa, Medium e Large colapsam para Small ao deslocar o conteúdo para cima.

Toolbar exibe três zonas principais: o ícone de navegação (esquerda, normalmente um menu hambúrguer ou seta Voltar), o título do ecrã (centro ou esquerda) e os action items (direita — ícones de ação, menu overflow). Toolbar pode conter um logotipo, subtítulo, visualizações personalizadas (search view, switch) e o CollapsingToolbarLayout animado em combinação com CoordinatorLayout.

ActionBar: história e evolução

ActionBar é uma barra do sistema Android que apareceu no Android 3.0 (API 11) como substituta da obsoleta Title Bar. ActionBar estava fortemente ligada à Activity, tinha uma posição fixa no topo do ecrã e opções de personalização limitadas. Com o lançamento do Android 5.0 (Lollipop, 2014) e da biblioteca AppCompat, a Google apresentou o Toolbar como uma substituição flexível.

As principais deficiências do ActionBar que o Toolbar resolveu: posição fixa (apenas no topo), impossibilidade de animação, dificuldade com visualizações personalizadas, problemas com CoordinatorLayout e CollapsingToolbarLayout. A Google declarou oficialmente o ActionBar obsoleto (deprecated) em 2015 e recomenda Toolbar para todos os novos projetos. A partir do Android 12 (2021), o ActionBar está desativado por predefinição nos novos temas Material 3.

CaracterísticaActionBarToolbar
PosiçãoFixa no topoQualquer lugar no layout
PersonalizaçãoLimitada (cor, fundo)Completa (vistas, estilos, animações)
ColapsoNão suportadoCollapsingToolbarLayout
AnimaçãoApenas do sistemaQualquer (ObjectAnimator, Transition)
Material 3Não suportadoSmall / Medium / Large App Bar

Configurar Toolbar no Android

Para usar Toolbar é necessário: (1) definir um tema sem ActionBar (Theme.Material3.NoActionBar ou Theme.AppCompat.NoActionBar), (2) adicionar Toolbar ao layout XML, (3) defini-lo como ActionBar através de setSupportActionBar. Depois disso, Toolbar obtém todas as funcionalidades do ActionBar: manipulação de Menu, ícone de navegação, título do AndroidManifest.

xml
<!-- activity_main.xml com 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)

        // Configuração do ícone de navegação
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Título personalizado
        supportActionBar?.title = "Início"
        supportActionBar?.subtitle = "Olá, utilizador!"
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }
}

Integrar Menu no Toolbar

Toolbar integra-se com o sistema de Menu do Android através dos callbacks onCreateOptionsMenu e onOptionsItemSelected. O Menu define action items — ícones de ação exibidos à direita no Toolbar. Se os action items não couberem, eles movem-se automaticamente para o menu overflow (três pontos). O programador controla isso através do 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="Pesquisar"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Notificações"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Definições"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "Pesquisar", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center e Large Top App Bar

Material 3 introduz quatro variantes de Top App Bar: Small (compacta, 48 dp), Center-aligned (título centralizado), Medium (112 dp com título ampliado) e Large (168 dp com título grande). Medium e Large App Bar suportam comportamento colapsável — ao deslocar o conteúdo para cima, colapsam suavemente para Small. A animação é controlada através de CoordinatorLayout e AppBarLayout.

Center-aligned Top App Bar é uma nova variante do Material 3 onde o título é posicionado no centro da barra. Este estilo é frequentemente usado em aplicações Google (Play Store, YouTube) e é recomendado para ecrãs com um número mínimo de action items. Small Top App Bar é o Toolbar clássico, compatível com versões antigas do Android. Medium e Large são adequados para ecrãs onde o título é um elemento chave (perfil, página inicial).

xml
<!-- Material 3 Large Top App Bar com 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="Conteúdo do ecrã..." />
    </NestedScrollView>
</CoordinatorLayout>

Personalização avançada do Toolbar

Toolbar suporta personalização completa: alteração de altura, animações de aparecer/ocultar, visualizações filhas personalizadas, logotipo, ícone de navegação, PopupMenu e integração com CoordinatorLayout. Para animação de ocultação ao fazer scroll, usa-se AppBarLayout com as flags scroll, enterAlways, snap. Para efeito de paralaxe de imagem sob o Toolbar — CollapsingToolbarLayout com mode parallax.

O logotipo e subtítulo são configurados através dos métodos setLogo e setSubtitle. O ícone de navegação é configurado através de setNavigationIcon e setNavigationOnClickListener. As visualizações personalizadas são adicionadas através de addView diretamente no Toolbar. Para SearchView, usa-se MenuItem com actionViewClass. Para o tema escuro, as cores dos atributos Material 3 são aplicadas automaticamente.

kotlin
// Personalização avançada do Toolbar
with (toolbar) {
    // Logotipo e título
    setLogo(R.drawable.ic_logo)
    setTitle("Minha aplicação")
    setSubtitle("Versão 2.0")

    // Ícone de navegação com manipulador
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Visualização 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
    }
}

Perguntas frequentes

Qual é a diferença entre Toolbar e ActionBar?

ActionBar é uma barra do sistema do Android 3.0–4.4 com personalização limitada. Toolbar é um componente flexível do Material Design que pode ser colocado em qualquer lugar do layout, animado e preenchido com visualizações personalizadas. Toolbar substitui completamente o ActionBar através de setSupportActionBar.

Como ocultar Toolbar ao fazer scroll?

Use CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Configure a flag scroll para Toolbar no layout_scrollBehavior. Ao fazer scroll para baixo, Toolbar oculta-se; ao fazer scroll para cima, aparece com animação. No Material 3, Medium/Large Top App Bar colapsa para Small.

Quantos action items podem ser colocados no Toolbar?

A limitação é a largura física do ecrã. Recomendam-se 2–4 action items (ícones). Os restantes movem-se para o menu overflow (três pontos). Configuração através de app:showAsAction: always (mostrar sempre), ifRoom (se houver espaço), never (no overflow).

Como adicionar SearchView ao Toolbar?

SearchView é adicionado como action view no Menu. No XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView colapsa automaticamente para um ícone de pesquisa e expande ao toque. Suporta pesquisa por voz e autocompletar através de SearchRecentSuggestionsProvider.

O que é CollapsingToolbarLayout?

CollapsingToolbarLayout é um contentor para Toolbar que colapsa animadamente ao fazer scroll do conteúdo. Usa-se com CoordinatorLayout e AppBarLayout. Suporta modos: pin (fixo), parallax (efeito de paralaxe). Ideal para ecrãs com imagem de cabeçalho (perfil, página de detalhe).

Resumo

  • Toolbar é uma barra de ferramentas Android flexível que substituiu o ActionBar e está totalmente integrada com Material Design
  • Material 3 Top App Bar — quatro variantes: Small, Center-aligned, Medium, Large com diferentes comportamentos de scroll
  • ActionBar é uma barra do sistema obsoleta, limitada em personalização e animação
  • Menu e action items — integração através de menu XML com flags always/ifRoom/never para controlo de visibilidade
  • CollapsingToolbarLayout — colapso animado do Toolbar ao fazer scroll para ecrãs com imagem de cabeçalho
  • Personalização — logotipo, subtítulo, visualizações personalizadas, SearchView, PopupMenu e cores Material 3
  • SearchView — action view integrado para pesquisa com entrada de voz e autocompletar

Vamos desenvolver um aplicativo móvel chave na mão

A IT Sectr cria aplicativos para iOS e Android para startups e empresas desde 2017. Nós vamos aconselhá-lo e propor a melhor solução.

Discutir o projeto

Leia também