Toolbar (лента с инструменти) — Android компонент, заменил ActionBar, който показва заглавие на екрана, навигационни елементи и действия. Toolbar е част от Material Design Library и е напълно персонализируем: от стандартно заглавие до персонализирани изгледи и анимирани икони. Прочетете повече за компонента в спецификацията на Material Design 3.
Основни точки
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 — системна лента на 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.
| Характеристика | ActionBar | Toolbar |
|---|---|---|
| Позиция | Фиксиран връх | Всяко място в layout |
| Персонализация | Ограничена (цвят, фон) | Пълна (изгледи, стилове, анимации) |
| Collapsing | Не се поддържа | CollapsingToolbarLayout |
| Анимация | Само системна | Всякаква (ObjectAnimator, Transition) |
| Material 3 | Не се поддържа | Small / Medium / Large App Bar |
За използване на Toolbar е необходимо: (1) да зададете тема без ActionBar (Theme.Material3.NoActionBar или Theme.AppCompat.NoActionBar), (2) да добавите Toolbar в XML layout, (3) да го зададете като ActionBar чрез setSupportActionBar. След това Toolbar получава всички функции на ActionBar: обработка на Menu, навигационна икона, заглавие от AndroidManifest.
<!-- 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>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
}
}Toolbar се интегрира с Android Menu системата чрез колбеките onCreateOptionsMenu и onOptionsItemSelected. Menu дефинира action items — икони за действия, показани вдясно в Toolbar. Ако action items не се поберат, те автоматично се преместват в overflow менюто (три точки). Разработчикът управлява това чрез атрибута app:showAsAction: always, ifRoom, never.
<!-- 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>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 въвежда четири варианта на 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 са подходящи за екрани, където заглавието е ключов елемент (профил, начална страница).
<!-- 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 поддържа пълна персонализация: промяна на височина, анимация на показване/скриване, персонализирани дъщерни View, лого, навигационна икона, PopupMenu и интеграция с CoordinatorLayout. За анимация на скриване при превъртане се използва AppBarLayout с флагове scroll, enterAlways, snap. За паралакс ефект на изображението под Toolbar — CollapsingToolbarLayout с режим parallax.
Лого и subtitle се задават чрез методите setLogo и setSubtitle. Навигационната икона се конфигурира чрез setNavigationIcon и setNavigationOnClickListener. Персонализираните View се добавят чрез addView директно в Toolbar. За SearchView се използва MenuItem с actionViewClass. За тъмна тема цветовете се прилагат автоматично от атрибутите на Material 3.
// Разширена персонализация на 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
}
}Често задавани въпроси
ActionBar — системна лента на Android 3.0–4.4 с ограничена персонализация. Toolbar — гъвкав компонент на Material Design, който може да се поставя навсякъде в layout, да се анимира и да се пълни с персонализирани изгледи. Toolbar напълно замества ActionBar чрез setSupportActionBar.
Използвайте CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Настройте флага scroll за Toolbar в layout_scrollBehavior. При превъртане надолу Toolbar се скрива, при превъртане нагоре се появява с анимация. В Material 3 Medium/Large Top App Bar се свива до Small.
Ограничението е физическата ширина на екрана. Препоръчват се 2–4 action items (икони). Останалите се преместват в overflow менюто (три точки). Конфигурация чрез app:showAsAction: always (винаги показвай), ifRoom (ако има място), never (в overflow).
SearchView се добавя като action view в Menu. В XML menu: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView автоматично се свива до икона за търсене и се разширява при клик. Поддържа гласово търсене и автоматично довършване чрез SearchRecentSuggestionsProvider.
CollapsingToolbarLayout — контейнер за Toolbar, който се свива анимирано при превъртане на съдържанието. Използва се с CoordinatorLayout и AppBarLayout. Поддържа режими: pin (фиксиран), parallax (паралакс ефект). Идеален за екрани с изображение в заглавката (профил, страница с детайли).
Обобщение
Ще разработим мобилно приложение под ключ
IT Sectr създава iOS и Android приложения за стартъпи и бизнеси от 2017 г. Ще ви консултираме и ще предложим най-доброто решение.
Прочетете също