Toolbar: суть, панель инструментов в Android приложениях

Автор: IT Sectr Опубликовано: 2026-02-23 Время чтения: 12 мин

Toolbar (панель инструментов) — компонент Android, заменивший ActionBar, который отображает заголовок экрана, навигационные элементы и действия. Toolbar входит в Material Design Library и полностью кастомизируется: от стандартного заголовка до кастомных вьюх и анимированных иконок. Подробнее о компоненте читайте в спецификации Material Design 3.

Главное

  • Toolbar — кастомизируемая панель инструментов Android, наследник ActionBar из Material Design
  • ActionBar — системная панель, существовавшая до Android 5.0, заменена Toolbar
  • Material 3 — Top App Bar с тремя вариациями: Center, Small, Medium, Large
  • Menu — XML-меню с action items, интегрируемое в Toolbar через onCreateOptionsMenu
  • Кастомизация — заголовок, логотип, навигационная иконка, кастомные вьюхи и анимации

Что такое Toolbar?

Toolbar — компонент Android из библиотеки Material Design (androidx.appcompat.widget.Toolbar), предоставляющий гибкую панель инструментов для экрана приложения. Toolbar заменил устаревший ActionBar, давая разработчикам полный контроль над внешним видом и поведением. Он может размещаться в любом месте layout, иметь кастомные дочерние вьюхи, анимироваться и адаптироваться под разные размеры экрана.

Material Design 3 (2026) определяет Top App Bar — эволюцию Toolbar — с четырьмя вариантами: Small (компактный, 48 dp), Center-aligned (заголовок по центру), Medium (увеличенный заголовок, 112 dp) и Large (крупный заголовок, 168 dp). Каждый вариант имеет своё поведение при скролле: Small остаётся фиксированным, Medium и Large сворачиваются до Small при прокрутке контента вверх.

Toolbar отображает три ключевые зоны: навигационная иконка (слева, обычно «гамбургер» или стрелка «Назад»), заголовок экрана (по центру или слева) и action items (справа — иконки действий, меню overflow). Toolbar может содержать логотип, subtitle, кастомные View (search view, switch) и анимированный CollapsingToolbarLayout в связке с CoordinatorLayout.

ActionBar: история и эволюция

ActionBar — системная панель Android, появившаяся в Android 3.0 (API 11) как замена устаревшей Title Bar. ActionBar был жёстко привязан к Activity, имел фиксированное положение вверху экрана и ограниченные возможности кастомизации. С выходом Android 5.0 (Lollipop, 2014) и библиотеки AppCompat Google представила Toolbar как гибкую замену.

Основные недостатки ActionBar, которые решил Toolbar: фиксированная позиция (только вверху), невозможность анимации, сложность с кастомными вьюхами, проблемы с CoordinatorLayout и CollapsingToolbarLayout. Google официально объявила ActionBar устаревшим (deprecated) в 2015 году и рекомендует Toolbar для всех новых проектов. Начиная с Android 12 (2021), ActionBar по умолчанию отключён в новых темах Material 3.

ОсобенностьActionBarToolbar
ПозицияФиксированный верхЛюбое место в layout
КастомизацияОграниченная (цвет, фон)Полная (вьюхи, стили, анимации)
CollapsingНе поддерживаетсяCollapsingToolbarLayout
АнимацияТолько системнаяЛюбая (ObjectAnimator, Transition)
Material 3Не поддерживаетсяSmall / Medium / Large App Bar

Настройка Toolbar в Android

Для использования Toolbar необходимо: (1) установить тему без ActionBar (Theme.Material3.NoActionBar или Theme.AppCompat.NoActionBar), (2) добавить Toolbar в XML layout, (3) установить его как ActionBar через setSupportActionBar. После этого Toolbar получает все функции ActionBar: обработку Menu, навигационную иконку, заголовок из AndroidManifest.

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

        // Настройка навигационной иконки
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Кастомный заголовок
        supportActionBar?.title = "Главная"
        supportActionBar?.subtitle = "Привет, пользователь!"
    }

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

Интеграция Menu в Toolbar

Toolbar интегрируется с системой Android Menu через колбэки onCreateOptionsMenu и onOptionsItemSelected. Menu определяет action items — иконки действий, отображаемые справа в Toolbar. Если action items не помещаются, они автоматически перемещаются в overflow меню (три точки). Разработчик управляет этим через атрибут 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="Поиск"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Уведомления"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Настройки"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "Поиск", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center и Large Top App Bar

