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 з чотирма варіаціями: Small, Center-aligned, 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
КастомізаціяОбмежена (колір, фон)Повна (в'ю, стилі, анімації)
ЗгортанняНе підтримується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 року. Ми проконсультуємо вас і запропонуємо найкраще рішення.

Обговорити проект

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