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 поддържат свиваемо поведение — при превъртане на съдържанието нагоре те плавно се свиват до 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 с режим 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 г. Ще ви консултираме и ще предложим най-доброто решение.

Обсъдете проекта

Прочетете също