Toolbar: Android ऐप्लिकेशन में टूलबार

लेखक: IT Sectr प्रकाशित: 2026-02-23 पढ़ने का समय: 12 मिनट

Toolbar (टूलबार) — Android का एक घटक है जिसने ActionBar को बदल दिया, यह स्क्रीन का शीर्षक, नेविगेशन एलिमेंट और क्रियाएँ प्रदर्शित करता है। Toolbar Material Design Library का हिस्सा है और पूरी तरह से अनुकूलन योग्य है: मानक शीर्षक से लेकर कस्टम व्यू और एनिमेटेड आइकन तक। घटक के बारे में अधिक जानकारी के लिए Material Design 3 विनिर्देश देखें।

मुख्य बिंदु

  • Toolbar — अनुकूलन योग्य Android टूलबार, Material Design से ActionBar का उत्तराधिकारी
  • ActionBar — सिस्टम बार जो Android 5.0 से पहले मौजूद था, Toolbar द्वारा प्रतिस्थापित
  • Material 3 — Top App Bar चार प्रकारों में: Small, Center-aligned, Medium, Large
  • Menu — action items के साथ XML मेनू, onCreateOptionsMenu के माध्यम से Toolbar में एकीकृत
  • अनुकूलन — शीर्षक, लोगो, नेविगेशन आइकन, कस्टम व्यू और एनिमेशन

Toolbar क्या है?

Toolbar Material Design लाइब्रेरी (androidx.appcompat.widget.Toolbar) का एक Android घटक है जो ऐप स्क्रीन के लिए एक लचीला टूलबार प्रदान करता है। 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 में लोगो, उपशीर्षक, कस्टम व्यू (search view, switch) और CoordinatorLayout के साथ CollapsingToolbarLayout हो सकता है।

ActionBar: इतिहास और विकास

ActionBar एक सिस्टम Android बार है जो Android 3.0 (API 11) में पुराने Title Bar के प्रतिस्थापन के रूप में दिखाई दिया। ActionBar Activity से कसकर बंधा हुआ था, स्क्रीन के शीर्ष पर एक निश्चित स्थान था और सीमित अनुकूलन विकल्प थे। Android 5.0 (Lollipop, 2014) और AppCompat लाइब्रेरी के रिलीज़ के साथ, Google ने Toolbar को लचीले विकल्प के रूप में पेश किया।

ActionBar की मुख्य कमियाँ जिन्हें Toolbar ने हल किया: निश्चित स्थान (केवल ऊपर), एनिमेशन की असंभवता, कस्टम व्यू में कठिनाई, CoordinatorLayout और CollapsingToolbarLayout के साथ समस्याएँ। Google ने 2015 में आधिकारिक तौर पर ActionBar को अप्रचलित (deprecated) घोषित किया और सभी नए प्रोजेक्ट्स के लिए Toolbar की सिफारिश करता है। Android 12 (2021) से शुरू होकर, ActionBar नए Material 3 थीम में डिफ़ॉल्ट रूप से अक्षम है।

विशेषताActionBarToolbar
स्थानशीर्ष पर निश्चितLayout में कहीं भी
अनुकूलनसीमित (रंग, पृष्ठभूमि)पूर्ण (व्यू, शैलियाँ, एनिमेशन)
संकुचनसमर्थित नहींCollapsingToolbarLayout
एनिमेशनकेवल सिस्टमकोई भी (ObjectAnimator, Transition)
Material 3समर्थित नहींSmall / Medium / Large App Bar

Android में Toolbar सेटअप करना

Toolbar का उपयोग करने के लिए: (1) ActionBar के बिना थीम सेट करें (Theme.Material3.NoActionBar या Theme.AppCompat.NoActionBar), (2) XML layout में Toolbar जोड़ें, (3) इसे setSupportActionBar के माध्यम से ActionBar के रूप में सेट करें। उसके बाद, Toolbar को ActionBar की सभी सुविधाएँ मिलती हैं: मेनू हैंडलिंग, नेविगेशन आइकन, AndroidManifest से शीर्षक।

xml
<!-- Toolbar के साथ activity_main.xml -->
<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
    }
}

Toolbar में मेनू एकीकृत करना

Toolbar onCreateOptionsMenu और onOptionsItemSelected कॉलबैक के माध्यम से Android मेनू सिस्टम के साथ एकीकृत होता है। मेनू 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 का एक नया प्रकार है जहाँ शीर्षक बार के केंद्र में स्थित होता है। यह शैली अक्सर Google ऐप्स (Play Store, YouTube) में उपयोग की जाती है और कम action items वाली स्क्रीन के लिए अनुशंसित है। Small Top App Bar क्लासिक Toolbar है, जो पुराने Android संस्करणों के साथ संगत है। Medium और Large उन स्क्रीन के लिए उपयुक्त हैं जहाँ शीर्षक एक मुख्य तत्व है (प्रोफ़ाइल, मुख्य पृष्ठ)।

