Bottom Navigation: cơ bản, BottomNavigationView và TabView

Bottom Navigation là gì?

Bottom Navigation là một mẫu điều hướng trong đó các phần chính của ứng dụng có thể truy cập qua một bảng ở cuối màn hình. Mẫu này đã trở thành tiêu chuẩn thiết kế di động nhờ khả năng sử dụng bằng một tay. Không giống như menu bên (Drawer), Bottom Navigation luôn hiển thị và không yêu cầu cử chỉ bổ sung để mở.

Material Design 3 (2026) định nghĩa Navigation Bar là một thành phần với ba trạng thái: default (biểu tượng + nhãn), labeled (nhãn mở rộng, một tab hoạt động) và unlabeled (chỉ biểu tượng). Google khuyến nghị Navigation Bar cho các ứng dụng có 3–5 phần tương đương. Cho 6+ phần — Navigation Drawer. Trong iOS SwiftUI, TabView tự động sử dụng bảng dưới cùng với kiểu hệ thống.

Một nghiên cứu của UX Movement (2025) cho thấy Bottom Navigation cải thiện thời gian hoàn thành tác vụ lên 27% so với menu trượt, vì người dùng nhìn thấy tất cả các phần có sẵn mà không cần thao tác bổ sung. Số lần chạm sai giảm 34% nhờ các mục tiêu chạm lớn (tối thiểu 48x48 dp trên Android, 44x44 pt trên iOS).

BottomNavigationView trên Android (Material 3)

BottomNavigationView trên Android là một thành phần từ Thư viện Material 3 (com.google.android.material.navigation.NavigationBarView). Nó đã thay thế BottomNavigationView cũ từ Material 2 và thêm hỗ trợ cho màu sắc động Material You, chỉ báo tab hoạt động có hoạt ảnh và huy hiệu tích hợp. Thành phần được cấu hình qua menu XML và hoàn toàn tương thích với Navigation Component.

// Hoạt động với BottomNavigationView và NavHostFragment
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navView = findViewById<NavigationBarView>(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)

        // Đồng bộ hóa điều hướng tự động
        navView.setupWithNavController(navController)

        // Thiết lập huy hiệu
        val badge = navView.getOrCreateBadge(R.id.navigation_messages)
        badge.number = 8
        badge.badgeGravity = BadgeDrawable.TOP_END
    }
}

// Menu XML cho Bottom Navigation (res/menu/bottom_nav_menu.xml)
// <?xml version="1.0" encoding="utf-8"?>
// <menu xmlns:android="http://schemas.android.com/apk/res/android">
//   <item android:id="@+id/navigation_home"
//     android:icon="@drawable/ic_home"
//     android:title="Trang chủ" />
//   <item android:id="@+id/navigation_messages"
//     android:icon="@drawable/ic_chat"
//     android:title="Trò chuyện" />
//   <item android:id="@+id/navigation_profile"
//     android:icon="@drawable/ic_person"
//     android:title="Hồ sơ" />
// </menu>

Material 3 NavigationBarView hỗ trợ ba chế độ labelVisibilityMode: LABEL_VISIBILITY_AUTO (mặc định — nhãn được hiển thị cho tab hoạt động), LABEL_VISIBILITY_LABELED (nhãn cho tất cả), LABEL_VISIBILITY_UNLABELED (chỉ biểu tượng). Chỉ báo tab hoạt động có hoạt ảnh được cấu hình qua itemActiveIndicatorStyle với hiệu ứng gợn sóng tùy chỉnh.

TabView trong SwiftUI cho iOS

TabView là vùng chứa tích hợp SwiftUI để tạo điều hướng dưới cùng. Mỗi tab được định nghĩa bằng bộ sửa đổi .tabItem với biểu tượng và văn bản. TabView tự động tạo UITabBarController bên trong và hỗ trợ tất cả các tính năng bảng gốc: huy hiệu, màu huy hiệu, hoạt ảnh chuyển đổi và thích ứng Dynamic Type.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Label("Trang chủ", systemImage: "house.fill")
                }
                .badge(3)

            SearchView()
                .tabItem {
                    Label("Tìm kiếm", systemImage: "magnifyingglass")
                }

            NotificationsView()
                .tabItem {
                    Label("Thông báo", systemImage: "bell.fill")
                }
                .badge("12")

            ProfileView()
                .tabItem {
                    Label("Hồ sơ", systemImage: "person.circle.fill")
                }
        }
    }
}

TabView hỗ trợ bộ sửa đổi .badge (iOS 15+), chấp nhận Int (huy hiệu số) hoặc String (huy hiệu văn bản). Màu huy hiệu có thể thay đổi qua .badgeProminence(.increased) — làm huy hiệu sáng hơn. Hoạt ảnh chuyển đổi tab được cấu hình qua .tabViewStyle(.automatic) hoặc các kiểu tùy chỉnh. Để điều khiển chuyển đổi theo chương trình, @State với selection được sử dụng.

