Toolbar (asboblar paneli) — ActionBar o'rnini egallagan Android komponenti, ekran sarlavhasini, navigatsiya elementlari va harakatlarni ko'rsatadi. Toolbar Material Design Library tarkibiga kiradi va to'liq moslashtiriladi: standart sarlavhadan tortib moslashtirilgan ko'rinishlar va animatsiyali ikonkalargacha. Komponent haqida batafsil Material Design 3 spetsifikatsiyasida o'qing.
Asosiy fikrlar
Toolbar — Material Design kutubxonasidan (androidx.appcompat.widget.Toolbar) Android komponenti, ilova ekrani uchun moslashuvchan asboblar panelini taqdim etadi. Toolbar eskirgan ActionBar o'rnini egallab, dasturchilarga tashqi ko'rinish va xatti-harakat ustidan to'liq nazorat beradi. U layout-ning istalgan joyiga joylashtirilishi, moslashtirilgan ko'rinishlarga ega bo'lishi, animatsiya qilinishi va turli ekran o'lchamlariga moslashishi mumkin.
Material Design 3 (2026) Top App Bar — Toolbar evolyutsiyasini — to'rt variant bilan belgilaydi: Small (ixcham, 48 dp), Center-aligned (markazlashtirilgan sarlavha), Medium (kattalashtirilgan sarlavha, 112 dp) va Large (katta sarlavha, 168 dp). Har bir variant aylantirishda o'z xatti-harakatiga ega: Small barqaror qoladi, Medium va Large tarkib yuqoriga aylantirilganda Small gacha yig'iladi.
Toolbar uchta asosiy zonani ko'rsatadi: navigatsiya ikonkasi (chapda, odatda «gamburger» yoki «Orqaga» strelkasi), ekran sarlavhasi (markazda yoki chapda) va action items (o'ngda — harakat ikonkalari, overflow menyusi). Toolbar logo, subtitle, moslashtirilgan View (search view, switch) va CoordinatorLayout bilan birga animatsiyali CollapsingToolbarLayout ni o'z ichiga olishi mumkin.
ActionBar — Android 3.0 (API 11) da eskirgan Title Bar o'rnini egallash uchun paydo bo'lgan Android tizim paneli. ActionBar Activity ga qattiq bog'langan edi, ekranning yuqori qismida qat'iy pozitsiyaga ega edi va cheklangan moslashtirish imkoniyatlariga ega edi. Android 5.0 (Lollipop, 2014) va AppCompat kutubxonasining chiqarilishi bilan Google Toolbar ni moslashuvchan o'rinbosar sifatida taqdim etdi.
ActionBar ning Toolbar tomonidan hal qilingan asosiy kamchiliklari: qat'iy pozitsiya (faqat tepada), animatsiyaning mumkin emasligi, moslashtirilgan ko'rinishlar bilan qiyinchiliklar, CoordinatorLayout va CollapsingToolbarLayout bilan muammolar. Google 2015 yilda ActionBar ni rasman eskirgan (deprecated) deb e'lon qildi va barcha yangi loyihalar uchun Toolbar ni tavsiya qiladi. Android 12 (2021) dan boshlab, ActionBar yangi Material 3 mavzularida sukut bo'yicha o'chirilgan.
| Xususiyat | ActionBar | Toolbar |
|---|---|---|
| Joylashuv | Yuqori qismida qat'iy | Layout-da istalgan joyda |
| Moslashtirish | Cheklangan (rang, fon) | To'liq (ko'rinishlar, stillar, animatsiyalar) |
| Collapsing | Qo'llab-quvvatlanmaydi | CollapsingToolbarLayout |
| Animatsiya | Faqat tizim | Istalgan (ObjectAnimator, Transition) |
| Material 3 | Qo'llab-quvvatlanmaydi | Small / Medium / Large App Bar |
Toolbar dan foydalanish uchun: (1) ActionBar siz mavzu o'rnating (Theme.Material3.NoActionBar yoki Theme.AppCompat.NoActionBar), (2) XML layout-ga Toolbar qo'shing, (3) uni setSupportActionBar orqali ActionBar sifatida o'rnating. Shundan so'ng Toolbar ActionBar ning barcha funksiyalarini oladi: Menu qayta ishlash, navigatsiya ikonkasi, AndroidManifest dan sarlavha.
<!-- activity_main.xml Toolbar bilan -->
<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)
// Navigatsiya ikonkasini sozlash
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
// Moslashtirilgan sarlavha
supportActionBar?.title = "Bosh sahifa"
supportActionBar?.subtitle = "Salom, foydalanuvchi!"
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.toolbar_menu, menu)
return true
}
}Toolbar Android Menu tizimi bilan onCreateOptionsMenu va onOptionsItemSelected callback'lari orqali integratsiyalanadi. Menu action items — Toolbar-da o'ngda ko'rsatiladigan harakat ikonkalarini belgilaydi. Agar action items sig'masa, ular avtomatik ravishda overflow menyusiga (uch nuqta) ko'chiriladi. Dasturchi buni app:showAsAction atributi orqali boshqaradi: 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="Qidirish"
app:showAsAction="ifRoom"
app:actionViewClass="androidx.appcompat.widget.SearchView" />
<item
android:id="@+id/action_notifications"
android:icon="@drawable/ic_notifications"
android:title="Bildirishnomalar"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:title="Sozlamalar"
app:showAsAction="never" />
</menu>override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
R.id.action_search -> {
Toast.makeText(this, "Qidirish", 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 ning to'rt variantini taqdim etadi: Small (ixcham, 48 dp), Center-aligned (markazlashtirilgan sarlavha), Medium (kattalashtirilgan sarlavha bilan 112 dp) va Large (katta sarlavha bilan 168 dp). Medium va Large App Bar yig'iladigan xatti-harakatni qo'llab-quvvatlaydi — tarkib yuqoriga aylantirilganda ular silliq Small gacha yig'iladi. Animatsiya CoordinatorLayout va AppBarLayout orqali boshqariladi.
Center-aligned Top App Bar — Material 3 ning yangi varianti, bunda sarlavha panelning markazida joylashgan. Bu uslub tez-tez Google ilovalarida (Play Market, YouTube) ishlatiladi va minimal action items soniga ega ekranlar uchun tavsiya etiladi. Small Top App Bar — klassik Toolbar, eski Android versiyalari bilan mos keladi. Medium va Large sarlavha asosiy element bo'lgan ekranlar (profil, bosh sahifa) uchun mos keladi.
<!-- Material 3 Large Top App Bar CollapsingToolbarLayout bilan -->
<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 tarkibi..." />
</NestedScrollView>
</CoordinatorLayout>Toolbar to'liq moslashtirishni qo'llab-quvvatlaydi: balandlikni o'zgartirish, ko'rinish/yashirinish animatsiyasi, moslashtirilgan View lar, logo, navigatsiya ikonkasi, PopupMenu va CoordinatorLayout bilan integratsiya. Aylantirishda yashirinish animatsiyasi uchun scroll, enterAlways, snap bayroqlari bilan AppBarLayout ishlatiladi. Toolbar ostidagi rasm uchun parallaks effekti — parallax rejimi bilan CollapsingToolbarLayout.
Logo va subtitle setLogo va setSubtitle metodlari orqali o'rnatiladi. Navigatsiya ikonkasi setNavigationIcon va setNavigationOnClickListener orqali sozlanadi. Moslashtirilgan View'lar addView orqali to'g'ridan-to'g'ri Toolbar ga qo'shiladi. SearchView uchun actionViewClass bilan MenuItem ishlatiladi. Qorong'u mavzu uchun ranglar Material 3 atributlaridan avtomatik ravishda qo'llaniladi.
// Toolbar ni ilg'or moslashtirish
with (toolbar) {
// Logo va sarlavha
setLogo(R.drawable.ic_logo)
setTitle("Mening ilovam")
setSubtitle("Versiya 2.0")
// Navigatsiya ikonkasi ishlov beruvchi bilan
setNavigationIcon(R.drawable.ic_drawer)
setNavigationOnClickListener {
drawerLayout.open()
}
// Moslashtirilgan ko'rinish — Mavzu uchun Switch
val themeSwitch = Switch(this@MainActivity).apply {\n thumbDrawable = ContextCompat.getDrawable(
this@MainActivity, R.drawable.ic_theme
)
}
addView(themeSwitch)
// Moslashtirilgan PopupMenu
setOnMenuItemClickListener { item ->
Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
true
}
}Tez-tez beriladigan savollar
ActionBar — cheklangan moslashtirish bilan Android 3.0–4.4 tizim paneli. Toolbar — layout-ning istalgan joyiga joylashtirilishi, animatsiya qilinishi va moslashtirilgan ko'rinishlar bilan to'ldirilishi mumkin bo'lgan moslashuvchan Material Design komponenti. Toolbar setSupportActionBar orqali ActionBar ni to'liq almashtiradi.
CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout dan foydalaning. layout_scrollBehavior da Toolbar uchun scroll bayrog'ini o'rnating. Pastga aylantirganda Toolbar yashirinadi, yuqoriga aylantirganda animatsiya bilan paydo bo'ladi. Material 3 da Medium/Large Top App Bar Small gacha yig'iladi.
Cheklov — ekranning jismoniy kengligi. 2–4 action items (ikonkalar) tavsiya etiladi. Qolganlari overflow menyusiga (uch nuqta) ko'chiriladi. app:showAsAction orqali sozlash: always (har doim ko'rsat), ifRoom (joy bo'lsa), never (overflow da).
SearchView Menu da action view sifatida qo'shiladi. XML menu da: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView avtomatik ravishda qidiruv ikonkasiga yig'iladi va bosilganda kengayadi. Ovozli qidiruv va SearchRecentSuggestionsProvider orqali avtomatik to'ldirishni qo'llab-quvvatlaydi.
CollapsingToolbarLayout — tarkib aylantirilganda animatsiya bilan yig'iladigan Toolbar konteyneri. CoordinatorLayout va AppBarLayout bilan ishlatiladi. Rejimlarni qo'llab-quvvatlaydi: pin (barqaror), parallax (parallaks effekti). Sarlavhada rasm bo'lgan ekranlar (profil, batafsil sahifa) uchun ideal.
Xulosa
Biz kalit topshirig'i bilan mobil ilovani ishlab chiqamiz
IT Sectr 2017-yildan beri startaplar va korxonalar uchun iOS va Android ilovalarini yaratadi. Biz sizga maslahat beramiz va eng yaxshi yechimni taklif qilamiz.