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 са режимом 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. године. Саветоваћемо вас и предложити најбоље решење.

Разговарајте о пројекту

Прочитајте такође