Kết hợp điều hướng dưới cùng và ngăn xếp

Bottom Navigation hiếm khi được sử dụng một mình — mỗi tab thường chứa một bộ điều hướng ngăn xếp (NavigationView/NavigationStack trong SwiftUI, NavHostFragment trong Android). Sự kết hợp này cung cấp cho người dùng cả truy cập nhanh vào các phần (Tab) và điều hướng sâu trong mỗi phần (Stack). Đây là kiến trúc tiêu chuẩn cho các ứng dụng sản xuất.

struct AppTabView: View {
    var body: some View {
        TabView {
            NavigationStack {
                HomeView()
            }
            .tabItem {
                Label("Trang chủ", systemImage: "house")
            }

            NavigationStack {
                SearchView()
            }
            .tabItem {
                Label("Tìm kiếm", systemImage: "magnifyingglass")
            }
        }
    }
}

// Bên trong HomeView — điều hướng ngăn xếp
struct HomeView: View {
    var body: some View {
        List(items) { item in
            NavigationLink("\(item.title)", value: item)
        }
        .navigationDestination(for: Item.self) { item in
            ItemDetailView(item: item)
        }
    }
}

Trên Android, sự kết hợp tương tự được triển khai qua NavHostFragment cho mỗi tab. Navigation Component tự động hóa việc tạo ngăn xếp quay lại cho mỗi tab: khi chuyển đổi tab, trạng thái ngăn xếp được giữ nguyên, và khi quay lại — được khôi phục. Điều này mang lại trải nghiệm người dùng liền mạch, như trong các ứng dụng hệ thống Google (Play Market, YouTube).

Material 3: màu sắc động và hoạt ảnh

Material 3 (Material You) giới thiệu một thay đổi quan trọng trong Bottom Navigation — màu sắc động được tạo từ hình nền của người dùng. Hệ thống trích xuất các màu chủ đạo từ hình nền và tạo bảng màu gồm 5 tông màu chính. NavigationBarView tự động áp dụng các màu này: tab hoạt động nhận màu chính, tab không hoạt động — biến thể onSurface.

Hoạt ảnh của chỉ báo tab hoạt động đã trở nên mượt mà: khi chuyển đổi, chỉ báo di chuyển có hoạt ảnh đến tab mới với phép nội suy. Hiệu ứng gợn sóng khi chạm sử dụng màu phụ. Bottom Navigation trong Material 3 cũng hỗ trợ hoạt ảnh tùy chỉnh qua itemActiveIndicatorStyle — nhà phát triển có thể đặt hình dạng (hình bầu dục, hình chữ nhật), lề và màu chỉ báo.

<!-- Kiểu chỉ báo hoạt động của NavigationBarView -->
<style name="Widget.MyApp.NavigationBarView.ActiveIndicator"
    parent="Widget.Material3.NavigationBarView.ActiveIndicator">
    <item name="android:height">32dp</item>
    <item name="android:width">64dp</item>
    <item name="android:marginHorizontal">8dp</item>
    <item name="shapeAppearance">
        @style/ShapeAppearance.Material3.Corner.Full
    </item>
    <item name="color">@color/primary_container</item>
</style>

Khuyến nghị UX cho Bottom Navigation

Khi thiết kế Bottom Navigation, cần xem xét nghiên cứu về khả năng sử dụng. NN Group (2026): bảng dưới cùng phải cao ít nhất 56 dp, mục tiêu chạm — ít nhất 48 dp. Văn bản nhãn — tối đa 12 ký tự (Latin) hoặc 8 ký tự (Cyrillic). Tab hoạt động nên khác biệt không chỉ về màu sắc mà còn về trạng thái biểu tượng (được tô vs đường viền).

Material Design 3 khuyến nghị các mẫu sau: 4 tab — tối ưu cho việc quét dễ dàng; biểu tượng "+" ở trung tâm (FloatingActionButton) — cho hành động chính; huy hiệu — chỉ cho bộ đếm hành động người dùng. Tránh: sử dụng Bottom Navigation với 2 tab (thay vào đó hãy sử dụng Tab Layout), thay đổi thứ tự tab động, ẩn bảng trên các màn hình lồng nhau.

• Chiều cao — tối thiểu 56 dp để ngón tay cái với tới thoải mái
• Tương phản — tab hoạt động phải phân biệt được (màu sắc + tô biểu tượng)
• Nhãn — ngắn, 1-2 từ, không cắt xén (không quá 12 ký tự)
• Thứ tự — cố định, từ quan trọng nhất đến ít quan trọng nhất
• Bộ đếm — chỉ cho thông báo người dùng, không cho tiếp thị