Tombol tindakan mengambang (FAB) adalah tombol lingkaran yang memicu tindakan utama di UI aplikasi Anda. Dokumen ini menunjukkan cara menambahkan FAB ke tata letak Anda, menyesuaikan beberapa tampilannya, dan menanggapi ketukan tombol.
Untuk mempelajari lebih lanjut cara mendesain FAB untuk aplikasi Anda sesuai dengan Material Panduan Desain, lihat Desain Material FAB kami.
![Gambar yang menampilkan layar aplikasi yang berisi FloatingActionButton merah](https://android-dot-devsite-v2-prod.appspot.com/static/training/material/images/fab.png?hl=id)
Menambahkan tombol tindakan mengambang ke tata letak Anda
Kode berikut menunjukkan cara
FloatingActionButton
muncul di 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 warna tema
palette.
Anda dapat mengonfigurasi properti FAB lainnya menggunakan atribut XML atau , seperti berikut ini:
- Ukuran FAB, menggunakan atribut
app:fabSize
atausetSize()
metode - Warna ripple FAB, menggunakan atribut
app:rippleColor
atausetRippleColor()
metode - Ikon FAB, menggunakan atribut
android:src
atausetImageDrawable()
metode
Merespons ketukan tombol
Anda kemudian dapat menerapkan
View.OnClickListener
ke
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