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.
![Hình ảnh hiển thị màn hình ứng dụng chứa mộtFloatActionButton màu đỏ](https://developer.android.com/static/training/material/images/fab.png?authuser=19&hl=vi)
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ặcsetSize()
phương thức - Màu gợn sóng của FAB, sử dụng thuộc tính
app:rippleColor
hoặcsetRippleColor()
phương thức - Biểu tượng FAB sử dụng thuộc tính
android:src
hoặcsetImageDrawable()
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:
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 chức năng của FAB, hãy xem tài liệu tham khảo API
cho
FloatingActionButton
.