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 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à 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ăng | ActionBar | Toolbar |
|---|---|---|
| Vị trí | Cố định trên cùng | Bất kỳ đâu trong bố cục |
| Tùy chỉnh | Hạn chế (màu, nền) | Hoàn toàn (chế độ xem, kiểu, hoạt ảnh) |
| Thu gọn | Không hỗ trợ | CollapsingToolbarLayout |
| Hoạt ảnh | Chỉ hệ thống | Bất kỳ (ObjectAnimator, Transition) |
| Material 3 | Không hỗ trợ | Small / Medium / Large App Bar |
Để 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.
<!-- 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>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
}
}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.
<!-- 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>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 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ủ).
<!-- 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>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.
// 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
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.
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.
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).
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à 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
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.
Đọc thêm