Toolbar: thanh công cụ trong ứng dụng Android

Tác giả: IT Sectr Đã đăng: 2026-02-23 Thời gian đọc: 12 phút

Toolbar (thanh công cụ) là một thành phần Android đã thay thế ActionBar, hiển thị tiêu đề màn hình, các thành phần điều hướng và hành động. Toolbar là một phần của Material Design Library và hoàn toàn có thể tùy chỉnh: từ tiêu đề tiêu chuẩn đến các chế độ xem tùy chỉnh và biểu tượng hoạt hình. Tìm hiểu thêm về thành phần này trong thông số kỹ thuật Material Design 3.

Những điểm chính

  • Toolbar — thanh công cụ Android có thể tùy chỉnh, kế thừa ActionBar từ Material Design
  • ActionBar — thanh hệ thống tồn tại trước Android 5.0, được thay thế bằng Toolbar
  • Material 3 — Top App Bar với bốn biến thể: Small, Center-aligned, Medium, Large
  • Menu — menu XML với action items, tích hợp vào Toolbar qua onCreateOptionsMenu
  • Tùy chỉnh — tiêu đề, logo, biểu tượng điều hướng, chế độ xem tùy chỉnh và hoạt ảnh

Toolbar là gì?

Toolbar là một thành phần Android từ thư viện Material Design (androidx.appcompat.widget.Toolbar) cung cấp thanh công cụ linh hoạt cho màn hình ứng dụng. Toolbar đã thay thế ActionBar cũ, cho phép nhà phát triển kiểm soát hoàn toàn giao diện và hành vi. Nó có thể được đặt ở bất kỳ đâu trong bố cục, có các chế độ xem con tùy chỉnh, hoạt ảnh và thích ứng với các kích thước màn hình khác nhau.

Material Design 3 (2026) định nghĩa Top App Bar — sự phát triển của Toolbar — với bốn biến thể: Small (gọn nhẹ, 48 dp), Center-aligned (tiêu đề căn giữa), Medium (tiêu đề mở rộng, 112 dp) và Large (tiêu đề lớn, 168 dp). Mỗi biến thể có hành vi cuộn riêng: Small cố định, Medium và Large thu gọn thành Small khi cuộn nội dung lên trên.

Toolbar hiển thị ba vùng chính: biểu tượng điều hướng (bên trái, thường là menu hamburger hoặc mũi tên Quay lại), tiêu đề màn hình (giữa hoặc trái) và action items (bên phải — biểu tượng hành động, menu overflow). Toolbar có thể chứa logo, phụ đề, chế độ xem tùy chỉnh (search view, switch) và CollapsingToolbarLayout hoạt hình kết hợp với CoordinatorLayout.

ActionBar: lịch sử và sự phát triển

ActionBar là một thanh hệ thống Android xuất hiện trong Android 3.0 (API 11) thay thế cho Title Bar cũ. ActionBar bị ràng buộc chặt chẽ với Activity, có vị trí cố định ở đầu màn hình và các tùy chọn tùy chỉnh hạn chế. Với sự ra mắt của Android 5.0 (Lollipop, 2014) và thư viện AppCompat, Google đã giới thiệu Toolbar như một giải pháp thay thế linh hoạt.

Những thiếu sót chính của ActionBar mà Toolbar đã khắc phục: vị trí cố định (chỉ ở trên cùng), không hỗ trợ hoạt ảnh, khó khăn với chế độ xem tùy chỉnh, vấn đề với CoordinatorLayout và CollapsingToolbarLayout. Google chính thức tuyên bố ActionBar không còn được dùng nữa (deprecated) vào năm 2015 và khuyến nghị Toolbar cho tất cả các dự án mới. Bắt đầu từ Android 12 (2021), ActionBar bị vô hiệu hóa theo mặc định trong các chủ đề Material 3 mới.

Tính năngActionBarToolbar
Vị tríCố định trên cùngBất kỳ đâu trong bố cục
Tùy chỉnhHạn chế (màu, nền)Hoàn toàn (chế độ xem, kiểu, hoạt ảnh)
Thu gọnKhông hỗ trợCollapsingToolbarLayout
Hoạt ảnhChỉ hệ thốngBất kỳ (ObjectAnimator, Transition)
Material 3Không hỗ trợSmall / Medium / Large App Bar

