Toolbar: mohiyati, Android ilovalarida asboblar paneli

Muallif: IT Sectr Nashr etilgan: 2026-02-23 O'qish vaqti: 12 daq

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 dan ActionBar ning vorisi bo'lgan moslashtiriladigan Android asboblar paneli
  • ActionBar — Android 5.0 dan oldin mavjud bo'lgan tizim paneli, Toolbar bilan almashtirilgan
  • Material 3 — uchta variatsiyali Top App Bar: Center, Small, Medium, Large
  • Menu — onCreateOptionsMenu orqali Toolbar-ga integratsiya qilinadigan XML menyu
  • Moslashtirish — sarlavha, logo, navigatsiya ikonkasi, moslashtirilgan ko'rinishlar va animatsiyalar

Toolbar nima?

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: tarix va evolyutsiya

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.

XususiyatActionBarToolbar
JoylashuvYuqori qismida qat'iyLayout-da istalgan joyda
MoslashtirishCheklangan (rang, fon)To'liq (ko'rinishlar, stillar, animatsiyalar)
CollapsingQo'llab-quvvatlanmaydiCollapsingToolbarLayout
AnimatsiyaFaqat tizimIstalgan (ObjectAnimator, Transition)
Material 3Qo'llab-quvvatlanmaydiSmall / Medium / Large App Bar

Android-da Toolbar sozlash

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.

xml
<!-- 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>
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)

        // 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
    }
}

Menu-ni Toolbar-ga integratsiya qilish

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.

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="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>
kotlin
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: Center va Large Top App Bar

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.

xml
<!-- 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-ni ilg'or moslashtirish

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.

kotlin
// 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

Toolbar va ActionBar o'rtasidagi farq nima?

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.

Aylantirishda Toolbar ni qanday yashirish mumkin?

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.

Toolbar da nechta action items joylashtirish mumkin?

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).

Toolbar ga SearchView ni qanday qo'shish mumkin?

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 nima?

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

  • Toolbar — ActionBar o'rnini egallagan va Material Design bilan to'liq integratsiyalangan moslashuvchan Android asboblar paneli
  • Material 3 Top App Bar — to'rt variant: Small, Center-aligned, Medium, Large, aylantirishda turli xatti-harakat bilan
  • ActionBar — moslashtirish va animatsiyada cheklangan eskirgan tizim paneli
  • Menu va action items — ko'rinishni boshqarish uchun always/ifRoom/never bayroqlari bilan XML menyu orqali integratsiya
  • CollapsingToolbarLayout — sarlavhada rasm bo'lgan ekranlar uchun aylantirishda Toolbar ning animatsiyali yig'ilishi
  • Moslashtirish — logo, subtitle, moslashtirilgan View, SearchView, PopupMenu va Material 3 ranglari
  • SearchView — ovozli kiritish va avtomatik to'ldirish bilan qidiruv uchun o'rnatilgan action view

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.

Loyihani muhokama qilish

Shuningdek o'qing