Material 3 вводит четыре варианта Top App Bar: Small (компактный, 48 dp), Center-aligned (заголовок по центру), Medium (112 dp с увеличенным заголовком) и Large (168 dp с крупным заголовком). Medium и Large App Bar поддерживают collapsible-поведение — при скролле контента вверх они плавно сворачиваются до Small. Анимация управляется через CoordinatorLayout и AppBarLayout.

Center-aligned Top App Bar — новый вариант Material 3, где заголовок располагается по центру панели. Этот стиль часто используется в приложениях Google (Play Market, YouTube) и рекомендуется для экранов с минимальным количеством action items. Small Top App Bar — классический Toolbar, совместимый со старыми версиями Android. Medium и Large подходят для экранов, где заголовок является ключевым элементом (профиль, главная страница).

xml
<!-- Material 3 Large Top App Bar с 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="Контент экрана..." />
    </NestedScrollView>
</CoordinatorLayout>

Продвинутая кастомизация Toolbar

Toolbar поддерживает полную кастомизацию: изменение высоты, анимацию появления/скрытия, кастомные дочерние View, логотип, навигационную иконку, PopupMenu и интеграцию с CoordinatorLayout. Для анимации скрытия при скролле используется AppBarLayout с флагами scroll, enterAlways, snap. Для параллакс-эффекта изображения под Toolbar — CollapsingToolbarLayout с mode parallax.

Логотип и subtitle задаются через методы setLogo и setSubtitle. Навигационная иконка настраивается через setNavigationIcon и setNavigationOnClickListener. Кастомные View добавляются через addView непосредственно в Toolbar. Для SearchView используется MenuItem с actionViewClass. Для тёмной темы автоматически применяются цвета из атрибутов Material 3.

kotlin
// Продвинутая кастомизация Toolbar
with (toolbar) {
    // Логотип и заголовок
    setLogo(R.drawable.ic_logo)
    setTitle("Моё приложение")
    setSubtitle("Версия 2.0")

    // Навигационная иконка с обработчиком
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Кастомная вьюха — Switch для темы
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // Кастомный PopupMenu
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

Часто задаваемые вопросы

В чём разница между Toolbar и ActionBar?

ActionBar — системная панель Android 3.0–4.4 с ограниченной кастомизацией. Toolbar — гибкий компонент Material Design, который можно размещать в любом месте layout, анимировать и наполнять кастомными вьюхами. Toolbar полностью заменяет ActionBar через setSupportActionBar.

Как скрыть Toolbar при скролле?

Используйте CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Настройте scroll флаг для Toolbar в layout_scrollBehavior. При скролле вниз Toolbar скрывается, при скролле вверх — появляется с анимацией. В Material 3 Medium/Large Top App Bar сворачивается до Small.

Сколько action items можно разместить в Toolbar?

Ограничение — физическая ширина экрана. Рекомендуется 2–4 action items (иконки). Остальные перемещаются в overflow меню (три точки). Настройка через app:showAsAction: always (всегда показывать), ifRoom (если есть место), never (в overflow).

Как добавить SearchView в Toolbar?

SearchView добавляется как action view в Menu. В XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView автоматически сворачивается в иконку поиска и расширяется по нажатию. Поддерживает голосовой поиск и автодополнение через SearchRecentSuggestionsProvider.

Что такое CollapsingToolbarLayout?

CollapsingToolbarLayout — контейнер для Toolbar, который анимированно сворачивается при скролле контента. Используется с CoordinatorLayout и AppBarLayout. Поддерживает режимы: pin (фиксирован), parallax (параллакс-эффект). Идеален для экранов с изображением в шапке (профиль, детальная страница).

Итоги

  • Toolbar — гибкая панель инструментов Android, заменившая ActionBar и полностью интегрированная с Material Design
  • Material 3 Top App Bar — четыре варианта: Small, Center-aligned, Medium, Large с разным поведением при скролле
  • ActionBar — устаревшая системная панель, ограниченная в кастомизации и анимации
  • Menu и action items — интеграция через XML-меню с флагами always/ifRoom/never для управления видимостью
  • CollapsingToolbarLayout — анимированное сворачивание Toolbar при скролле для экранов с изображением в шапке
  • Кастомизация — логотип, subtitle, кастомные View, SearchView, PopupMenu и цвета Material 3
  • SearchView — встроенное action view для поиска с голосовым вводом и автодополнением

Мы разработаем мобильное приложение под ключ

IT Sectr создаёт приложения для iOS и Android для стартапов и бизнеса с 2017 года. Мы проконсультируем вас и предложим наилучшее решение.

Обсудить проект

Читайте также