Tạo nút hành động nổi (FAB)

Nút hành động nổi (FAB) là một nút có độ nhấn mạnh cao, cho phép người dùng thực hiện một hành động chính trong ứng dụng. FAB thúc đẩy một hành động duy nhất, tập trung, đây là con đường phổ biến nhất mà người dùng có thể thực hiện và thường được cố định ở dưới cùng bên phải màn hình.

Hãy xem xét 3 trường hợp sử dụng sau đây mà bạn có thể dùng FAB:

  • Tạo mục mới: Trong một ứng dụng ghi chú, FAB có thể được dùng để nhanh chóng tạo một ghi chú mới.
  • Thêm người liên hệ mới: Trong một ứng dụng trò chuyện, FAB có thể mở một giao diện cho phép người dùng thêm người khác vào cuộc trò chuyện.
  • Vị trí trung tâm: Trong giao diện bản đồ, FAB có thể đặt vị trí hiện tại của người dùng làm trung tâm bản đồ.

Trong Material Design, có 4 loại FAB:

  • FAB: Nút hành động nổi có kích thước thông thường.
  • FAB nhỏ: Nút hành động nổi có kích thước nhỏ hơn.
  • FAB lớn: Nút hành động nổi có kích thước lớn hơn.
  • FAB mở rộng: Nút hành động nổi có nhiều nội dung hơn chỉ là một biểu tượng.

Khả năng tương thích giữa các phiên bản

Việc triển khai này yêu cầu bạn đặt minSDK của dự án thành API cấp 21 trở lên.

Phần phụ thuộc

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.05.00"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.05.00')

Tạo nút hành động nổi cơ bản

Để tạo một nút hành động nổi chung, hãy sử dụng thành phần kết hợp cơ bản FloatingActionButton:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

Kết quả

Một nút hành động nổi tiêu chuẩn có góc bo tròn, bóng đổ và biểu tượng "thêm".
Hình 1. Nút hành động nổi.

Tạo một nút hành động nổi nhỏ

Để tạo một nút hành động nổi nhỏ, hãy dùng thành phần kết hợp SmallFloatingActionButton. Ví dụ sau đây minh hoạ cách thực hiện việc này, cùng với việc bổ sung màu tuỳ chỉnh.

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

Kết quả

Một phương thức triển khai SmallFloatingActionButton chứa biểu tượng "thêm".
Hình 2. Nút hành động nổi nhỏ.

Tạo một nút hành động nổi lớn

Để tạo một nút hành động nổi lớn, hãy sử dụng thành phần kết hợp LargeFloatingActionButton. Thành phần kết hợp này không khác biệt đáng kể so với các ví dụ khác, ngoại trừ việc thành phần này tạo ra một nút lớn hơn.

Sau đây là một cách triển khai đơn giản cho FAB lớn.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

Kết quả

Một cách triển khai LargeFloatingActionButton có chứa biểu tượng "thêm".
Hình 3. Một nút hành động nổi lớn.

Tạo nút hành động nổi mở rộng

Bạn có thể tạo các nút hành động nổi phức tạp hơn bằng thành phần kết hợp ExtendedFloatingActionButton. Điểm khác biệt chính giữa hàm này và FloatingActionButton là hàm này có các tham số icon và text riêng biệt. Các nút này cho phép bạn tạo một nút có nội dung phức tạp hơn và có thể điều chỉnh kích thước để phù hợp với nội dung của nút.

Đoạn mã sau đây minh hoạ cách triển khai ExtendedFloatingActionButton, với các giá trị mẫu được truyền cho icon và text.

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

Kết quả

Một cách triển khai ExtendedFloatingActionButton hiển thị văn bản có nội dung "nút mở rộng" và biểu tượng chỉnh sửa.
Hình 4. Một nút hành động nổi có cả văn bản và biểu tượng.

Điểm chính

Mặc dù có một số thành phần kết hợp mà bạn có thể dùng để tạo các nút hành động nổi nhất quán với Material Design, nhưng các tham số của chúng không khác nhau nhiều. Sau đây là một số tham số chính bạn nên lưu ý:

  • onClick: Hàm được gọi khi người dùng nhấn nút.
  • containerColor: Màu của nút.
  • contentColor: Màu của biểu tượng.

z## Tuyển tập có chứa hướng dẫn này

Hướng dẫn này là một phần của bộ sưu tập Hướng dẫn nhanh được tuyển chọn, bao gồm các mục tiêu phát triển Android rộng hơn:

Tìm hiểu cách các hàm có khả năng kết hợp có thể giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.
Bộ sưu tập hướng dẫn nhanh

Bạn có câu hỏi hoặc ý kiến phản hồi

Truy cập trang câu hỏi thường gặp của chúng tôi để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để chia sẻ ý kiến của bạn.
Chuyển đến phần Câu hỏi thường gặp Gửi ý kiến phản hồi