Toolbar: mahiyyəti, Android tətbiqlərində alətlər paneli

Müəllif: IT Sectr Dərc olunub: 2026-02-23 Oxuma vaxtı: 12 dəq

Toolbar (alətlər paneli) — ActionBar-ı əvəz etmiş Android komponenti, ekran başlığını, naviqasiya elementlərini və hərəkətləri göstərir. Toolbar Material Design Library-ə daxildir və tam fərdiləşdirilə bilər: standart başlıqdan fərdi görünüşlərə və animasiyalı ikonlara qədər. Komponent haqqında daha ətraflı Material Design 3 spesifikasiyasında oxuyun.

Əsas məqamlar

  • Toolbar — Material Design-dən ActionBar-ın varisi olan fərdiləşdirilə bilən Android alətlər paneli
  • ActionBar — Android 5.0-dan əvvəl mövcud olan sistem paneli, Toolbar ilə əvəz edilmişdir
  • Material 3 — üç variasiyalı Top App Bar: Center, Small, Medium, Large
  • Menu — onCreateOptionsMenu vasitəsilə Toolbar-a inteqrasiya edilən XML menyu
  • Fərdiləşdirmə — başlıq, loqo, naviqasiya ikonası, fərdi görünüşlər və animasiyalar

Toolbar nədir?

Toolbar — Material Design kitabxanasından (androidx.appcompat.widget.Toolbar) Android komponenti, tətbiq ekranı üçün çevik alətlər paneli təmin edir. Toolbar köhnəlmiş ActionBar-ı əvəz edərək, tərtibatçılara görünüş və davranış üzərində tam nəzarət verir. O, layout-un istənilən yerində yerləşdirilə bilər, fərdi alt görünüşlərə malik ola, animasiya edilə və müxtəlif ekran ölçülərinə uyğunlaşa bilər.

Material Design 3 (2026) Top App Bar-ı — Toolbar-ın təkamülünü — dörd variantla müəyyən edir: Small (kompakt, 48 dp), Center-aligned (mərkəzləşdirilmiş başlıq), Medium (böyüdülmüş başlıq, 112 dp) və Large (böyük başlıq, 168 dp). Hər variantın sürüşdürmə zamanı öz davranışı var: Small sabit qalır, Medium və Large məzmun yuxarı sürüşdürüldükdə Small-ə qədər yığılır.

Toolbar üç əsas zonanı göstərir: naviqasiya ikonası (solda, adətən «hamburger» və ya «Geri» oxu), ekran başlığı (mərkəzdə və ya solda) və action items (sağda — hərəkət ikonları, overflow menyusu). Toolbar loqo, subtitle, fərdi View (search view, switch) və CoordinatorLayout ilə birlikdə animasiyalı CollapsingToolbarLayout ehtiva edə bilər.

ActionBar: tarix və təkamül

ActionBar — Android 3.0-da (API 11) köhnəlmiş Title Bar-ı əvəz etmək üçün ortaya çıxmış Android sistem paneli. ActionBar Activity-yə sərt bağlı idi, ekranın yuxarısında sabit mövqeyə malik idi və məhdud fərdiləşdirmə imkanlarına sahib idi. Android 5.0 (Lollipop, 2014) və AppCompat kitabxanasının buraxılması ilə Google Toolbar-ı çevik əvəzedici kimi təqdim etdi.

ActionBar-ın Toolbar tərəfindən həll edilmiş əsas çatışmazlıqları: sabit mövqe (yalnız yuxarıda), animasiya qeyri-mümkünlüyü, fərdi görünüşlərlə çətinlik, CoordinatorLayout və CollapsingToolbarLayout ilə problemlər. Google 2015-ci ildə ActionBar-ı rəsmi olaraq köhnəlmiş (deprecated) elan etdi və bütün yeni layihələr üçün Toolbar-ı tövsiyə edir. Android 12-dən (2021) başlayaraq, ActionBar yeni Material 3 mövzularında defolt olaraq söndürülüb.