Thiết lập Toolbar trong Android

Để sử dụng Toolbar, cần: (1) đặt chủ đề không có ActionBar (Theme.Material3.NoActionBar hoặc Theme.AppCompat.NoActionBar), (2) thêm Toolbar vào bố cục XML, (3) đặt nó làm ActionBar qua setSupportActionBar. Sau đó, Toolbar nhận được tất cả các chức năng của ActionBar: xử lý Menu, biểu tượng điều hướng, tiêu đề từ AndroidManifest.

xml
<!-- activity_main.xml với 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)

        // Thiết lập biểu tượng điều hướng
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)

        // Tiêu đề tùy chỉnh
        supportActionBar?.title = "Trang chủ"
        supportActionBar?.subtitle = "Xin chào, người dùng!"
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.toolbar_menu, menu)
        return true
    }
}

Tích hợp Menu vào Toolbar

Toolbar tích hợp với hệ thống Menu Android qua các callback onCreateOptionsMenu và onOptionsItemSelected. Menu định nghĩa action items — biểu tượng hành động hiển thị ở bên phải trong Toolbar. Nếu action items không vừa, chúng tự động di chuyển vào menu overflow (ba dấu chấm). Nhà phát triển kiểm soát điều này qua thuộc tính 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="Tìm kiếm"
        app:showAsAction="ifRoom"
        app:actionViewClass="androidx.appcompat.widget.SearchView" />

    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Thông báo"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="Cài đặt"
        app:showAsAction="never" />
