Toolbar: ماهیت، نوار ابزار در برنامه‌های اندروید

نویسنده: IT Sectr منتشر شده: 2026-02-23 زمان مطالعه: 12 دقیقه

Toolbar (نوار ابزار) — کامپوننت اندروید که جایگزین ActionBar شده و عنوان صفحه، عناصر ناوبری و اقدامات را نمایش می‌دهد. Toolbar بخشی از Material Design Library است و کاملاً قابل شخصی‌سازی است: از عنوان استاندارد تا نمای سفارشی و آیکون‌های متحرک. اطلاعات بیشتر درباره کامپوننت را در مشخصات Material Design 3 بخوانید.

نکات اصلی

  • Toolbar — نوار ابزار قابل شخصی‌سازی اندروید، جانشین ActionBar از Material Design
  • ActionBar — نوار سیستمی که قبل از اندروید 5.0 وجود داشت و با Toolbar جایگزین شد
  • Material 3 — Top App Bar با سه نوع: Center، Small، Medium، Large
  • Menu — منوی XML با action items که از طریق onCreateOptionsMenu در Toolbar ادغام می‌شود
  • شخصی‌سازی — عنوان، لوگو، آیکون ناوبری، نمای سفارشی و انیمیشن‌ها

Toolbar چیست؟

Toolbar — کامپوننت اندروید از کتابخانه 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 — نوار سیستم اندروید که در اندروید 3.0 (API 11) به عنوان جایگزین Title Bar قدیمی ظاهر شد. ActionBar به Activity متصل بود، موقعیت ثابتی در بالای صفحه داشت و امکانات شخصی‌سازی محدودی داشت. با انتشار اندروید 5.0 (Lollipop، 2014) و کتابخانه AppCompat، Google Toolbar را به عنوان جایگزین انعطاف‌پذیر معرفی کرد.

معایب اصلی ActionBar که Toolbar حل کرد: موقعیت ثابت (فقط در بالا)، عدم امکان انیمیشن، مشکل با نمای سفارشی، مشکلات با CoordinatorLayout و CollapsingToolbarLayout. Google در سال 2015 رسماً ActionBar را منسوخ (deprecated) اعلام کرد و Toolbar را برای همه پروژه‌های جدید توصیه می‌کند. از اندروید 12 (2021) به بعد، ActionBar به طور پیش‌فرض در تم‌های جدید Material 3 غیرفعال است.

ویژگیActionBarToolbar
موقعیتبالای ثابتهر جایی در layout
شخصی‌سازیمحدود (رنگ، پس‌زمینه)کامل (نماها، استایل‌ها، انیمیشن‌ها)
Collapsingپشتیبانی نمی‌شودCollapsingToolbarLayout
انیمیشنفقط سیستمیهر نوع (ObjectAnimator، Transition)
Material 3پشتیبانی نمی‌شودSmall / Medium / Large App Bar

تنظیم Toolbar در اندروید

برای استفاده از 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 با سیستم Menu اندروید از طریق callbackهای 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 که عنوان در مرکز panel قرار می‌گیرد. این سبک اغلب در برنامه‌های Google (Play Market، YouTube) استفاده می‌شود و برای صفحات با حداقل تعداد action items توصیه می‌شود. Small Top App Bar — Toolbar کلاسیک، سازگار با نسخه‌های قدیمی اندروید. 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 — نوار سیستم اندروید 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 item می‌توان در 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 — نوار ابزار انعطاف‌پذیر اندروید که جایگزین ActionBar شده و کاملاً با Material Design ادغام شده است
  • Material 3 Top App Bar — چهار نوع: Small، Center-aligned، Medium، Large با رفتار متفاوت هنگام اسکرول
  • ActionBar — نوار سیستم منسوخ، محدود در شخصی‌سازی و انیمیشن
  • Menu و action items — ادغام از طریق منوی XML با پرچم‌های always/ifRoom/never برای مدیریت visibility
  • CollapsingToolbarLayout — جمع‌شدن متحرک Toolbar هنگام اسکرول برای صفحات با تصویر در هدر
  • شخصی‌سازی — لوگو، subtitle، View سفارشی، SearchView، PopupMenu و رنگ‌های Material 3
  • SearchView — action view داخلی برای جستجو با ورودی صوتی و تکمیل خودکار

ما یک اپلیکیشن موبایل به صورت کلید در دست توسعه خواهیم داد

IT Sectr از سال 2017 برنامه‌های iOS و Android را برای استارتاپ‌ها و کسب‌وکارها ایجاد می‌کند. ما به شما مشاوره می‌دهیم و بهترین راه‌حل را پیشنهاد خواهیم کرد.

بحث درباره پروژه

همچنین بخوانید