Tombol tindakan mengambang (FAB) adalah tombol lingkaran yang memicu tindakan utama di UI aplikasi Anda. Dokumen ini menunjukkan cara menambahkan FAB ke tata letak, menyesuaikan sebagian tampilannya, dan merespons ketukan tombol.
Untuk mempelajari lebih lanjut cara mendesain FAB untuk aplikasi Anda sesuai dengan Panduan Desain Material, lihat FAB Desain Material .
![Gambar yang menampilkan layar aplikasi yang berisi FloatingActionButton merah](https://developer.android.com/static/training/material/images/fab.png?authuser=8&hl=id)
Menambahkan tombol tindakan mengambang ke tata letak Anda
Kode berikut menunjukkan tampilan
FloatingActionButton
dalam file tata letak Anda:
<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" />
Secara default, FAB diberi warna dengan atribut colorAccent
, yang dapat Anda
sesuaikan dengan palet warna
tema.
Anda dapat mengonfigurasi properti FAB lainnya menggunakan atribut XML atau metode yang sesuai, seperti berikut:
- Ukuran FAB, menggunakan atribut
app:fabSize
atau metodesetSize()
- Warna ripple FAB, menggunakan atribut
app:rippleColor
atau metodesetRippleColor()
- Ikon FAB, menggunakan atribut
android:src
atau metodesetImageDrawable()
Merespons ketukan tombol
Selanjutnya, Anda dapat menerapkan
View.OnClickListener
untuk
menangani ketukan FAB. Misalnya, kode berikut menampilkan
Snackbar
saat
pengguna mengetuk FAB:
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(); } });
Untuk informasi selengkapnya tentang kemampuan FAB, lihat referensi API
untuk
FloatingActionButton
.