Toolbar (टूलबार) — Android का एक घटक है जिसने ActionBar को बदल दिया, यह स्क्रीन का शीर्षक, नेविगेशन एलिमेंट और क्रियाएँ प्रदर्शित करता है। Toolbar Material Design Library का हिस्सा है और पूरी तरह से अनुकूलन योग्य है: मानक शीर्षक से लेकर कस्टम व्यू और एनिमेटेड आइकन तक। घटक के बारे में अधिक जानकारी के लिए Material Design 3 विनिर्देश देखें।
मुख्य बिंदु
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 एक सिस्टम 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 थीम में डिफ़ॉल्ट रूप से अक्षम है।
| विशेषता | ActionBar | Toolbar |
|---|---|---|
| स्थान | शीर्ष पर निश्चित | Layout में कहीं भी |
| अनुकूलन | सीमित (रंग, पृष्ठभूमि) | पूर्ण (व्यू, शैलियाँ, एनिमेशन) |
| संकुचन | समर्थित नहीं | CollapsingToolbarLayout |
| एनिमेशन | केवल सिस्टम | कोई भी (ObjectAnimator, Transition) |
| Material 3 | समर्थित नहीं | Small / Medium / Large App Bar |
Toolbar का उपयोग करने के लिए: (1) ActionBar के बिना थीम सेट करें (Theme.Material3.NoActionBar या Theme.AppCompat.NoActionBar), (2) XML layout में Toolbar जोड़ें, (3) इसे setSupportActionBar के माध्यम से ActionBar के रूप में सेट करें। उसके बाद, Toolbar को ActionBar की सभी सुविधाएँ मिलती हैं: मेनू हैंडलिंग, नेविगेशन आइकन, AndroidManifest से शीर्षक।
<!-- 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>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 onCreateOptionsMenu और onOptionsItemSelected कॉलबैक के माध्यम से Android मेनू सिस्टम के साथ एकीकृत होता है। मेनू 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 का एक नया प्रकार है जहाँ शीर्षक बार के केंद्र में स्थित होता है। यह शैली अक्सर Google ऐप्स (Play Store, YouTube) में उपयोग की जाती है और कम action items वाली स्क्रीन के लिए अनुशंसित है। Small Top App Bar क्लासिक Toolbar है, जो पुराने Android संस्करणों के साथ संगत है। Medium और Large उन स्क्रीन के लिए उपयुक्त हैं जहाँ शीर्षक एक मुख्य तत्व है (प्रोफ़ाइल, मुख्य पृष्ठ)।
<!-- 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 पूर्ण अनुकूलन का समर्थन करता है: ऊँचाई बदलना, दिखने/छिपने के एनिमेशन, कस्टम चाइल्ड व्यू, लोगो, नेविगेशन आइकन, PopupMenu और CoordinatorLayout के साथ एकीकरण। स्क्रॉल करने पर छिपने के एनिमेशन के लिए AppBarLayout का उपयोग scroll, enterAlways, snap फ़्लैग के साथ किया जाता है। Toolbar के नीचे छवि के parallax प्रभाव के लिए — CollapsingToolbarLayout mode parallax के साथ।
लोगो और उपशीर्षक setLogo और setSubtitle विधियों के माध्यम से सेट किए जाते हैं। नेविगेशन आइकन setNavigationIcon और setNavigationOnClickListener के माध्यम से कॉन्फ़िगर किया जाता है। कस्टम व्यू addView के माध्यम से सीधे Toolbar में जोड़े जाते हैं। SearchView के लिए, actionViewClass के साथ MenuItem का उपयोग करें। डार्क थीम के लिए, 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 Android 3.0–4.4 का एक सिस्टम बार है जिसमें सीमित अनुकूलन है। Toolbar Material Design का एक लचीला घटक है जिसे layout में कहीं भी रखा जा सकता है, एनिमेट किया जा सकता है और कस्टम व्यू से भरा जा सकता है। Toolbar setSupportActionBar के माध्यम से ActionBar को पूरी तरह से बदल देता है।
CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout का उपयोग करें। layout_scrollBehavior में Toolbar के लिए scroll फ़्लैग सेट करें। नीचे स्क्रॉल करने पर Toolbar छिप जाता है; ऊपर स्क्रॉल करने पर एनिमेशन के साथ दिखाई देता है। Material 3 में, Medium/Large Top App Bar Small में सिमट जाता है।
सीमा स्क्रीन की भौतिक चौड़ाई है। 2–4 action items (आइकन) की अनुशंसा की जाती है। बाकी overflow मेनू (तीन बिंदु) में चले जाते हैं। app:showAsAction के माध्यम से कॉन्फ़िगर करें: always (हमेशा दिखाएँ), ifRoom (यदि स्थान हो), never (overflow में)।
SearchView मेनू में action view के रूप में जोड़ा जाता है। XML मेनू में: app:actionViewClass="androidx.appcompat.widget.SearchView"। SearchView स्वचालित रूप से खोज आइकन में सिमट जाता है और टैप करने पर विस्तृत होता है। SearchRecentSuggestionsProvider के माध्यम से वॉयस सर्च और ऑटोकम्प्लीट का समर्थन करता है।
CollapsingToolbarLayout Toolbar के लिए एक कंटेनर है जो स्क्रॉल करने पर एनिमेटेड रूप से सिकुड़ता है। CoordinatorLayout और AppBarLayout के साथ उपयोग किया जाता है। मोड का समर्थन करता है: pin (स्थिर), parallax (पैरालैक्स प्रभाव)। हेडर छवि वाली स्क्रीन (प्रोफ़ाइल, विवरण पृष्ठ) के लिए आदर्श।
सारांश
हम एक मोबाइल एप्लिकेशन टर्नकी विकसित करेंगे
IT Sectr 2017 से स्टार्टअप और व्यवसायों के लिए iOS और Android एप्लिकेशन बनाता है। हम आपको सलाह देंगे और सर्वोत्तम समाधान प्रस्तावित करेंगे।
यह भी पढ़ें