xml
<!-- CollapsingToolbarLayout के साथ Material 3 Large Top App Bar -->
<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 पूर्ण अनुकूलन का समर्थन करता है: ऊँचाई बदलना, दिखने/छिपने के एनिमेशन, कस्टम चाइल्ड व्यू, लोगो, नेविगेशन आइकन, PopupMenu और CoordinatorLayout के साथ एकीकरण। स्क्रॉल करने पर छिपने के एनिमेशन के लिए AppBarLayout का उपयोग scroll, enterAlways, snap फ़्लैग के साथ किया जाता है। Toolbar के नीचे छवि के parallax प्रभाव के लिए — CollapsingToolbarLayout mode parallax के साथ।

लोगो और उपशीर्षक setLogo और setSubtitle विधियों के माध्यम से सेट किए जाते हैं। नेविगेशन आइकन setNavigationIcon और setNavigationOnClickListener के माध्यम से कॉन्फ़िगर किया जाता है। कस्टम व्यू addView के माध्यम से सीधे Toolbar में जोड़े जाते हैं। SearchView के लिए, actionViewClass के साथ MenuItem का उपयोग करें। डार्क थीम के लिए, 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 Android 3.0–4.4 का एक सिस्टम बार है जिसमें सीमित अनुकूलन है। Toolbar Material Design का एक लचीला घटक है जिसे layout में कहीं भी रखा जा सकता है, एनिमेट किया जा सकता है और कस्टम व्यू से भरा जा सकता है। Toolbar setSupportActionBar के माध्यम से ActionBar को पूरी तरह से बदल देता है।

स्क्रॉल करने पर Toolbar को कैसे छिपाएँ?

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout का उपयोग करें। layout_scrollBehavior में Toolbar के लिए scroll फ़्लैग सेट करें। नीचे स्क्रॉल करने पर Toolbar छिप जाता है; ऊपर स्क्रॉल करने पर एनिमेशन के साथ दिखाई देता है। Material 3 में, Medium/Large Top App Bar Small में सिमट जाता है।

Toolbar में कितने action items रखे जा सकते हैं?

सीमा स्क्रीन की भौतिक चौड़ाई है। 2–4 action items (आइकन) की अनुशंसा की जाती है। बाकी overflow मेनू (तीन बिंदु) में चले जाते हैं। app:showAsAction के माध्यम से कॉन्फ़िगर करें: always (हमेशा दिखाएँ), ifRoom (यदि स्थान हो), never (overflow में)।

Toolbar में SearchView कैसे जोड़ें?

SearchView मेनू में action view के रूप में जोड़ा जाता है। XML मेनू में: app:actionViewClass="androidx.appcompat.widget.SearchView"। SearchView स्वचालित रूप से खोज आइकन में सिमट जाता है और टैप करने पर विस्तृत होता है। SearchRecentSuggestionsProvider के माध्यम से वॉयस सर्च और ऑटोकम्प्लीट का समर्थन करता है।

CollapsingToolbarLayout क्या है?

CollapsingToolbarLayout Toolbar के लिए एक कंटेनर है जो स्क्रॉल करने पर एनिमेटेड रूप से सिकुड़ता है। CoordinatorLayout और AppBarLayout के साथ उपयोग किया जाता है। मोड का समर्थन करता है: pin (स्थिर), parallax (पैरालैक्स प्रभाव)। हेडर छवि वाली स्क्रीन (प्रोफ़ाइल, विवरण पृष्ठ) के लिए आदर्श।

सारांश

  • Toolbar एक लचीला Android टूलबार है जिसने ActionBar को बदल दिया और Material Design के साथ पूरी तरह एकीकृत है
  • Material 3 Top App Bar — चार प्रकार: Small, Center-aligned, Medium, Large अलग-अलग स्क्रॉल व्यवहार के साथ
  • ActionBar एक अप्रचलित सिस्टम बार है, अनुकूलन और एनिमेशन में सीमित
  • मेनू और action items — always/ifRoom/never फ़्लैग के साथ XML मेनू के माध्यम से एकीकरण
  • CollapsingToolbarLayout — हेडर छवि वाली स्क्रीन के लिए स्क्रॉल पर Toolbar का एनिमेटेड संकुचन
  • अनुकूलन — लोगो, उपशीर्षक, कस्टम व्यू, SearchView, PopupMenu और Material 3 रंग
  • SearchView — वॉयस इनपुट और ऑटोकम्प्लीट के साथ खोज के लिए अंतर्निहित action view

हम एक मोबाइल एप्लिकेशन टर्नकी विकसित करेंगे

IT Sectr 2017 से स्टार्टअप और व्यवसायों के लिए iOS और Android एप्लिकेशन बनाता है। हम आपको सलाह देंगे और सर्वोत्तम समाधान प्रस्तावित करेंगे।

परियोजना पर चर्चा करें

यह भी पढ़ें