Toolbar: Android ایپلیکیشنز میں ٹول بار

مصنف: IT Sectr اشاعت: 2026-02-23 مطالعے کا وقت: 12 منٹ

Toolbar (ٹول بار) ایک Android جزو ہے جس نے ActionBar کو تبدیل کیا، جو اسکرین کا عنوان، نیویگیشن عناصر اور اقدامات دکھاتا ہے۔ Toolbar Material Design Library کا حصہ ہے اور مکمل طور پر حسب ضرورت ہے: معیاری عنوان سے لے کر حسب ضرور Views اور متحرک آئیکنز تک۔ جزو کے بارے میں مزید معلومات کے لیے 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 میں ضم
  • حسب ضرورت — عنوان، لوگو، نیویگیشن آئیکن، حسب ضرور Views اور اینیمیشنز

Toolbar کیا ہے؟

Toolbar Material Design لائبریری (androidx.appcompat.widget.Toolbar) کا ایک Android جزو ہے جو ایپ اسکرین کے لیے ایک لچکدار ٹول بار فراہم کرتا ہے۔ Toolbar نے پرانے ActionBar کو تبدیل کر دیا، جس سے ڈویلپرز کو ظاہری شکل اور رویے پر مکمل کنٹرول ملتا ہے۔ اسے layout میں کہیں بھی رکھا جا سکتا ہے، اس میں حسب ضرور چائلڈ Views، اینیمیشنز ہو سکتی ہیں اور یہ مختلف اسکرین سائز کے مطابق ڈھل سکتا ہے۔

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 میں لوگو، ذیلی عنوان، حسب ضرور Views (سرچ ویو، سوئچ) اور CoordinatorLayout کے ساتھ متحرک CollapsingToolbarLayout شامل ہو سکتا ہے۔

ActionBar: تاریخ اور ارتقاء

ActionBar ایک سسٹم Android بار ہے جو Android 3.0 (API 11) میں پرانے Title Bar کے متبادل کے طور پر ظاہر ہوا۔ ActionBar Activity سے مضبوطی سے منسلک تھا، اسکرین کے اوپر ایک مقررہ مقام اور محدود حسب ضرورت اختیارات تھے۔ Android 5.0 (Lollipop، 2014) اور AppCompat لائبریری کی ریلیز کے ساتھ، Google نے Toolbar کو ایک لچکدار متبادل کے طور پر متعارف کرایا۔

ActionBar کی اہم خامیاں جو Toolbar نے حل کیں: مقررہ مقام (صرف اوپر)، اینیمیشن کا ناممکن ہونا، حسب ضرور Views میں دشواری، CoordinatorLayout اور CollapsingToolbarLayout کے ساتھ مسائل۔ Google نے 2015 میں باضابطہ طور پر ActionBar کو فرسودہ (deprecated) قرار دیا اور تمام نئے منصوبوں کے لیے Toolbar کی سفارش کرتا ہے۔ Android 12 (2021) سے شروع ہو کر، ActionBar نئے Material 3 تھیمز میں بطور ڈیفالٹ غیر فعال ہے۔

خصوصیتActionBarToolbar
مقاماوپر مقررہLayout میں کہیں بھی
حسب ضرورتمحدود (رنگ، پس منظر)مکمل (Views، اسٹائل، اینیمیشنز)
سمٹناتعاون یافتہ نہیں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 مکمل حسب ضرورت کی حمایت کرتا ہے: اونچائی میں تبدیلی، ظاہر/چھپانے کی اینیمیشنز، حسب ضرور چائلڈ Views، لوگو، نیویگیشن آئیکن، PopupMenu اور CoordinatorLayout کے ساتھ انضمام۔ اسکرول کرتے وقت چھپانے کی اینیمیشن کے لیے scroll، enterAlways، snap جھنڈوں کے ساتھ AppBarLayout استعمال کیا جاتا ہے۔ Toolbar کے نیچے تصویر کے parallax اثر کے لیے — mode parallax کے ساتھ CollapsingToolbarLayout۔

لوگو اور ذیلی عنوان setLogo اور setSubtitle طریقوں کے ذریعے سیٹ کیے جاتے ہیں۔ نیویگیشن آئیکن setNavigationIcon اور setNavigationOnClickListener کے ذریعے ترتیب دیا جاتا ہے۔ حسب ضرور Views 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()
    }

    // حسب ضرورت View — تھیم کے لیے 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 میں کہیں بھی رکھا جا سکتا ہے، متحرک کیا جا سکتا ہے اور حسب ضرور Views سے بھرا جا سکتا ہے۔ 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 کا متحرک سمٹنا
  • حسب ضرورت — لوگو، ذیلی عنوان، حسب ضرور Views، SearchView، PopupMenu اور Material 3 رنگ
  • SearchView — صوتی ان پٹ اور خودکار تکمیل کے ساتھ تلاش کے لیے بلٹ ان action view

ہم ایک موبائل ایپلیکیشن ٹرنکی تیار کریں گے

IT Sectr 2017 سے اسٹارٹ اپس اور کاروبار کے لیے iOS اور Android ایپلیکیشنز بناتا ہے۔ ہم آپ کو مشورہ دیں گے اور بہترین حل تجویز کریں گے۔

پروجیکٹ پر بحث کریں

مزید پڑھیں