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

Thử cách 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 →

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 với thao tác nhấn nút.

Để tìm hiểu thêm về cách thiết kế FAB cho ứng dụng của bạn theo Material Hướng dẫn thiết kế, xem Material Design FAB của Google.

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

Đoạn mã sau đây cho thấy cách FloatingActionButton sẽ 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 bằng thuộc tính colorAccent. Bạn có thể tuỳ chỉnh bằng màu của giao diện Palette.

Bạn có thể định cấu hình các thuộc tính FAB khác bằng thuộc tính XML hoặc các thuộc tính 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 setSize() phương thức
• Màu gợn sóng của FAB, sử dụng thuộc tính app:rippleColor hoặc setRippleColor() phương thức
• Biểu tượng FAB sử dụng thuộc tính android:src hoặc setImageDrawable() phương thức

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

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

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

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 chức năng của FAB, hãy xem tài liệu tham khảo API cho FloatingActionButton.