Toolbar (نوار ابزار) — کامپوننت اندروید که جایگزین ActionBar شده و عنوان صفحه، عناصر ناوبری و اقدامات را نمایش میدهد. Toolbar بخشی از Material Design Library است و کاملاً قابل شخصیسازی است: از عنوان استاندارد تا نمای سفارشی و آیکونهای متحرک. اطلاعات بیشتر درباره کامپوننت را در مشخصات Material Design 3 بخوانید.
نکات اصلی
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 — نوار سیستم اندروید که در اندروید 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 غیرفعال است.
| ویژگی | 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 با سیستم Menu اندروید از طریق callbackهای 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 که عنوان در مرکز panel قرار میگیرد. این سبک اغلب در برنامههای Google (Play Market، YouTube) استفاده میشود و برای صفحات با حداقل تعداد action items توصیه میشود. Small Top App Bar — Toolbar کلاسیک، سازگار با نسخههای قدیمی اندروید. 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 — نوار سیستم اندروید 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 از سال 2017 برنامههای iOS و Android را برای استارتاپها و کسبوکارها ایجاد میکند. ما به شما مشاوره میدهیم و بهترین راهحل را پیشنهاد خواهیم کرد.
همچنین بخوانید