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 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 — 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ət | ActionBar | Toolbar |
|---|---|---|
| Mövqe | Sabit yuxarı | Layout-da istənilən yer |
| Fərdiləşdirmə | Məhdud (rəng, fon) | Tam (görünüşlər, stillər, animasiyalar) |
| Collapsing | Dəstəklənmir | CollapsingToolbarLayout |
| Animasiya | Yalnız sistem | İstənilən (ObjectAnimator, Transition) |
| Material 3 | Dəstəklənmir | Small / Medium / Large App Bar |
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.
<!-- 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>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
}
}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.
<!-- 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>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 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.
<!-- 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 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.
// 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
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.
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.
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).
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 — 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ə
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.
Həm də oxuyun