Thêm nút hành động nổi

Thử cách sử dụng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách thêm thành phần trong Compose.

Nút hành động nổi (FAB) là một nút tròn kích hoạt hành động chính trong giao diện người dùng của ứng dụng. Tài liệu này cho biết cách thêm FAB vào bố cục, tuỳ chỉnh một số giao diện và phản hồi khi nhấn vào nút.

Để tìm hiểu thêm về cách thiết kế FAB cho ứng dụng của bạn theo Nguyên tắc thiết kế Material Design, hãy xem nội dung về FAB trong Material Design.

Hình ảnh màn hình ứng dụng có chứa FloatingActionButton màu đỏ
Hình 1. Một nút hành động nổi (FAB).

Thêm nút hành động nổi vào bố cục

Đoạn mã sau đây cho biết cách FloatingActionButton xuất hiện trong tệp bố cục:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

Theo mặc định, FAB được tô màu theo thuộc tính colorAccent. Bạn có thể tuỳ chỉnh bằng bảng màu của giao diện.

Bạn có thể định cấu hình các thuộc tính FAB khác bằng các thuộc tính XML hoặc các phương thức tương ứng, chẳng hạn như sau:

  • Kích thước của FAB, sử dụng thuộc tính app:fabSize hoặc phương thức setSize()
  • Màu gợn sóng của FAB, sử dụng thuộc tính app:rippleColor hoặc phương thức setRippleColor()
  • Biểu tượng FAB sử dụng thuộc tính android:src hoặc phương thức setImageDrawable()

Phản hồi khi nhấn nút

Sau đó, bạn có thể áp dụng View.OnClickListener để xử lý các thao tác nhấn FAB. Ví dụ: Mã sau đây hiển thị Snackbar khi người dùng nhấn vào nút hành động nổi:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Để biết thêm thông tin về các tính năng của FAB, hãy xem tài liệu tham khảo API cho FloatingActionButton.