XüsusiyyətActionBarToolbar
MövqeSabit yuxarıLayout-da istənilən yer
FərdiləşdirməMəhdud (rəng, fon)Tam (görünüşlər, stillər, animasiyalar)
CollapsingDəstəklənmirCollapsingToolbarLayout
AnimasiyaYalnız sistemİstənilən (ObjectAnimator, Transition)
Material 3DəstəklənmirSmall / Medium / Large App Bar

Android-də Toolbar-ın qurulması

Toolbar istifadəsi üçün: (1) ActionBar-sız mövzu qurun (Theme.Material3.NoActionBar və ya Theme.AppCompat.NoActionBar), (2) XML layout-da Toolbar əlavə edin, (3) setSupportActionBar vasitəsilə onu ActionBar kimi təyin edin. Bundan sonra Toolbar ActionBar-ın bütün funksiyalarını alır: Menu işlənməsi, naviqasiya ikonası, AndroidManifest-dən başlıq.

xml
<!-- activity_main.xml Toolbar ilə -->
<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)

        // Naviqasiya ikonasının qurulması
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Fərdi başlıq
        supportActionBar?.title = "Ana səhifə"
        supportActionBar?.subtitle = "Salam, istifadəçi!"
    }

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

Menu-nun Toolbar-a inteqrasiyası

Toolbar Android Menu sistemi ilə onCreateOptionsMenu və onOptionsItemSelected callbackləri vasitəsilə inteqrasiya olunur. Menu action items — Toolbar-da sağda göstərilən hərəkət ikonlarını təyin edir. Action items yerləşmirsə, onlar avtomatik olaraq overflow menyusuna (üç nöqtə) köçürülür. Tərtibatçı bunu app:showAsAction atributu ilə idarə edir: 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="Axtar"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Bildirişlər"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Parametrlər"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "Axtar", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center və Large Top App Bar

Material 3 Top App Bar-ın dörd variantını təqdim edir: Small (kompakt, 48 dp), Center-aligned (mərkəzləşdirilmiş başlıq), Medium (böyüdülmüş başlıqla 112 dp) və Large (böyük başlıqla 168 dp). Medium və Large App Bar collapsible davranışını dəstəkləyir — məzmun yuxarı sürüşdürüldükdə onlar hamar şəkildə Small-ə qədər yığılır. Animasiya CoordinatorLayout və AppBarLayout vasitəsilə idarə olunur.

Center-aligned Top App Bar — Material 3-ün yeni variantı, burada başlıq panelin mərkəzində yerləşir. Bu üslub tez-tez Google tətbiqlərində (Play Market, YouTube) istifadə olunur və minimum sayda action items olan ekranlar üçün tövsiyə edilir. Small Top App Bar — klassik Toolbar, köhnə Android versiyaları ilə uyğunluq təmin edir. Medium və Large başlığın əsas element olduğu ekranlar (profil, ana səhifə) üçün uyğundur.

xml
<!-- Material 3 Large Top App Bar CollapsingToolbarLayout ilə -->
<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="Ekran məzmunu..." />
    </NestedScrollView>
</CoordinatorLayout>

Toolbar-ın qabaqcıl fərdiləşdirilməsi

Toolbar tam fərdiləşdirməni dəstəkləyir: hündürlüyün dəyişdirilməsi, görünmə/gizlənmə animasiyası, fərdi alt View-lər, loqo, naviqasiya ikonası, PopupMenu və CoordinatorLayout ilə inteqrasiya. Sürüşdürmə zamanı gizlənmə animasiyası üçün scroll, enterAlways, snap bayraqları ilə AppBarLayout istifadə olunur. Toolbar altında şəkil üçün parallaks effekti — parallax rejimi ilə CollapsingToolbarLayout.

Loqo və subtitle setLogo və setSubtitle metodları vasitəsilə təyin edilir. Naviqasiya ikonası setNavigationIcon və setNavigationOnClickListener vasitəsilə konfiqurasiya olunur. Fərdi View-lər addView vasitəsilə birbaşa Toolbar-a əlavə edilir. SearchView üçün actionViewClass ilə MenuItem istifadə olunur. Qaranlıq mövzu üçün Material 3 atributlarından rənglər avtomatik tətbiq edilir.

