Toolbar: แถบเครื่องมือในแอปพลิเคชัน Android

ผู้แต่ง: IT Sectr เผยแพร่เมื่อ: 2026-02-23 เวลาอ่าน: 12 นาที

Toolbar (แถบเครื่องมือ) คือคอมโพเนนต์ Android ที่แทนที่ ActionBar โดยแสดงชื่อเรื่องของหน้าจอ องค์ประกอบนำทาง และการดำเนินการ Toolbar เป็นส่วนหนึ่งของ Material Design Library และสามารถปรับแต่งได้อย่างสมบูรณ์ ตั้งแต่ชื่อเรื่องมาตรฐานไปจนถึงมุมมองที่กำหนดเองและไอคอนเคลื่อนไหว เรียนรู้เพิ่มเติมเกี่ยวกับคอมโพเนนต์นี้ได้ใน ข้อกำหนด Material Design 3

ประเด็นสำคัญ

  • Toolbar — แถบเครื่องมือ Android ที่ปรับแต่งได้ ผู้สืบทอดต่อจาก ActionBar ของ Material Design
  • ActionBar — แถบระบบที่มีอยู่ก่อน Android 5.0 ถูกแทนที่ด้วย Toolbar
  • Material 3 — Top App Bar มีสี่รูปแบบ: Small, Center-aligned, Medium, Large
  • Menu — เมนู XML พร้อม action items ผสานรวมใน Toolbar ผ่าน onCreateOptionsMenu
  • การปรับแต่ง — ชื่อเรื่อง โลโก้ ไอคอนนำทาง มุมมองที่กำหนดเอง และแอนิเมชัน

Toolbar คืออะไร?

Toolbar คือคอมโพเนนต์ Android จากไลบรารี Material Design (androidx.appcompat.widget.Toolbar) ที่ให้แถบเครื่องมือที่ยืดหยุ่นสำหรับหน้าจอแอป Toolbar ได้แทนที่ ActionBar ที่ล้าสมัย ทำให้นักพัฒนาสามารถควบคุมรูปลักษณ์และพฤติกรรมได้อย่างสมบูรณ์ สามารถวางไว้ที่ใดก็ได้ในเค้าโครง มีมุมมองย่อยที่กำหนดเอง มีแอนิเมชัน และปรับให้เข้ากับขนาดหน้าจอที่แตกต่างกันได้

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) และ CollapsingToolbarLayout แบบเคลื่อนไหวร่วมกับ CoordinatorLayout

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 ประกาศให้ ActionBar เลิกใช้งาน (deprecated) อย่างเป็นทางการในปี 2015 และแนะนำ Toolbar สำหรับโปรเจกต์ใหม่ทั้งหมด เริ่มต้นจาก Android 12 (2021) ActionBar ถูกปิดใช้งานโดยค่าเริ่มต้นในธีม Material 3 ใหม่

คุณสมบัติActionBarToolbar
ตำแหน่งคงที่ด้านบนที่ใดก็ได้ในเค้าโครง
การปรับแต่งจำกัด (สี, พื้นหลัง)เต็มรูปแบบ (มุมมอง, สไตล์, แอนิเมชัน)
การย่อไม่รองรับCollapsingToolbarLayout
แอนิเมชันเฉพาะระบบใดก็ได้ (ObjectAnimator, Transition)
Material 3ไม่รองรับSmall / Medium / Large App Bar

การตั้งค่า Toolbar ใน Android

ในการใช้ Toolbar จำเป็นต้อง: (1) ตั้งค่าธีมที่ไม่มี ActionBar (Theme.Material3.NoActionBar หรือ Theme.AppCompat.NoActionBar), (2) เพิ่ม Toolbar ในเค้าโครง XML, (3) ตั้งเป็น ActionBar ผ่าน setSupportActionBar หลังจากนั้น Toolbar จะได้รับฟังก์ชันทั้งหมดของ ActionBar: การจัดการเมนู, ไอคอนนำทาง, ชื่อเรื่องจาก AndroidManifest

xml
<!-- activity_main.xml พร้อม Toolbar -->
<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 ผสานรวมกับระบบเมนู Android ผ่าน Callback onCreateOptionsMenu และ onOptionsItemSelected เมนูกำหนด 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
<!-- Material 3 Large Top App Bar พร้อม CollapsingToolbarLayout -->
<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 — CollapsingToolbarLayout พร้อม mode parallax

โลโก้และคำบรรยายถูกตั้งค่าผ่านเมธอด setLogo และ setSubtitle ไอคอนนำทางถูกกำหนดค่าผ่าน setNavigationIcon และ setNavigationOnClickListener มุมมองที่กำหนดเองถูกเพิ่มผ่าน addView โดยตรงใน Toolbar สำหรับ SearchView ใช้ MenuItem พร้อม actionViewClass สำหรับธีมมืด สีจากแอตทริบิวต์ 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 ที่ยืดหยุ่นซึ่งสามารถวางที่ใดก็ได้ในเค้าโครง ทำแอนิเมชัน และเติมด้วยมุมมองที่กำหนดเอง Toolbar แทนที่ ActionBar อย่างสมบูรณ์ผ่าน setSupportActionBar

จะซ่อน Toolbar เมื่อเลื่อนได้อย่างไร?

ใช้ CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout ตั้งค่าแฟล็ก scroll สำหรับ Toolbar ใน layout_scrollBehavior เมื่อเลื่อนลง Toolbar จะซ่อน เมื่อเลื่อนขึ้น จะปรากฏพร้อมแอนิเมชัน ใน Material 3 Medium/Large Top App Bar ย่อเป็น Small

สามารถวาง action items ได้กี่รายการใน Toolbar?

ข้อจำกัดคือความกว้างทางกายภาพของหน้าจอ แนะนำ 2–4 action items (ไอคอน) ส่วนที่เหลือจะย้ายไปที่เมนู overflow (สามจุด) กำหนดค่าผ่าน app:showAsAction: always (แสดงเสมอ), ifRoom (ถ้ามีที่), never (ใน overflow)

จะเพิ่ม SearchView ใน Toolbar ได้อย่างไร?

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 — การผสานรวมผ่านเมนู XML พร้อมแฟล็ก always/ifRoom/never สำหรับควบคุมการมองเห็น
  • CollapsingToolbarLayout — การย่อแบบเคลื่อนไหวของ Toolbar เมื่อเลื่อนสำหรับหน้าจอที่มีภาพส่วนหัว
  • การปรับแต่ง — โลโก้ คำบรรยาย มุมมองที่กำหนดเอง SearchView PopupMenu และสี Material 3
  • SearchView — action view ในตัวสำหรับค้นหาพร้อมการป้อนด้วยเสียงและการเติมข้อความอัตโนมัติ

เราจะพัฒนาแอปพลิเคชันบนมือถือแบบครบวงจร

IT Sectr สร้างแอปพลิเคชัน iOS และ Android สำหรับสตาร์ทอัพและธุรกิจตั้งแต่ปี 2017 เราจะให้คำแนะนำและเสนอวิธีแก้ปัญหาที่ดีที่สุดแก่คุณ

ปรึกษาโครงการ

อ่านเพิ่มเติม