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 của ứng dụng và phản hồi khi nhấn nút.
Để tìm hiểu thêm về cách thiết kế một FAB cho ứng dụng theo Nguyên tắc thiết kế Material, hãy xem FAB trong Material Design.
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 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 lượt nhấn FAB. Ví dụ: mã sau đây hiển thị một Snackbar khi người dùng nhấn vào FAB:
Kotlin
valfab:View=findViewById(R.id.fab)fab.setOnClickListener{view->Snackbar.make(view,"Here's a Snackbar",Snackbar.LENGTH_LONG).setAction("Action",null).show()}
Java
FloatingActionButtonfab=findViewById(R.id.fab);fab.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){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 về API cho FloatingActionButton.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-08-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-27 UTC."],[],[],null,["Try the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to add components in Compose. \n[Floating Action Button →](/develop/ui/compose/components/fab) \n\n\u003cbr /\u003e\n\nA floating action button (FAB) is a circular button that triggers the primary\naction in your app's UI. This document shows how to add a FAB to your layout,\ncustomize some of its appearance, and respond to button taps.\n\nTo learn more about how to design a FAB for your app according to the Material\nDesign Guidelines, see [Material Design\nFAB](https://m3.material.io/components/floating-action-button/overview)\n.\n**Figure 1.** A floating action button (FAB).\n\nAdd the floating action button to your layout\n\nThe following code shows how the\n[`FloatingActionButton`](/reference/com/google/android/material/floatingactionbutton/FloatingActionButton)\nappears in your layout file: \n\n```xml\n\u003ccom.google.android.material.floatingactionbutton.FloatingActionButton\n android:id=\"@+id/fab\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:layout_gravity=\"end|bottom\"\n android:src=\"@drawable/ic_my_icon\"\n android:contentDescription=\"@string/submit\"\n android:layout_margin=\"16dp\" /\u003e\n```\n\nBy default, a FAB is colored by the `colorAccent` attribute, which you can\n[customize with the theme's color\npalette](/guide/topics/ui/look-and-feel/themes#ColorPalette).\n\nYou can configure other FAB properties using XML attributes or corresponding\nmethods, such as the following:\n\n- The size of the FAB, using the `app:fabSize` attribute or the [`setSize()`](/reference/com/google/android/material/floatingactionbutton/FloatingActionButton#setSize(int)) method\n- The ripple color of the FAB, using the `app:rippleColor` attribute or the [`setRippleColor()`](/reference/com/google/android/material/floatingactionbutton/FloatingActionButton#setRippleColor(int)) method\n- The FAB icon, using the `android:src` attribute or the [`setImageDrawable()`](/reference/android/widget/ImageView#setImageDrawable(android.graphics.drawable.Drawable)) method\n\nRespond to button taps\n\nYou can then apply an\n[`View.OnClickListener`](/reference/android/view/View.OnClickListener) to\nhandle FAB taps. For example, the following code displays a\n[`Snackbar`](/reference/com/google/android/material/snackbar/Snackbar) when\nthe user taps the FAB: \n\nKotlin \n\n```kotlin\nval fab: View = findViewById(R.id.fab)\nfab.setOnClickListener { view -\u003e\n Snackbar.make(view, \"Here's a Snackbar\", Snackbar.LENGTH_LONG)\n .setAction(\"Action\", null)\n .show()\n}\n```\n\nJava \n\n```java\nFloatingActionButton fab = findViewById(R.id.fab);\nfab.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View view) {\n Snackbar.make(view, \"Here's a Snackbar\", Snackbar.LENGTH_LONG)\n .setAction(\"Action\", null).show();\n }\n});\n```\n\nFor more information about the capabilities of the FAB, see the API reference\nfor the\n[`FloatingActionButton`](/reference/com/google/android/material/floatingactionbutton/FloatingActionButton)."]]