kotlin
// Toolbar-ın qabaqcıl fərdiləşdirilməsi
with (toolbar) {
    // Loqo və başlıq
    setLogo(R.drawable.ic_logo)
    setTitle("Mənim tətbiqim")
    setSubtitle("Versiya 2.0")

    // Naviqasiya ikonası işləyici ilə
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Fərdi görünüş — Mövzu üçün Switch
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // Fərdi PopupMenu
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

Tez-tez verilən suallar

Toolbar və ActionBar arasında fərq nədir?

ActionBar — məhdud fərdiləşdirmə ilə Android 3.0–4.4 sistem paneli. Toolbar — layout-un istənilən yerində yerləşdirilə bilən, animasiya edilə bilən və fərdi görünüşlərlə doldurula bilən çevik Material Design komponenti. Toolbar setSupportActionBar vasitəsilə ActionBar-ı tamamilə əvəz edir.

Sürüşdürmə zamanı Toolbar-ı necə gizlətmək olar?

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout istifadə edin. layout_scrollBehavior-da Toolbar üçün scroll bayrağını qurun. Aşağı sürüşdürdükdə Toolbar gizlənir, yuxarı sürüşdürdükdə animasiya ilə görünür. Material 3-də Medium/Large Top App Bar Small-ə qədər yığılır.

Toolbar-da neçə action items yerləşdirmək olar?

Məhdudiyyət ekranın fiziki enidir. 2–4 action items (ikon) tövsiyə olunur. Qalanları overflow menyusuna (üç nöqtə) köçürülür. app:showAsAction vasitəsilə konfiqurasiya: always (həmişə göstər), ifRoom (yer varsa), never (overflow-da).

Toolbar-a SearchView-i necə əlavə etmək olar?

SearchView Menu-da action view kimi əlavə edilir. XML menu-da: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView avtomatik olaraq axtarış ikonasına yığılır və kliklədikdə genişlənir. Səsli axtarış və SearchRecentSuggestionsProvider vasitəsilə avtomatik tamamlamanı dəstəkləyir.

CollapsingToolbarLayout nədir?

CollapsingToolbarLayout — məzmun sürüşdürüldükdə animasiya ilə yığılan Toolbar konteyneri. CoordinatorLayout və AppBarLayout ilə istifadə olunur. Rejimləri dəstəkləyir: pin (sabit), parallax (parallaks effekti). Başlıqda şəkil olan ekranlar (profil, detal səhifəsi) üçün idealdır.

Nəticə

  • Toolbar — ActionBar-ı əvəz etmiş və Material Design ilə tam inteqrasiya olunmuş çevik Android alətlər paneli
  • Material 3 Top App Bar — dörd variant: Small, Center-aligned, Medium, Large, sürüşdürmə zamanı müxtəlif davranışla
  • ActionBar — fərdiləşdirmə və animasiyada məhdud olan köhnəlmiş sistem paneli
  • Menu və action items — görünürlüyü idarə etmək üçün always/ifRoom/never bayraqları ilə XML menyu vasitəsilə inteqrasiya
  • CollapsingToolbarLayout — başlıqda şəkil olan ekranlar üçün sürüşdürmə zamanı Toolbar-ın animasiyalı yığılması
  • Fərdiləşdirmə — loqo, subtitle, fərdi View, SearchView, PopupMenu və Material 3 rəngləri
  • SearchView — səsli giriş və avtomatik tamamlama ilə axtarış üçün daxili action view

Açar təslim mobil tətbiq hazırlayacağıq

IT Sectr 2017-ci ildən startaplar və bizneslər üçün iOS və Android tətbiqləri yaradır. Sizə məsləhət verəcəyik və ən yaxşı həlli təklif edəcəyik.

Layihəni müzakirə et

Həm də oxuyun