</menu>
kotlin
override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_search -> {
            Toast.makeText(this, "Tìm kiếm", Toast.LENGTH_SHORT).show()
            true
        }
        R.id.action_notifications -> {
            openNotifications()
            true
        }
        R.id.action_settings -> {
            openSettings()
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

Material 3: Center và Large Top App Bar

Material 3 giới thiệu bốn biến thể Top App Bar: Small (gọn nhẹ, 48 dp), Center-aligned (tiêu đề căn giữa), Medium (112 dp với tiêu đề mở rộng) và Large (168 dp với tiêu đề lớn). Medium và Large App Bar hỗ trợ hành vi có thể thu gọn — khi cuộn nội dung lên trên, chúng thu gọn mượt mà thành Small. Hoạt ảnh được kiểm soát qua CoordinatorLayout và AppBarLayout.

Center-aligned Top App Bar là biến thể Material 3 mới nơi tiêu đề được đặt ở giữa thanh. Phong cách này thường được sử dụng trong các ứng dụng Google (Play Store, YouTube) và được khuyến nghị cho các màn hình có số lượng action items tối thiểu. Small Top App Bar là Toolbar cổ điển, tương thích với các phiên bản Android cũ. Medium và Large phù hợp cho các màn hình nơi tiêu đề là yếu tố chính (hồ sơ, trang chủ).

xml
<!-- Material 3 Large Top App Bar với 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="Nội dung màn hình..." />
    </NestedScrollView>
</CoordinatorLayout>

Tùy chỉnh nâng cao Toolbar

Toolbar hỗ trợ tùy chỉnh hoàn toàn: thay đổi chiều cao, hoạt ảnh hiển thị/ẩn, chế độ xem con tùy chỉnh, logo, biểu tượng điều hướng, PopupMenu và tích hợp với CoordinatorLayout. Để tạo hoạt ảnh ẩn khi cuộn, sử dụng AppBarLayout với các cờ scroll, enterAlways, snap. Để tạo hiệu ứng thị sai (parallax) cho hình ảnh bên dưới Toolbar — CollapsingToolbarLayout với mode parallax.

Logo và phụ đề được đặt qua các phương thức setLogo và setSubtitle. Biểu tượng điều hướng được cấu hình qua setNavigationIcon và setNavigationOnClickListener. Chế độ xem tùy chỉnh được thêm qua addView trực tiếp vào Toolbar. Đối với SearchView, sử dụng MenuItem với actionViewClass. Đối với chủ đề tối, màu sắc từ các thuộc tính Material 3 được áp dụng tự động.

kotlin
// Tùy chỉnh nâng cao Toolbar
with (toolbar) {
    // Logo và tiêu đề
    setLogo(R.drawable.ic_logo)
    setTitle("Ứng dụng của tôi")
    setSubtitle("Phiên bản 2.0")

    // Biểu tượng điều hướng với trình xử lý
    setNavigationIcon(R.drawable.ic_drawer)
    setNavigationOnClickListener {
        drawerLayout.open()
    }

    // Chế độ xem tùy chỉnh — Switch cho chủ đề
    val themeSwitch = Switch(this@MainActivity).apply {\n        thumbDrawable = ContextCompat.getDrawable(
            this@MainActivity, R.drawable.ic_theme
        )
    }
    addView(themeSwitch)

    // PopupMenu tùy chỉnh
    setOnMenuItemClickListener { item ->
        Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
        true
    }
}

Câu hỏi thường gặp

Sự khác biệt giữa Toolbar và ActionBar là gì?

ActionBar là thanh hệ thống của Android 3.0–4.4 với khả năng tùy chỉnh hạn chế. Toolbar là thành phần Material Design linh hoạt có thể được đặt ở bất kỳ đâu trong bố cục, tạo hoạt ảnh và chứa các chế độ xem tùy chỉnh. Toolbar thay thế hoàn toàn ActionBar qua setSupportActionBar.

Làm thế nào để ẩn Toolbar khi cuộn?

Sử dụng CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout. Đặt cờ scroll cho Toolbar trong layout_scrollBehavior. Khi cuộn xuống, Toolbar ẩn đi; khi cuộn lên, nó xuất hiện với hoạt ảnh. Trong Material 3, Medium/Large Top App Bar thu gọn thành Small.

Có thể đặt bao nhiêu action items trong Toolbar?

Giới hạn là chiều rộng vật lý của màn hình. Khuyến nghị 2–4 action items (biểu tượng). Phần còn lại di chuyển vào menu overflow (ba dấu chấm). Cấu hình qua app:showAsAction: always (luôn hiển thị), ifRoom (nếu có chỗ), never (trong overflow).

Làm thế nào để thêm SearchView vào Toolbar?

SearchView được thêm dưới dạng action view trong Menu. Trong menu XML: app:actionViewClass="androidx.appcompat.widget.SearchView". SearchView tự động thu gọn thành biểu tượng tìm kiếm và mở rộng khi chạm. Hỗ trợ tìm kiếm bằng giọng nói và tự động hoàn thành qua SearchRecentSuggestionsProvider.

CollapsingToolbarLayout là gì?

CollapsingToolbarLayout là một vùng chứa cho Toolbar thu gọn có hoạt ảnh khi cuộn nội dung. Được sử dụng với CoordinatorLayout và AppBarLayout. Hỗ trợ các chế độ: pin (cố định), parallax (hiệu ứng thị sai). Lý tưởng cho các màn hình có hình ảnh tiêu đề (hồ sơ, trang chi tiết).

Tổng kết

  • Toolbar là thanh công cụ Android linh hoạt đã thay thế ActionBar và được tích hợp hoàn toàn với Material Design
  • Material 3 Top App Bar — bốn biến thể: Small, Center-aligned, Medium, Large với hành vi cuộn khác nhau
  • ActionBar là thanh hệ thống không còn được dùng nữa, hạn chế về tùy chỉnh và hoạt ảnh
  • Menu và action items — tích hợp qua menu XML với cờ always/ifRoom/never để kiểm soát hiển thị
  • CollapsingToolbarLayout — thu gọn có hoạt ảnh của Toolbar khi cuộn cho màn hình có hình ảnh tiêu đề
  • Tùy chỉnh — logo, phụ đề, chế độ xem tùy chỉnh, SearchView, PopupMenu và màu sắc Material 3
  • SearchView — action view tích hợp để tìm kiếm với nhập liệu bằng giọng nói và tự động hoàn thành

Chúng tôi sẽ phát triển ứng dụng di động chìa khóa trao tay

IT Sectr tạo các ứng dụng iOS và Android cho các công ty khởi nghiệp và doanh nghiệp từ năm 2017. Chúng tôi sẽ tư vấn và đề xuất giải pháp tốt nhất cho bạn.

Thảo luận dự án

Đọc thêm